CSS 박스 모드를 철저하게 이해하는 것이 좋습니다(DIV 레이아웃 빠른 소개)

머리말
표를 사용하지 않고 웹페이지 레이아웃을 해보고 싶은데, 흔히 p를 사용하여 웹페이지 구조를 레이아웃한다는 이야기를 자주 듣는 CSS를 사용하거나, 웹페이지 표준 디자인을 배우고 싶다면, 또는 상사가 회사의 경쟁력을 높이기 위해 전통적인 테이블 레이아웃 방법을 변경하기를 원할 경우 반드시 알아야 할 지식 포인트 중 하나는 CSS 상자 모드입니다. 이것이 p 레이아웃의 핵심인 전통적인 테이블 레이아웃입니다. 웹 페이지 콘텐츠의 위치와 레이아웃을 위한 다양한 크기 및 테이블 중첩 CSS 레이아웃으로 전환한 후 웹 페이지는 CSS에서 정의한 다양한 크기의 상자 및 상자 중첩을 통해 정렬됩니다. 이렇게 입력한 웹 페이지의 코드는 간단하고, 업데이트가 쉽고, PDA 장치 등 더 많은 브라우저와 호환될 수 있기 때문에 정상적으로 탐색할 수도 있으므로 좋아했던 표 조판을 포기할 가치가 있습니다. 더 중요한 것은 웹 페이지의 CSS 조판입니다. 여기서는 관련 정보를 직접 찾지 않겠습니다.
CSS 박스 모델 이해
CSS 박스 모델이란 무엇인가요? 왜 상자라고 부르나요? 먼저 웹 디자인에서 자주 듣는 속성 이름인 콘텐츠, 패딩, 테두리 및 여백에 대해 이야기해 보겠습니다.

우리가 일상에서 접하는 상자(박스)에도 이러한 속성이 담겨있다고 하여 박스 패턴이라 부릅니다. 내용물은 상자에 들어 있는 것입니다. 내용물(귀중품)이 손상되는 것을 방지하기 위해 충전재는 상자 자체입니다. 통풍과 쉽게 제거할 수 있도록 일정한 간격을 두고 함께 쌓아서 배치할 수 없습니다. 웹 디자인에서 콘텐츠는 텍스트, 그림 등의 요소를 참조하는 경우가 많지만, 실제 상자와 달리 작은 상자(p-중첩)일 수도 있습니다. 일반적으로 실제 사물은 상자보다 클 수 없습니다. 늘어나서 부러지고 CSS 상자는 탄력적입니다. 내부의 물건은 상자 자체보다 크고 최대로 늘어나지만 손상되지는 않습니다. 충전재에는 폭 속성만 있는데, 이는 생활 속 상자에 들어가는 방진 보조자재의 두께로 이해될 수 있으며, 테두리에는 생활에서 보는 상자의 두께로 이해될 수 있는 크기와 색상이 있습니다. 그리고 상자가 어떤 색의 재료로 만들어졌는지 경계는 상자와 다른 것들 사이의 거리입니다. 실제 생활에서 우리가 정사각형 안에 있고 다양한 크기와 색상의 상자를 일정한 간격과 일정한 순서로 배치한다고 가정해 보겠습니다. 마지막으로 정사각형에서 내려다보면 우리가 원하는 것과 유사한 그래픽과 구조를 볼 수 있습니다. . 웹 페이지 레이아웃은 아래와 같이 디자인되었습니다.

'상자'로 구성된 웹페이지 레이아웃

생각 바꾸기

전통적인 프런트 엔드 웹 디자인은 다음과 같이 수행됩니다. 요구 사항에 따라 먼저 기본 색상, 사용할 사진 유형, 글꼴, 색상을 고려합니다. 그런 다음 Photoshop과 같은 소프트웨어를 사용하여 자유롭게 그리고 마지막으로 작은 그림으로 자르고 더 이상 자유롭게 HTML을 디자인하여 페이지를 생성하지 않습니다. 레이아웃을 CSS로 전환한 후에는 이 아이디어를 변경해야 합니다. 주요 고려 사항은 페이지의 내용입니다. 강력한 CSS 제어 기능을 갖춘 웹 페이지이므로 웹 페이지가 완성된 후 원하는 웹 페이지 스타일을 쉽게 조정할 수 있습니다. 또한 CSS 레이아웃의 또 다른 목적은 다음과 같습니다. 코드를 읽기 쉽게 만들고, 블록을 지우고, 코드를 재사용할 수 있도록 강화하므로 구조가 중요합니다. 내 웹페이지 디자인이 매우 복잡하다고 말하고 싶다면 나중에 그 효과를 얻을 수 있을까요? 제가 말씀드리고 싶은 것은 CSS로 효과를 얻을 수 없다면 일반적으로 테이블로는 효과를 얻기가 어렵다는 것입니다. 왜냐하면 CSS의 제어 능력이 너무 강력하기 때문입니다. 그런데 CSS를 사용하면 매우 실용적인 이점이 있습니다. 조판을 위해 웹 사이트 구축을 위해 주문을 받는 경우 CSS를 사용하여 웹 페이지 레이아웃을 지정하는 경우 나중에 고객이 불만족스러운 경우, 특히 색상 톤을 변경하는 것이 매우 쉬울 것이며 사용자 정의도 가능합니다. 다양한 스타일의 CSS 파일. 고객이 동적 호출을 구현하는 프로그램을 선택하거나 작성하여 웹사이트에서 스타일을 동적으로 변경하는 기능을 갖습니다. 구조와 표현의 분리 실현 실제로 레이아웃 실습을 시작하기 전에 구조와 표현의 분리도 CSS 레이아웃의 특성을 활용한다는 점을 알아두겠습니다. , 코드가 간결해질 것입니다. 업데이트하는 것이 편리합니다. 이것이 CSS를 배우는 목적이 아닙니까? 예를 들어 P는 구조화된 태그입니다. P 태그가 있으면 단락 블록이라는 의미입니다. 여백은 단락을 2자씩 들여쓰도록 만들고 싶습니다. 공백을 추가하지 않고도 이제 P 태그에 CSS 스타일을 지정할 수 있습니다: P {text-indent: 2em;}. 결과 본문 내용은 추가 성능 제어 태그 없이 다음과 같습니다.
그래도 수정하고 싶다면 글꼴, 글꼴 크기, 배경, 줄 간격 등으로 단락을 수정하려면 해당 CSS를 P 스타일에 직접 추가하면 됩니다.

단락 내용

다음 내용이 혼합되어 있습니다. 구조와 표현이 통일된 구조를 가지고 있는 문단이 많다면 성능적인 면에서 이런 식으로 코드를 작성하는 것은 번거로울 것입니다.
구조와 성능의 분리에 대한 이해를 심화하기 위해 코드를 직접 나열해 보겠습니다.

조판에 CSS 사용

CSS 박스 모드를 철저하게 이해하는 것이 좋습니다(DIV 레이아웃 빠른 소개)_체험교류

;/p>

CSS 레이아웃 없음

첫 번째 방법은 콘텐츠 부분의 코드가 단순해야 한다는 것입니다. 이미지 목록이 더 많으면 첫 번째 CSS 레이아웃 방법이 더 많은 장점을 가지게 됩니다. 이해하시죠: I BODY에서 한 사람을 소개하고 싶습니다. 그 사람이 어떤 사람인지, 키가 얼마나 큰지, 남자인지 아닌지만 말씀드리겠습니다. 여자라면 CSS에서 확인해 보면 알 수 있습니다. 이렇게 하면 BODY에서의 작업이 단순해지며, 이는 BODY의 코드도 단순해진다는 의미입니다. BODY에 팀원이 있으면 CSS에 항목을 기록하면 됩니다. 이는 Flash 소프트웨어의 구성 요소 및 인스턴스 개념과 약간 비슷합니다. 서로 다른 인스턴스가 동일한 구성 요소를 공유하므로 애니메이션 파일이 크지 않을 것입니다. 아이디어를 CSS 웹 디자인으로 옮기는 것입니다. 즉, 코드가 복잡하지 않고 웹 페이지 파일이 작아서 클라이언트가 더 빨리 다운로드할 수 있다는 것입니다.

CSS 레이아웃을 사용하여 웹페이지 파일 크기 줄이기

위에서 만든 레이아웃처럼 4개의 블록으로 나누어지고, 각 블록의 프레임은 네, 이 프레임워크는 CSS로 작성되었습니다. 스타일이 작성되면 셀 수 없이 호출할 수 있습니다(ID가 아닌 클래스로 호출). 텍스트 내용이 변경되는 한 통일된 스타일을 가진 많은 섹션이 생성될 수 있습니다. 스타일 및 구조 코드는 다음과 같습니다(웹페이지를 직접 복사하여 생성하지 말고 웹페이지가 있어야 할 위치에 다음 코드를 붙여넣으세요).

结构代码是这样的：

首页

文章

상册

블로그

论坛

帮助