CSS 레이아웃을 배우고 있나요? 아직도 순수한 CSS 레이아웃을 완전히 마스터할 수 없습니까? 일반적으로 학습을 방해하는 두 가지 상황이 있습니다.
첫 번째 가능성은 CSS 처리 페이지의 원리를 이해하지 못했다는 것입니다. 페이지의 전반적인 성능을 고려하기 전에 먼저 콘텐츠의 의미와 구조를 고려한 다음 의미와 구조에 CSS를 추가해야 합니다. 이 기사에서는 HTML을 구성하는 방법을 설명합니다.
또 다른 이유는 매우 친숙한 프레젠테이션 레이어 속성(예: cellpadding, hspace, align=left 등)을 잃어버리고 이를 어떤 CSS 문으로 변환해야 할지 모르기 때문입니다. 첫 번째 문제를 해결하고 HTML을 구성하는 방법을 알게 되면 원래 프레젠테이션 속성을 대체하는 데 사용할 CSS에 대해 자세히 설명하는 목록을 제공하겠습니다.
구조화된 HTML
우리는 웹페이지 제작을 처음 배울 때 항상 그림, 글꼴, 색상, 레이아웃 계획을 고려하여 디자인하는 방법을 먼저 고려합니다. 그런 다음 Photoshop이나 Fireworks를 사용하여 그림을 그리고 작은 그림으로 자릅니다. 마지막으로 HTML을 편집하여 모든 디자인을 페이지에 복원합니다.
HTML 페이지를 CSS(CSS 친화적)로 배치하려면 먼저 "외관"에 대해 생각하지 말고 먼저 페이지 콘텐츠의 의미와 구조를 생각해야 합니다.
외모가 가장 중요한 것은 아닙니다. 잘 구조화된 HTML 페이지는 어떤 모습으로든 표시될 수 있으며 CSS Zen Garden이 전형적인 예입니다. CSS Zen Garden은 우리가 마침내 CSS의 힘을 깨닫도록 도와줍니다.
HTML은 단지 컴퓨터 화면에서 읽기 위한 것이 아닙니다. Photoshop에서 세심하게 디자인한 이미지는 PDA, 휴대폰, 화면 판독기에서는 표시되지 않을 수 있습니다. 그러나 잘 구조화된 HTML 페이지는 다양한 CSS 정의를 통해 어느 네트워크 장치에서나 어디서나 표시될 수 있습니다.
생각을 시작하다
일부 작가는 의미론이라고도 부르는 구조가 무엇인지 배우는 것부터 시작하십시오. 이 용어가 의미하는 바는 콘텐츠 블록과 각 콘텐츠가 제공하는 목적을 분석한 다음 이러한 콘텐츠 목적을 기반으로 해당 HTML 구조를 구축해야 한다는 것입니다.
앉아서 신중하게 페이지 구조를 분석하고 계획하면 다음과 같은 결과가 나올 수 있습니다.
로고 및 사이트 이름
메인페이지 내용
사이트 탐색(메인 메뉴)
하위 메뉴
검색창
기능 영역(예: 장바구니, 결제)
바닥글(저작권 및 관련 법적 고지)
우리는 일반적으로 다음과 유사하게 DIV 요소를 사용하여 이러한 구조를 정의합니다.
<div id=헤더></div>
<div id=content></div>
<div id=globalnav></div>
<div id=subnav></div>
<div id=검색></div>
<div id=상점></div>
<div id=바닥글></div>
레이아웃이 아니라 구조입니다. 이는 콘텐츠 블록에 대한 의미론적 설명입니다. 구조를 이해하면 해당 ID를 DIV에 추가할 수 있습니다. 모든 콘텐츠 블록은 DIV 컨테이너 내에 포함될 수 있으며 다른 DIV는 그 안에 중첩될 수 있습니다. 콘텐츠 블록에는 제목, 단락, 이미지, 표, 목록 등 모든 HTML 요소가 포함될 수 있습니다.
위의 내용을 바탕으로 HTML을 구성하는 방법을 이미 알고 있으므로 이제 레이아웃과 스타일을 정의할 수 있습니다. 각 콘텐츠 블록은 페이지의 어느 위치에나 배치할 수 있으며 블록의 색상, 글꼴, 테두리, 배경, 정렬 속성 등을 지정할 수 있습니다.
선택자를 사용하는 것은 놀라운 일입니다
ID 이름은 특정 콘텐츠 블록을 제어하는 수단입니다. 이 콘텐츠 블록을 DIV로 래핑하고 고유 ID를 추가하면 CSS 선택기를 사용하여 제목, 목록, 사진을 포함한 각 페이지 요소의 모양을 정확하게 정의할 수 있습니다. , 링크 또는 단락 등 예를 들어 #header에 대한 CSS 규칙을 작성하면 #content의 이미지 규칙과 완전히 다를 수 있습니다.
또 다른 예: 다양한 규칙을 사용하여 다양한 콘텐츠 블록에서 링크 스타일을 정의할 수 있습니다. 예: #globalnav a:link 또는 #subnav a:link 또는 #content a:link. 또한 서로 다른 콘텐츠 블록의 동일한 요소에 대해 서로 다른 스타일을 정의할 수도 있습니다. 예를 들어, #content p와 #footer p를 통해 각각 #content와 #footer에서 p의 스타일을 정의합니다. 구조적으로 말하면 귀하의 페이지는 사진, 링크, 목록, 단락 등으로 구성됩니다. 이러한 요소 자체는 표시되는 네트워크 장치(PDA, 휴대폰 또는 인터넷 TV)에 영향을 미치지 않습니다.
세심하게 구성된 HTML 페이지는 매우 간단하며 모든 요소는 구조적 목적으로 사용됩니다. 단락을 들여쓰려면 blockquote 태그를 사용할 필요가 없습니다. p 태그를 사용하고 p에 CSS 여백 규칙을 추가하면 들여쓰기 목적이 달성됩니다. p는 구조화된 태그이고 margin은 표시 속성입니다. 전자는 HTML에 속하고 후자는 CSS에 속합니다. (이것은 구조와 표현의 분리이다.)
잘 구성된 HTML 페이지에는 속성 태그가 거의 없습니다. 코드가 매우 깔끔하고 간결합니다. 예를 들어 원래 코드 <table width=80% cellpadding=3 border=2 align=left> 는 이제 HTML로만 <table> 을 작성할 수 있으며, 성능을 제어하는 모든 항목은 구조화된 HTML에서 테이블이 작성됩니다. 다른 것이 아닌 테이블입니다(레이아웃 및 위치 지정에 사용되는 등).
스스로 구조화하는 연습을 하세요
위의 내용은 가장 기본적인 구조일 뿐이며, 필요에 따라 콘텐츠 블록을 조정할 수 있습니다. DIV 중첩이 자주 발생하며 컨테이너 계층에 다음과 유사한 구조를 가진 다른 계층이 있는 것을 볼 수 있습니다.
<div ID=nav컨테이너>
<div ID=globalnav>
<ul>목록</ul>
</div>
<div ID=하위 탐색>
<ul>다른 목록</ul>
</div>
</div>
중첩된 div 요소를 사용하면 프레젠테이션을 제어하기 위해 더 많은 CSS 규칙을 정의할 수 있습니다. 예를 들어 #navcontainer에 목록을 오른쪽에 맞추는 규칙을 제공하고, #globalnav에 목록을 왼쪽에 맞추는 규칙을 제공하고, #subnav에 또 다른 규칙을 제공할 수 있습니다. 목록 전체를 중앙에 배치하는 규칙입니다.
전통적인 방법을 CSS로 대체
다음 목록은 기존 메서드를 CSS로 바꾸는 데 도움이 됩니다.
HTML 속성 및 해당 CSS 메서드
HTML 속성 CSS 메소드 설명
정렬=왼쪽
정렬=오른쪽 부동: 왼쪽;
float: right; CSS를 사용하여 그림, 단락, div, 제목, 표, 목록 등 모든 요소를 플로팅합니다.
부동 속성을 사용하는 경우 부동 요소의 너비를 정의해야 합니다.
marginwidth=0 leftmargin=0 marginheight=0 topmargin=0 margin: 0; CSS를 사용하면 body 요소뿐만 아니라 모든 요소에 여백을 설정할 수 있습니다. 더 중요한 것은 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽을 지정할 수 있다는 것입니다. 별도로 마진 값.
vlink=#333399 alink=#000000 link=#3333FF a:link #3ff;
a:방문함: #339;
a:호버: #999;
a:활성: #00f;
HTML에서는 링크의 색상이 본문의 속성값으로 정의됩니다. 링크 스타일은 페이지 전체에서 동일합니다. CSS 선택기를 사용하면 페이지의 여러 부분에서 링크 스타일이 다를 수 있습니다.
bgcolor=#FFFFFF background-color: #fff; CSS에서는 본문 및 테이블 요소뿐만 아니라 모든 요소에 대해 배경색을 정의할 수 있습니다.
bordercolor=#FFFFFF border-color: #fff; 모든 요소는 위쪽, 오른쪽, 아래쪽 및 왼쪽을 각각 정의할 수 있습니다.
테두리=3
cellspacing=3 border-width: 3px; CSS를 사용하면 표의 테두리를 통합 스타일로 정의하거나 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리의 색상, 크기 및 스타일을 각각 정의할 수 있습니다.
테이블, td 또는 th 선택기를 사용할 수 있습니다.
경계선 없는 효과를 설정해야 하는 경우 CSS 정의를 사용할 수 있습니다. border-collapse:collapse;
<br 지우기=왼쪽>
<br 클리어=오른쪽>
<br 지우기=모두>
지우기: 왼쪽;
명확하다: 맞다;
명확함: 둘 다;
많은 2열 또는 3열 레이아웃은 위치 지정을 위해 float 속성을 사용합니다. 플로팅 레이어에 배경색이나 배경 이미지를 정의하는 경우에는 Clear 속성을 사용할 수 있습니다.
셀패딩=3
vspace=3
hspace=3 padding: 3px; CSS를 사용하면 모든 요소에 padding 속성을 설정할 수 있습니다. 마찬가지로 padding은 위쪽, 오른쪽, 아래쪽 및 왼쪽에 각각 설정할 수 있습니다. 패딩은 투명합니다.
align=center 텍스트 정렬: center;
여백 오른쪽: 자동; 여백 왼쪽: 자동;
텍스트 정렬은 텍스트에만 작동합니다.
div 및 p와 같은 블록 수준 요소는 margin-right: auto 및 margin-left: auto;를 사용하여 가로 중앙에 배치할 수 있습니다.
아쉬운 기술과 작업환경
브라우저의 불완전한 CSS 지원으로 인해 CSS가 기존 방법과 동일한 효과를 얻을 수 있도록 몇 가지 트릭(해킹)을 채택하거나 환경(해결 방법)을 설정해야 하는 경우가 있습니다. 예를 들어, 블록 수준 요소는 수평 센터링 기술, 상자 모델 버그 기술 등을 사용해야 하는 경우가 있습니다. 이러한 모든 기술은 Molly Holzschlag의 기사 통합 웹 디자인: 장기 CSS 해킹 관리 전략에 자세히 설명되어 있습니다.
CSS 기술에 대한 또 다른 리소스는 Big John과 Holly Bergevin의 "Position is Everything"입니다.
부동 동작 이해
Eric Meyer의 "Containing Floats"는 레이아웃에 부동 속성을 사용하는 방법을 익히는 데 도움이 됩니다. 플로트 요소를 지워야 하는 경우가 있습니다. "구조적 마크업 없이 플로트를 지우는 방법"을 읽어보면 매우 도움이 됩니다.