하나의 문서로 웹페이지의 순수 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="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞

레이아웃이 아니라 구조입니다. 이는 콘텐츠 블록에 대한 의미론적 설명입니다. 구조를 이해하면 해당 ID를 DIV에 추가할 수 있습니다. 모든 콘텐츠 블록은 DIV 컨테이너 내에 포함될 수 있으며 다른 DIV는 그 안에 중첩될 수 있습니다. 콘텐츠 블록에는 제목, 단락, 이미지, 표, 목록 등 모든 HTML 요소가 포함될 수 있습니다.

위 내용에 따르면 여러분은 이미 HTML을 구성하는 방법을 알고 있었고 이제 레이아웃과 스타일을 정의할 수 있습니다. 각 콘텐츠 블록은 페이지의 어느 위치에나 배치할 수 있으며 블록의 색상, 글꼴, 테두리, 배경, 정렬 속성 등을 지정할 수 있습니다.

위는 순수 CSS 레이아웃 웹 페이지에 대한 전체 소개입니다.

CSS 튜토리얼

에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 하나의 문서로 웹페이지의 순수 CSS 레이아웃을 마스터하세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!