div+CSS 구조
CSS 레이아웃을 배우고 있습니까? 순수한 CSS 레이아웃을 완전히 마스터 할 수 없습니까? 일반적으로 연구를 방해하는 두 가지 상황이 있습니다.
첫 번째 가능성은 아직 CSS 처리 페이지의 원칙을 이해하지 못했다는 것입니다. 페이지의 전반적인 성능을 고려하기 전에 먼저 컨텐츠의 의미와 구조를 고려한 다음 시맨틱과 구조에 CSS를 추가해야합니다. 이 기사는 HTML을 구조화하는 방법을 알려줍니다.
또 다른 이유는 매우 친숙한 프리젠 테이션 계층 속성 (예 : CellPadding, Hspace, Align = Left 등)에 대해 무력하며 CSS 진술이 무엇을 변환 해야하는지 모르기 때문입니다. 첫 번째 문제를 해결하고 HTML을 구성하는 방법을 알면 원래 성능 속성을 대체 할 CSS에 대한 세부 정보 목록을 제공합니다.
구조화 된 HTML
우리는 웹 페이지 제작을 처음 배웠을 때 항상 사진, 글꼴, 색상 및 레이아웃 계획을 디자인하고 고려하는 방법을 항상 고려합니다. 그런 다음 Photoshop 또는 불꽃 놀이를 사용하여 작은 그림을 그리고 자릅니다. 마지막으로, 모든 디자인은 HTML을 편집하여 페이지에서 복원됩니다.
CSS (CSS 친화적)로 HTML 페이지를 레이아웃하려면 외관을 고려하지 않고 시작하고 먼저 페이지 콘텐츠의 의미와 구조에 대해 생각해야합니다.
외모가 가장 중요한 것은 아닙니다. 잘 구조화 된 HTML 페이지는 모든 외관으로 표현 될 수 있으며 CSS Zen Garden은 전형적인 예입니다. CSS Zen Garden은 CSS의 힘을 마침내 인식하는 데 도움이됩니다.
HTML은 컴퓨터 화면에서만 읽히는 것이 아닙니다. Photoshop으로 신중하게 디자인 한 사진은 PDA, 휴대폰 및 스크린 리더에 표시되지 않을 수 있습니다. 그러나 잘 구조화 된 HTML 페이지는 CSS의 다양한 정의를 통해 모든 네트워크 장치에서 어디서나 표시 할 수 있습니다.
생각을 시작하십시오
우선, 우리는 어떤 구조가 무엇인지 배워야하며, 일부 작가는 의미론이라고도합니다. 이 용어는 컨텐츠 블록과 각 컨텐츠 서비스의 목적을 분석 한 다음 이러한 컨텐츠 목적으로 해당 HTML 구조를 구축해야한다는 것을 의미합니다.
앉아서 신중하게 분석하고 페이지 구조를 계획하면 다음과 같은 몇 가지 조각을 얻을 수 있습니다.
로고 및 사이트 이름
메인 페이지 내용
사이트 탐색 (메인 메뉴)
하위 메뉴
검색 상자
기능 영역 (예 : 쇼핑 카트, 계산원)
바닥 글 (저작권 및 관련 법적 진술)
우리는 일반적으로 div 요소를 사용하여 다음과 같이 이러한 구조를 정의합니다.
div div id = 헤더 ＞＜/div ＞
div div id = 컨텐츠 id/div ＞
div id = globalnav ＞＜/div ＞
div id = subnav ＞＜/div ＞
div div id = 검색 id/div ＞
div id = Shop id/div ＞
div div id = 바닥 글 ＞＜/div ＞
이것은 레이아웃이 아니라 구조입니다. 이것은 내용 블록에 대한 의미 론적 설명입니다. 구조를 이해하면 해당 ID를 DIV에 추가 할 수 있습니다. DIV 컨테이너에는 컨텐츠 블록이 포함되어 있거나 다른 DIV가 포함될 수 있습니다. 컨텐츠 블록에는 제목, 단락, 그림, 표, 목록 등 HTML 요소가 포함될 수 있습니다.
위에서 설명한 내용에 따르면 이미 HTML을 구조화하는 방법을 알고 있으며 이제 레이아웃 및 스타일 정의를 수행 할 수 있습니다. 각 컨텐츠 블록은 페이지의 어디에나 배치 할 수 있으며 블록의 색상, 글꼴, 테두리, 배경, 정렬 속성 등이 지정됩니다.
선택기를 사용하는 것은 훌륭한 일입니다
ID의 이름은 특정 컨텐츠 블록을 제어하는 수단입니다. 이 컨텐츠 블록에 DIV를 넣고 고유 한 ID를 추가하면 CSS 선택기를 사용하여 제목, 목록, 그림, 링크 또는 단락 등을 포함하여 각 페이지 요소의 모양을 정확하게 정의 할 수 있습니다. 예를 들어 #Header에 대한 CSS 규칙을 작성하면 #Content의 이미지 규칙과 완전히 다를 수 있습니다.
또 다른 예는 다음과 같습니다. 다른 규칙을 통해 다른 컨텐츠 블록에서 링크 스타일을 정의 할 수 있습니다. 이와 유사 : #Globalnav A : 링크 또는 #Subnava : 링크 또는 #Content A : 링크. 스타일이 다른 컨텐츠 블록에서 동일한 요소를 정의 할 수도 있습니다. 예를 들어, #Content 및 #Footer의 P 스타일은 각각 #Content P 및 #Footerp로 정의됩니다. 구조적으로, 귀하의 페이지는 그림, 링크, 목록, 단락 등으로 구성되어 있습니다. 이러한 요소 자체는 네트워크 장치 (PDA 또는 휴대 전화 또는 네트워크 TV)가 표시되는 데 영향을 미치지 않습니다. 외관으로 정의 할 수 있습니다.
신중하게 구조화 된 HTML 페이지는 매우 간단하며 각 요소는 구조적 목적으로 사용됩니다. 단락을 들여 보내려면 블록 쿼트 태그를 사용할 필요가 없습니다. P 태그를 사용하고 CSS 마진 규칙을 P에 추가하여 압입 목적을 달성하십시오. P는 구조화 된 태그이고, 마진은 표현 속성이고, 전자는 HTML에 속하고, 후자는 CSS에 속합니다. (이것은 구조와 표현의 위상 분리입니다.)
잘 구조화 된 HTML 페이지에서 속성을 나타내는 태그가 거의 없습니다. 코드는 매우 깨끗하고 간결합니다. 예를 들어, 원래 코드 <tableWidth = 80% CellPadding = 3 Porder = 2align = left>는 이제 HTML로만 작성할 수 있으며, 제어하는 모든 것은 CSS에 기록됩니다. 구조화 된 HTML에서 테이블은 다른 것이 아닌 테이블입니다 (예 : 레이아웃 및 포지셔닝에 사용되는 것).
직접 구조를 연습하십시오
위에서 언급 한 것은 가장 기본적인 구조 일뿐입니다. 실제 응용 프로그램에서는 필요에 따라 컨텐츠 블록을 조정할 수 있습니다. 종종 div 중첩 상황이 있으며, 컨테이너 층에 다른 층이 있으며 이와 유사한 구조가 있음을 알 수 있습니다.
div id = navcontainer ＞
div id = globalnav ＞
＜ ul list 목록 ＜/ul ＞
＜/div ＞
div id = subnav ＞
＜ UL list 또 다른 목록 ＜/ul ＞
＜/div ＞
＜/div ＞
중첩 된 DIV 요소는 성능을 제어하기 위해 더 많은 CSS 규칙을 정의 할 수 있습니다. 예를 들어 : #NAVContainer 목록을 제대로 만들기위한 규칙을 제공 한 다음 #GlobalNav에 목록을 남겨두고 #Subnav 목록을 다른 완전히 다른 성능을 제공 할 수 있습니다.
전통적인 방법을 CS로 교체하십시오
다음 목록은 기존 방법을 CSS로 교체하는 데 도움이됩니다.
HTML 속성 및 해당 CSS 방법
HTML 속성
CSS 메소드 설명
Align = 왼쪽
Align = 오른쪽 플로트 : 왼쪽;
플로트 : 오른쪽; CSS를 사용하여 그림, 단락, div, 제목, 테이블, 목록 등 모든 요소를 떠올리십시오.
플로트 속성을 사용하면 부동 요소의 너비를 정의해야합니다.
marginwidth = 0leftmargin = 0 marginheight = 0 TopMargin = 0 마진 : 0; CSS를 사용하면 신체 요소뿐만 아니라 모든 요소에서 마진을 설정할 수 있지만 더 중요한 것은 요소의 상단, 오른쪽, 하단 및 왼쪽의 마진 값을 각각 지정할 수 있습니다.
vlink =#333399 link =#000000 link =#3333ff A : 링크#3ff;
A : 방문 : #339;
A : 호버 : #999;
A : Active : #00F;
HTML에서 링크의 색상은 본문의 속성 값으로 정의됩니다. 전체 페이지의 링크 스타일은 동일합니다. CSS 선택기를 사용하면 페이지의 다른 부분의 링크 스타일이 다를 수 있습니다.
bgcolor = #fffff background-color : #ffff; CSS에서 모든 요소는 본문과 테이블 요소뿐만 아니라 배경색을 정의 할 수 있습니다.
BorderColor = #ffffff Border-Color : #ffff; 모든 요소는 테두리 (보어)를 설정할 수 있으며 각각 상단, 오른쪽, 하단 및 왼쪽을 정의 할 수 있습니다.
Border = 3CellSpacing = 3 Border-Width : 3px; CSS를 사용하면 테이블의 테두리를 통합 스타일로 정의하거나 상단, 오른쪽, 하단 및 왼쪽 테두리의 색상, 크기 및 스타일을 각각 정의 할 수 있습니다.
테이블, TD 또는 TH 선택기를 사용할 수 있습니다.
경계없는 효과를 설정 해야하는 경우 CSS 정의를 사용할 수 있습니다. Border-Collapse : Collapse;
br br clear = 왼쪽 clear
br br clear = 오른쪽 clear
br br clear = 모두 clear
Clear : 왼쪽;
CLEAR : 맞습니다.
Clear : 둘 다;
많은 2 열 또는 3 열 레이아웃은 float 속성을 사용하여 찾습니다. 플로팅 레이어에서 배경색 또는 배경 이미지를 정의하면 명확한 속성을 사용할 수 있습니다.
CellPadding = 3
vspace = 3
hspace = 3 패딩 : 3px; CSS를 사용하면 모든 요소가 패딩 속성을 설정할 수 있습니다. 마찬가지로 패딩은 각각 상단, 오른쪽, 하단 및 왼쪽을 설정할 수 있습니다. 패딩은 투명합니다.
정렬 = 중앙 텍스트-정렬 : 중앙;
마진 오른쪽 : 자동; 마진 좌파 : 자동;
텍스트-정렬은 텍스트와 만 작동합니다.
Div 및 P와 같은 블록 레벨은 마진 오른쪽을 통해 수평으로 중심으로 할 수 있습니다. 및 마진 왼쪽 : 자동;
유감스러운 팁과 작업 환경
브라우저에서 CSS의 불완전한 지원으로 인해 CSS가 전통적인 방법과 동일한 효과를 달성 할 수 있도록 해킹을하거나 해결 방법을 만들어야합니다. 예를 들어, 블록 레벨 요소는 때때로 수평 센터링 기술, 박스 모델 버그 기술을 사용해야합니다.
CSS 팁의 또 다른 리소스 사이트는 Big John과 Holly Bergevin의 위치는 모든 것입니다.
떠 다니는 행동을 이해합니다
에릭 메이어 (Eric Meyer)의 플로트를 포함하면 플로트 속성 레이아웃을 사용하는 방법을 마스터하는 데 도움이됩니다. 플로트 요소는 때때로 청소해야하며, 구조적 마크 업없이 플로트를 제거하는 방법을 읽는 것이 매우 도움이 될 것입니다.