. 건물을 지을 때 벽돌과 비슷합니다. 그러나 사이트의 기본과 디자인을 구성하는 것이 유일한 것은 아닙니다. 문, 창문, 환기, 발코니 등과 마찬가지로 다른 HTML 요소가 레이아웃에 사용됩니다. 링크, 양식, 그림, 목록 및 표가 있습니다.
코드를 더 간결하고 명확하게 만들 수 있었습니다. 블록 레이아웃으로의 전환으로 HTML에서 불필요한 것, 즉 스타일을 제거하는 것이 가능해졌습니다. 과부하되어 탐색하기 어려운 테이블 레이아웃을 완전히 제거할 수 있게 되었습니다.
CSS 블록 레이아웃을 적극적으로 사용합니다. 사용 가능한 도구를 사용하면 픽셀 정확도로 모든 페이지 레이아웃을 만들 수 있습니다. 이 레이아웃을 픽셀 퍼펙트라고 합니다. 이는 사이트와 레이아웃이 완벽하게 일치함을 의미합니다. 위 사진은 블록 레이아웃으로 모든 것이 그렇게 단순하지는 않다는 것을 보여줍니다. 처음에는 테이블 없이는 불가능했습니다. 이는 페이지의 기본 레이아웃을 만드는 데 사용되었으며 블록은 개별 요소에 사용되었습니다. 블록의 높이를 설정하는 방법을 배우기 전까지는 이런 경우였습니다.
장점
블록 웹 사이트 레이아웃에는 다음과 같은 장점이 있습니다.
추가 개발
현재 블록 div 레이아웃은 더 이상 사용되지 않으며 특정 상황의 특별한 경우로만 제한적으로만 사용됩니다. 레이아웃의 위치 지정 및 흐름으로 대체되었습니다. 많은 단점이 있었지만 전체적으로는 블록 레이아웃 이상의 기능을 허용했습니다.
다음은 인라인 블록 요소를 사용한 구성이었습니다. 이는 프로그래머의 작업을 크게 촉진했습니다. 이 방법을 사용하면 두 가지 유형의 블록을 모두 활용하고 보다 반응성이 뛰어나고 적응력이 뛰어난 디자인을 만들 수 있습니다. 어떤 방식으로든 이러한 모든 메소드는 "놀라운 레이아웃"이라는 이름을 부여한 div 요소로 구성되어 있다는 점은 주목할 가치가 있습니다.
현재 Flex-box와 bootstrap을 사용하여 페이지를 구축하고 있습니다. 이를 통해 코드가 크게 줄어들고 고품질 반응형 디자인을 더 빠르고 쉽게 만들 수 있습니다. 전체 페이지를 깨지 않고도 블록을 이동할 수 있습니다.
발전의 최전선에는 새로운 기술인 그리드가 있습니다. 이를 통해 복잡한 디자인을 매우 빠르고 쉽게 만들 수 있습니다. 그리고 한때 테이블에서 발생했던 블록, 흐름, 위치 지정은 의도된 목적으로만 사용됩니다.
Div 레이아웃은 웹 사이트 생성을 위한 현재 모델입니다..
뉴스 포털, 블로그, 개인 페이지 등 새로운 사이트가 인터넷에 지속적으로 나타나고 있습니다. 거의 모든 것은 블록 모델을 기반으로 생성되며 그 기반은 DIV 블록입니다. 오늘 우리는 이 기술을 이해하고 div 레이아웃의 주요 뉘앙스를 고려해 보겠습니다.
HTML 문서 스트림
HTML 언어를 사용하면 하이퍼텍스트 정보를 구조화할 수 있다는 점을 기억하면 모든 사이트의 핵심은 그림, 텍스트, 링크 등의 블록 집합이라는 것이 분명해집니다. 지금은 DIV에 대해 구체적으로 이야기하고 있지 않지만 밀접하게 관련된 주제입니다.
따라서 HTML 페이지가 구성되는 특정 데이터 스트림이 있습니다. 현재 구조 요소에는 블록과 인라인의 두 가지 유형이 있습니다. 일반 HTML 스트림의 블록 블록은 수직 순서로 하나씩 위치합니다. 동시에 기본적으로 블록 너비는 페이지 또는 상위 요소를 기준으로 사용 가능한 모든 공간을 차지합니다. 차례로 인라인 요소는 가로 순서로 하나씩 배열됩니다.
이 두 카테고리의 주요 대표자는 div 및span 태그입니다.
따라서 일반적인 HTML 흐름에 대해 이야기하는 경우 모든 div 블록은 서로 아래에 위치하며 범위는 한 줄에 있습니다.
아시다시피 인라인 요소를 사용하여 웹사이트에 대한 일반적인 마크업을 만들 수는 없습니다. 따라서 몇 년 전 테이블 레이아웃을 교체하기 위해 DIV 블록 기반 레이아웃을 사용하기로 결정했습니다.
DIV 웹사이트 레이아웃
따라서 사이트를 마크업하는 데 DIV 블록이 사용되기 시작했습니다. 이를 사용하여 기본 레이아웃을 그리고 필요한 모든 유형의 콘텐츠에 대한 추가 블록을 만드는 것이 가능했습니다.
헤더, 콘텐츠 블록, 사이드바 및 바닥글이 포함된 표준 페이지의 예를 사용하여 이 프로세스를 살펴보겠습니다.
이것은 고전적인 옵션입니다. 로고는 대부분 사이트 헤더에 위치하며 탐색 링크는 측면 블록에 있습니다. 메인 블록은 기사, 회사 설명, 사진 아카이브 등의 정보를 표시하는 데 사용됩니다. 아래쪽 블록에는 주소, 연락처 및 기타 서비스 정보를 삽입할 수 있습니다.
그림에서 볼 수 있듯이 다음 주요 블록을 사용하여 레이아웃을 배치합니다.
메인 블록은 모든 콘텐츠의 컨테이너로 사용됩니다. 헤더 - 사이트 헤더. Nav - 탐색 블록. 콘텐츠 - 기본 정보 및 콘텐츠입니다. 바닥글 - 사이트 바닥글입니다.
이러한 각 블록은 DIV 컨테이너입니다. 그러나 이론에 따르면 블록은 서로 따라야 합니다. 블록이 다음과 같은 구조를 갖도록 위에서 설명한 레이아웃을 가져와야 합니다.
또한 템플릿에서 볼 수 있는 것과 동일한 방식으로 페이지에 배치됩니다. 어떻게 이를 달성할 수 있나요? 이를 위해 DIV 블록의 속성을 사용하여 서로 및 페이지 전체를 기준으로 원하는 방식으로 배치할 수 있습니다.
하지만 먼저 레이아웃의 HTML 기반을 만들고 스타일 시트로 작업할 수 있도록 블록 이름을 지정해 보겠습니다.
HTML 프레임워크
모든 서비스 태그를 건너뛰면 사이트의 골격은 다음과 같습니다.
각 블록마다 클래스가 할당되어 있습니다. 도움을 받아 블록의 스타일을 설정합니다. 이는 페이지에서 원하는 위치를 얻는 데 도움이 됩니다.
이제 사이트의 div 레이아웃에 사용되는 스타일과 속성에 대해 알아볼 시간입니다.
CSS 스타일
혹시 모르시는 분이 계시다면 CSS 스타일시트는 오랫동안 웹사이트 개발에 사용되어 왔습니다. 도움을 받으면 페이지의 모든 요소를 변경할 수 있습니다. 이는 블록의 시각적 디자인과 위치 및 규모 모두에 적용됩니다.
뜨다
먼저 DIV를 페이지의 오른쪽이나 왼쪽에 배치하거나 상위 컨테이너를 기준으로 배치할 수 있는 속성을 살펴보겠습니다.
작은 휴양지. 블록에 스타일을 할당할 때마다 상위 컨테이너를 기준으로 해당 속성(크기, 위치)이 변경됩니다.
float 속성에는 없음, 오른쪽, 왼쪽, 상속의 네 가지 값이 있습니다.
우리는 "왼쪽"과 "오른쪽"의 의미에 관심이 있습니다.
float 값은 블록이 어느 면에 표시될 것인지를 나타냅니다. 다른 모든 블록은 반대쪽에서 주변으로 흐릅니다.
우리의 경우 탐색 블록의 경우 left 값을 지정해야 하고 기본 콘텐츠의 경우 right 값을 지정해야 합니다. 스타일 파일에서는 다음과 같습니다.
Nav ( float:left; ) .content ( float:right; )
그런데 탐색 블록에 대해서만 속성을 설정할 수 있습니다. 콘텐츠 블록은 탐색 오른쪽에 자동으로 배치됩니다. 이는 float 속성을 설정하여 얻은 float 덕분에 달성됩니다.
CSS의 여백: 여백과 패딩
이제 div 기반 레이아웃에 사용되는 두 가지 중요한 속성을 이해해 보겠습니다. 들여쓰기를 담당합니다. 작업의 본질을 이해하는 가장 쉬운 방법은 예를 사용하는 것입니다.
메인 블록 MAIN이 사이트 헤더에서 약간 들여쓰기되도록 하려면 어떻게 해야 하는지 상상해 봅시다. 이는 메인 클래스를 사용하여 div에 여백 속성을 할당하여 달성할 수 있습니다. 블록의 외부 패딩을 담당합니다.
여백 속성의 값은 다음과 같습니다. [값 | 관심 | 자동] (1,4) | 상속.
따라서 각 측면에 대해 픽셀 단위, 백분율 단위로 오프셋을 차례로 지정할 수 있습니다.
예를 들어 위쪽에 특정 들여쓰기만 설정할 수 있습니다. 이것이 바로 우리의 경우입니다. 구현 방법은 다음과 같습니다.
메인( margin-top:10px; )
이제 메인 블록의 상단 패딩은 10픽셀이 됩니다.
이제 탐색 및 콘텐츠가 포함된 블록을 디자인해 보겠습니다. 이미 준비된 웹사이트가 있다고 상상해 보세요. 탐색의 모든 링크는 페이지 왼쪽 가장자리 가까이에 있습니다. 반대로 콘텐츠 블록의 텍스트는 오른쪽에 밀접하게 인접해 있습니다. 상당히 불쾌한 디자인입니다. 내부 패딩을 만들어야 합니다.
패딩 속성은 이를 담당하며 다음 값을 갖습니다. [값 | 퍼센트] (1, 4) | 상속하다
여기서의 원칙은 여백 속성과 동일합니다. 각 측면에 대해 개별적으로 들여쓰기를 설정할 수 있습니다.
Nav ( float:left; padding-left: 15px; ) .content ( float:right; padding-right: 20px; )
이러한 기본 속성을 사용하면 원하는 DIV 블록 레이아웃을 얻을 수 있습니다. 결과적으로 귀하는 기성 웹 사이트 레이아웃을 받게 되며 남은 것은 필요한 정보로 채우는 것뿐입니다.
기사에 대한 비디오:
결론
우리는 기본적인 속성만을 고려했습니다. 실제로는 더 많은 것들이 있습니다. 그러나 어떤 경우에도 제공된 정보는 항상 div 레이아웃에 사용됩니다.
모든 것이 여기에 수집되어 있다면 왜 다른 사이트에서 정보를 찾나요?
저자의 기사 시리즈 블록 웹 사이트 레이아웃의 기본. 이 주제를 연구하기 시작하는 첫 번째 장소입니다. 웹사이트 제작. 기초를 배우고 싶은 분들에게 도움이 될 강의입니다. HTML과 CSS이론뿐만 아니라 실제로도 그렇습니다.
주제를 연구하면서 우리는 특별한 부가 기능 없이 꽤 괜찮은 웹사이트, 즉 일반 웹사이트를 만들 것입니다.
수업에서는 블록 기반 웹 사이트 레이아웃 등에 대해 간단하고 명확하게 이야기합니다. 기초를 빠르게 이해하고 싶다면 웹사이트 레이아웃, 그렇다면 이 기사 시리즈가 바로 당신에게 필요한 기사가 될 것입니다.
블록 레이아웃이란 무엇입니까?
무슨 일이야? 웹사이트 레이아웃 차단그리고 그걸 무엇과 함께 먹나요?
이전에는 웹사이트가 테이블을 사용하여 디자인되었습니다. 제목, 텍스트, 이미지 등 페이지의 각 요소는 자체 셀에 위치했습니다. 이러한 셀은 다른 더 큰 셀에 모여들었고, 차례로 메인 셀, 즉 사이트 페이지 자체에 배치되었습니다.
많은 웹마스터가 계속 사용하고 있지만 테이블 형식 레이아웃은 이제 더 이상 사용되지 않습니다. 가장 큰 단점은 코드가 무겁다는 것입니다. 결국, 모든 작은 셀은 특정 태그로 지정되어야 합니다.
블록 레이아웃-완전히 다른 노래. 여기에서 모든 페이지 요소는 div라는 특수 블록에 있습니다. 핵심적으로는 동일한 테이블과 다소 유사합니다. 상자는 아프리카에서도 상자이다. 그러나 블록은 훨씬 더 편리하고 단순하며 기능적입니다.
차단하다웹 사이트 레이아웃에서 이는 프레임, 여백 및 들여쓰기와 같은 다양한 속성이 있는 일반 직사각형 영역입니다. 블록의 내용은 텍스트, 그림, 목록, 작성할 양식, 탐색 메뉴 등 무엇이든 될 수 있습니다.
액자- 두께, 색상, 유형(점선, 실선, 점선)과 같은 특성을 설정할 수 있는 블록의 윤곽선입니다.
필드(패딩)- 블록의 내용을 프레임에서 분리하여 예를 들어 텍스트가 블록 벽에 "붙어있지" 않도록 합니다.
여백- 이것은 서로 다른 블록 사이의 빈 공간으로, 두 블록이 주어진 거리에서 서로 상대적으로 배치될 수 있도록 합니다.
테이블과 마찬가지로 블록은 항상 페이지에서 수직으로 배열됩니다. 즉, 페이지 코드에 두 개의 블록이 연속으로 기록되면 브라우저에서 다른 블록 아래에 표시됩니다. 한 줄에 여러 블록을 수평으로 배열해야 하는 경우 해당 속성에서 '와 같은 매개변수를 설정합니다. 주위에 흐르다"(뜨다). 그러나 이에 대해서는 나중에 더 자세히 설명합니다.
사이트의 블록 레이아웃. 태그
꼬리표 HTML 언어의 특별한 구성입니다. 구별하다 열리는그리고 폐쇄태그. 소셜 네트워크의 해시태그나 웹사이트의 태그와 혼동하지 마세요. 이것들은 서로 다릅니다!
가장 간단한 경우 태그는 어린이용 조립 세트의 일부와 같으며 고유한 목적을 가지고 있습니다. 막대는 막대를 의미하고 바퀴는 바퀴를 의미하며 그 외에는 아무것도 의미하지 않습니다. 예를 들어 단락 태그는 다음과 같습니다.
단락 텍스트.
항상 문자 p로 표시되며 다른 것은 없습니다. 그게 그 사람 이름이에요.
태그는 항상 꺾쇠괄호로 묶입니다. 예제에서 볼 수 있듯이 여는 태그와 닫는 태그가 있습니다. 닫는 태그에는 이름 앞에 슬래시(슬래시 / )가 추가되어 있습니다.
모든 태그에 닫는 쌍이 있는 것은 아닙니다. 예를 들어 img 이미지 태그에는 전혀 포함되지 않습니다. 그러나 최신 표준과 XHTML 사양의 요구 사항을 준수하기 위해 닫는 꺾쇠 괄호 앞에 슬래시와 함께 공백을 추가합니다. 다음과 같이 보입니다.
div 태그
div 태그는 블록 레이아웃의 기초입니다. 이것은 전체 사이트가 구축되는 바로 그 큐브입니다. 이 태그는 중립적입니다. 콘텐츠(p - 단락, a - 링크, img - 이미지)와 엄격하게 연결되어 있는 표준 HTML 태그와 달리 div 태그에는 원하는 만큼 무엇이든 포함할 수 있습니다. 모든 장난감을 버리는 큰 상자처럼 생각하십시오.
div 태그는 정의하는 데 사용됩니다. 페이지의 기능 영역. 예를 들면 다음과 같습니다: “머리글”, 탐색 블록, 기본 콘텐츠 블록, “바닥글” 또는 바닥글.
div 태그는 다른 태그와 마찬가지로 고유한 속성을 갖습니다.
기인하다- 태그의 설명적 특성. 즉, 그가 무엇을 할 수 있고 어떻게 할 수 있는지입니다. 예를 들어 이미지 태그를 살펴보겠습니다.
이 경우 src, width, height, alt는 태그 속성입니다. 따옴표 안에 (이는 현대 표준의 필수 요구 사항이기도 함) 표시됩니다. 가치속성.
그러한 녹음을 해독하는 것은 어렵지 않습니다. 태그는 페이지의 이 위치에 이미지 폴더의 risunok.jpg 이미지를 첨부해야 함을 나타냅니다. 이미지의 너비는 200픽셀, 높이는 50픽셀입니다. 그리고 힙에는 그림에 표시된 내용을 설명하는 대체 텍스트가 추가되었습니다.
그런데 대체 텍스트는 변덕스러운 것이 아니라 필요한 요구 사항이기도 합니다. 모든 네티즌이 시력이 좋은 것은 아닙니다. 누군가 텍스트 인식 및 읽기 프로그램을 사용합니다. 그리고 어떤 사람들은 단순히 브라우저에서 이미지 표시를 끄기도 합니다. 이것이 그림에 대한 대체 캡션이 있는 이유입니다.
서명할 필요가 없는 경우(예: 목록 표시자 또는 일종의 화살표) alt 속성은 따옴표 사이에 빈 공간이 남습니다.
div 태그 속성
div 태그에는 다음 두 가지 속성만 있습니다.
id - 할당할 수 있는 속성 고유한값, 즉 페이지에서 사용되는 값 한번 만. 예를 들어 머리글이나 바닥글이 있습니다.
이렇게 하면 id 속성과 헤더 값이 있는 div 태그에 대한 스타일 시트의 일부 설정과 바닥글에 대한 완전히 다른 설정을 추가로 설정할 수 있습니다. 그리고 브라우저는 이 텍스트가 "머리글"에 속하고 큰 빨간색 글꼴로 입력되지만 이 텍스트는 "바닥글"에 속하며 작은 회색 글꼴로 입력된다는 것을 올바르게 인식합니다. 그리고 혼란이 없습니다!
class는 여러 요소에 동일한 값을 할당할 수 있는 속성입니다. 예를 들어 페이지의 모든 이미지에 동일한 두께와 색상의 프레임을 추가합니다. 이미지가 여러 개 있으므로 id 속성을 더 이상 사용할 수 없으므로 class 를 사용합니다.
처음으로 이 정도면 충분하다고 생각합니다. 웹사이트의 블록 레이아웃에 대해 불분명한 점이 있으면 댓글로 문의하세요.
계속됩니다. 연락을 유지하다!
div 블록을 사용한 레이아웃은 오랫동안 표준이 되었으며 테이블 형식 레이아웃에 비해 여러 가지 장점이 있습니다. 그러나 실제로 초보 개발자는 이러한 동일한 블록의 동작에 대해 혼란스러워합니다.
블록 레이아웃의 주요 포인트를 살펴보겠습니다. 이제 우리는 html5 표준을 고려하지 않고 레이아웃이나 일부 개별 페이지 구성 요소를 생성할 때 사용되는 div 블록을 사용하여 레이아웃의 기본 사항만 살펴보겠습니다.
블록 요소로 간주되는 것은 무엇입니까?
페이지에서 이러한 요소의 영역은 직사각형으로 표시되며 기본적으로 사용 가능한 전체 너비를 차지하고 새 줄에서 시작됩니다.
블록 레이아웃에 사용되는 가장 일반적인 요소는 범용 요소입니다.
.
따라서 단순한 것부터 복잡한 것까지. 스타일이 위치에 영향을 주지 않고 기본적으로 div가 어떻게 나타나는지 살펴보겠습니다. 명확성을 위해 스타일 속성을 통해 요소에 인라인으로 스타일을 추가하겠습니다.
블록 1
블록 2
블록 3
각 블록에 너비 값을 추가해 보겠습니다.
블록 1
블록 2
블록 3
사양에 따라 각 블록이 새로운 줄에 위치하는 것을 볼 수 있습니다. 이것이 그들의 정상적인 행동입니다.
이제 질문이 생깁니다. 어떻게 위치를 정할 것인가? 한 줄에 div 블록, 차례로?
이를 위해 블록을 강제로 정렬할 측면을 결정하는 속성이 있습니다. 동시에 다른 가장자리에서는 다른 요소 주위로 흐를 수 있습니다.
float 속성의 의미는 다음과 같습니다.
- 왼쪽 - 블록이 왼쪽 가장자리에 정렬되어 오른쪽으로 흐릅니다.
- 오른쪽 - 블록이 오른쪽 가장자리에 정렬되어 왼쪽으로 흐릅니다.
- 없음 - 줄 바꿈이 지정되지 않으며 블록은 이전 예와 같이 기본적으로 작동합니다.
블록이 왼쪽에 정렬되도록 블록에 float:left를 추가해 보겠습니다.
블록 1
블록 2
블록 3
결과적으로 블록은 한 줄로 늘어서게 되었습니다. 좋아요, 하단에 다른 div를 추가하고 싶다고 가정하고 float 속성을 지정하지 않고 추가하겠습니다.
블록 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4단원. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
블록 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4단원. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
왜 이런 일이 일어났나요? 간단히 말해서, 이는 플로팅된 요소가 문서의 흐름에서 벗어나기 때문에 발생합니다. 그러나 이것은 별도의 기사에 대한 주제입니다. 여기서는 부동 요소의 동작을 제어하는 새로운 속성에 대해 알아 보겠습니다.
- 왼쪽 - 왼쪽 줄 바꿈을 비활성화하고 모든 요소가 새 줄(요소 아래)에 표시됩니다.
- rigth - 요소가 오른쪽으로 래핑되는 것을 방지합니다.
- 모두 - 요소를 양쪽에 래핑하는 것을 금지합니다. 새 줄에 요소를 명확하게 표시해야 하거나 다른 요소를 어느 면에 래핑할 수 있는지 알 수 없을 때 사용하는 것이 좋습니다.
블록 4에 Clear:left 속성을 추가해 보겠습니다. 그러면 이 요소가 왼쪽에 있는 다른 부동 요소 주위로 흐르는 것을 방지할 수 있습니다.
블록 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4단원. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
블록 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4단원. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
블록 4는 필요에 따라 새 줄에 배치됩니다.
이 경우 우리는 다른 블록이 어떻게 위치하는지 알고 있으므로 이 예에서는 즉시 clear:left를 표시했습니다. 플로팅 블록이 어느 면에서 만날지 정확히 알 수 없는 상황이 있으므로 이러한 경우 양쪽의 흐름을 취소하는clear:both를 지정하는 것이 좋습니다. 이제 우리는 div 블록을 한 줄에 가로로 배치하는 방법을 알아냈습니다.
상위 요소의 너비가 허용하는 경우 부동 블록은 같은 줄에 배치된다는 점을 명심하세요. 블록 요소가 행에 맞지 않으면 새 줄로 줄바꿈됩니다. 예를 들어 레이아웃을 배치할 때 이것이 중요한 경우 이를 고려해야 하며 부동 소수점이 있는 블록의 경우 너비(고정(px) 또는 고무(%, rem 등))를 설정해야 합니다. 다음에는 그러한 상황을 살펴보겠습니다.
이러한 블록을 중앙에 배치하려는 경우 블록에 어떻게 영향을 미칠 수 있습니까?
고전적인 해결책은 블록에 부모를 추가하고 margin: 0 auto; 속성을 사용하는 것입니다.
왜 부모에게 class.wrapper를 제공했나요? "래퍼"는 "래퍼"를 의미합니다. 요소가 다른 블록을 래핑하여 부모 자체를 변경함으로써 요소가 제어/영향을 받을 수 있도록 클래스 이름을 정의하는 것은 일반적으로 허용되는 일종의 관행입니다.
이전 예제의 마크업을 가져와서 개선해 보겠습니다.
블록 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4단원. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
블록 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
블록 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
4단원. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.
여기서는 모든 것이 간단해 보입니다.
그리고 텍스트가 상위 블록의 가장자리에 밀접하게 붙어 있는 것이 마음에 들지 않고 마크업을 변경하지 않고 CSS만 사용하여 필드를 추가하고 싶습니다. 요소에 패딩 속성을 추가해 보겠습니다.
블록 1. 로렘
블록 2. 로렘 입숨
블록 3. 로렘 입숨
블록 4. 로렘
그리고 우리의 레이아웃이 무너진 것을 볼 수 있습니다! 블록 3은 어딘가로 사라졌습니다. 왜 이런 일이 일어났나요? 대답은 간단합니다. 요소에 필드를 추가하여 너비를 늘렸습니다. 이제 값은 다음과 같습니다.
블록 1: 10 + 200 + 10 = 220px
블록 2: 10 + 150 + 10 = 170px
블록 3: 10 + 100 + 10 = 120px
블록 4: 10 + 450 + 10 = 470px
220 + 170 + 120 = 510픽셀
세 블록의 총 너비는 510이며, 상위 블록(450)의 너비에 맞지 않으므로 새 줄로 전송됩니다.
어떻게 고치나요? 다음을 수행할 수 있습니다.
- 여백을 고려하여 각 블록의 너비 값을 재설정합니다. 블록 크기를 줄입니다. 모든 것이 다시 한 줄로 깔끔하게 정리됩니다. 이것이 불편하다는 데 동의하십니까? 레이아웃에 들어가서 무언가를 편집할 때마다.
- 상자 크기 조정 속성인 border-box를 사용합니다. 따라서 계산은 블록의 전체 너비에서 수행됩니다. CSS 블록 모델이 무엇인지 알아보는 것이 좋습니다.
두 번째 옵션을 사용하면 다음과 같이 나타납니다.
블록 1. 로렘
블록 2. 로렘 입숨
블록 3. 로렘 입숨
블록 4. 로렘
블록 1. 로렘
블록 2. 로렘 입숨
블록 3. 로렘 입숨
블록 4. 로렘
이제 우리가 받은 모든 정보를 모아 유연한 레이아웃을 갖춘 간단한 표준 3열 레이아웃을 만들어 보겠습니다. 이 레이아웃은 최대 900px까지 확장되며 그 후에는 전체 레이아웃이 중앙에 배치됩니다.
레이아웃 마크업을 만듭니다.
문서
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repelt vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat는 nisi aliquid eum sapiente sunt nobis, adipisci submitndaearum을 voluptates!
우리는 스타일을 작성합니다:
Body ( max-width: 900px; /* 최대 너비 제한 */ margin: 0 auto; ) /* 본문 내부의 모든 블록에 대해 블록 너비 계산 알고리즘을 변경하고 모든 블록에 10px 여백을 추가합니다 */ body div ( - webkit-box-sizing : 테두리 상자; -moz-box-sizing: 테두리 상자; 상자 크기 조정: 테두리 상자; 패딩: 10px; ) .header ( 배경: #CCA69E; 패딩: 10px; ) .left- 사이드바( 너비: 20%; 배경: #8ED9B6; 부동: 왼쪽; ) .content( 부동: 왼쪽; 너비: 60%; ) .right-sidebar( 너비: 20%; 배경: #FF9282; 부동: 왼쪽; ) .footer ( background: #000;clear:both; /* 양쪽 줄 바꿈을 비활성화하면 블록이 새 줄에 표시됩니다. */ color: #ccc; )
불분명한 점이 있으면 댓글로 질문하세요.
다음 내용을 읽어보는 것이 도움이 될 수 있습니다.