Div+CSS의 구조
CSS 레이아웃을 배우고 있습니까? 순수한 CSS 레이아웃을 완전히 마스터 할 수 없습니까? 일반적으로 연구를 방해하는 두 가지 상황이 있습니다.
첫 번째 가능성은 아직 CSS 처리 페이지의 원칙을 이해하지 못했다는 것입니다. 페이지의 전반적인 성능을 고려하기 전에 먼저 컨텐츠의 의미와 구조를 고려한 다음 시맨틱 및 구조에 대한 CSS를 추가해야합니다. 이 기사는 HTML을 구조화하는 방법을 알려줍니다.
또 다른 이유는 매우 친숙한 프리젠 테이션 계층 속성 (예 : CellPadding, Hspace, Align = Left 등)에 대해 무력하며 CSS 진술이 무엇을 변환 해야하는지 모르기 때문입니다. 첫 번째 문제를 해결하고 HTML을 구조화하는 방법을 알면 대신 사용되는 CSS가 어떤 원래 성능 속성 목록을 제공합니다.
구조화 된 HTML
우리는 웹 페이지 제작을 처음 배웠을 때 항상 사진, 글꼴, 색상 및 레이아웃 계획을 디자인하고 고려하는 방법을 항상 고려합니다. 그런 다음 Photoshop 또는 불꽃 놀이를 사용하여 작은 그림을 그리고 자릅니다. 마지막으로 모든 디자인은 HTML을 편집하여 페이지에 복원 및 표시됩니다.
HTML 페이지에 CSS (CSS 친화적)로 레이아웃을 원한다면 먼저 외관을 고려하지 않고 처음에는 페이지 컨텐츠의 의미와 구조에 대해 생각해야합니다.
외모가 가장 중요한 것은 아닙니다. 잘 구조화 된 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 Portle = 2align = 왼쪽>은 이제 HTML에 <pable> 만 쓸 수 있으며, 성능을 제어하는 모든 것들이 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 = #ffffff 배경색 : #fff; CSS에서 모든 요소는 본문과 테이블 요소뿐만 아니라 배경색을 정의 할 수 있습니다.
BorderColor = #ffffff Border-Color : #fff; 모든 요소는 경계를 설정할 수 있습니다 (Boeder). 상단, 오른쪽, 하단 및 왼쪽을 각각 정의 할 수 있습니다.
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의 "Floats"는 Float 속성 레이아웃을 사용하는 방법을 마스터하는 데 도움이됩니다. 플로트 요소는 때때로 지우아야하며 "구조적 마크 업없이 플로트를 청소하는 방법"을 읽는 것이 매우 도움이됩니다.