CSS 레이아웃 시작하기

지난 몇 년 동안 CSS 레이아웃은 사이트의 프론트 엔드를 개발하는 방식뿐만 아니라 극적으로 변경되었습니다. 이제 사이트를 개발하기 위해 CSS에서 사용하는 레이아웃 방법의 관점에서 실질적인 선택을 할 수 있습니다. 이 기사에서는 사용 방법과 용도에 대한 기본 사항을 설명하여 사용 가능한 다양한 레이아웃 방법을 살펴보겠습니다.

이 가이드는 CSS를 처음 접하고 레이아웃에 접근하는 가장 좋은 방법이 무엇인지 궁금해하는 경우뿐만 아니라 현재 레이아웃에 대한 이해를 최신 상태로 유지하려는 스택의 다른 곳에서 온 경험 많은 개발자를 위한 것입니다. . 여기에서 각 레이아웃 방법을 완전히 문서화하려고 하지 않았습니다. 그렇게 하면 기사가 아닌 책이 만들어졌을 것이기 때문입니다. 대신, 더 많은 정보를 얻을 수 있는 링크와 함께 사용 가능한 항목에 대한 개요를 제공합니다.

정상적인 흐름

레이아웃을 변경하기 위해 CSS가 적용되지 않은 HTML 웹 페이지를 가져오면 요소가 정상적인 흐름 으로 표시됩니다. 일반적인 흐름에서는 문서의 쓰기 모드에 따라 상자가 차례로 표시됩니다. 즉, 문장이 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 이어지는 가로 쓰기 모드가 있는 경우 일반 흐름은 페이지 아래에 세로로 블록 수준 요소 상자를 차례로 표시합니다.

세로 쓰기 모드에 있는 경우 문장이 세로로 실행되므로 일반적인 흐름은 블록을 가로로 배치합니다.

일반 흐름은 레이아웃으로 시작하는 곳입니다. CSS 레이아웃을 만들 때 블록을 가져와 일반 흐름이 아닌 다른 작업을 수행하도록 합니다.

정상적인 흐름을 활용하도록 문서 구성

문서가 잘 구성된 방식으로 시작되도록 하여 정상적인 흐름을 활용할 수 있습니다. 일반적인 흐름의 개념 대신 브라우저가 레이아웃을 생성할 때까지 모든 상자를 모서리에 쌓았다고 상상해 보세요. 즉, 페이지에 모든 항목을 배치해야 합니다. 대신 브라우저는 즉시 읽을 수 있는 방식으로 콘텐츠를 표시합니다.

CSS 로드에 실패하더라도 사용자는 여전히 콘텐츠를 읽을 수 있으며 CSS를 전혀 사용하지 않는 사용자(예: 스크린 리더를 사용하는 사람)는 문서에 있는 순서대로 콘텐츠를 전달받게 됩니다. 이것은 당신의 HTML 문서가 좋은 순서로 생명을 시작하는 것을 접근성 관점에서 중요하게 만듭니다. 그러나 그것은 또한 웹 개발자로서의 삶을 더 쉽게 만들어 줄 것입니다. 콘텐츠가 사용자가 읽을 것으로 예상하는 순서대로라면 콘텐츠를 올바른 위치에 배치하기 위해 레이아웃을 크게 변경할 필요가 없습니다. 새로운 레이아웃 방법을 사용하면 수행해야 하는 작업이 얼마나 적은지 놀랄 수 있습니다.

따라서 레이아웃에 대해 생각하기 전에 문서 구조와 문서의 상단에서 하단으로 내용을 읽을 순서를 생각하십시오.

정상적인 흐름에서 벗어나기

문서가 잘 구조화되면 문서를 가져와 원하는 레이아웃으로 변환하는 방법을 결정해야 합니다. 여기에는 문서의 일부에 대해 정상적인 흐름에서 벗어나는 것이 포함됩니다. 우리는 사용할 레이아웃 방법의 전체 세트를 가지고 있습니다. 우리가 살펴볼 첫 번째 방법은 float 입니다. float는 정상적인 흐름에서 요소를 제거하는 것이 무엇인지에 대한 훌륭한 데모이기 때문입니다.

수레

플로트는 상자를 왼쪽이나 오른쪽으로 이동하는 데 사용되어 콘텐츠가 상자 주위에 표시되도록 합니다.

항목을 띄우려면 CSS 속성 float 와 left 또는 right 값을 사용합니다. float의 기본값은 없음입니다.

 .item { float: left; }

항목을 띄우고 텍스트가 항목 주위를 둘러쌀 때 해당 콘텐츠의 줄 상자가 단축된다는 점은 주목할 가치가 있습니다. 항목을 플로팅하고 텍스트가 포함된 다음 상자에 배경색이 적용된 경우 이 배경색이 플로팅된 항목 아래에서 실행되는 것을 볼 수 있습니다.

플로트와 줄 바꿈 텍스트 사이에 공간을 만들기 위해 줄 상자를 줄이면 플로팅된 항목에 여백을 설정해야 합니다. 텍스트의 여백은 컨테이너의 가장자리에서 텍스트를 이동시킵니다. 왼쪽으로 떠 있는 이미지의 경우 이미지가 컨테이너의 위쪽 및 왼쪽과 같은 높이가 되기를 원한다고 가정하여 오른쪽과 아래쪽에 여백을 추가합니다.

부동 소수점 지우기

요소를 플로팅하면 다음 모든 요소가 아래로 래핑되고 정상적인 흐름이 계속될 때까지 해당 플로팅된 요소를 둘러쌉니다. 이를 방지하려면 float를 지워야 합니다.

float 뒤에 표시를 시작하려는 요소에서 왼쪽 값으로 부동 항목을 지우려면 clear 속성을 추가하고, 오른쪽으로 부동 항목을 지우려면 right 값을 추가하거나, 부동 소수점을 지우려면 둘 모두를 추가합니다.

 .clear { clear: both; }

위의 방법은 요소가 float 다음에 시작되도록 하려는 경우에 작동합니다. 상자 안에 떠 있는 항목과 함께 텍스트가 있는 상황에 처한 경우에는 도움이 되지 않습니다. 텍스트가 부동 항목보다 짧으면 상자가 내용 아래에 그려지고 부동 소수점은 무시됩니다. 우리가 이미 배웠듯이 float는 라인 상자를 줄이고 나머지 레이아웃은 정상적인 흐름으로 계속됩니다.

이 상황을 방지하려면 상자 안의 무언가를 지워야 합니다. 빈 요소를 추가하고 모두 지우도록 설정할 수 있습니다. 여기에는 문서에 빈 div를 삽입하는 작업이 포함됩니다. 이는 이상적이지 않으며 귀하의 페이지가 CMS에서 생성된 경우 불가능할 수 있습니다. 따라서 대신에 일반적인 부동 소수점 지우기 방법은 명확한 수정 해킹으로 알려진 것입니다. 이 방법은 CSS 생성 콘텐츠를 추가하고 둘 다 지우도록 설정하여 작동합니다.

블록 서식 컨텍스트

상자 안의 부동 소수점을 지우는 또 다른 방법은 컨테이너에서 BFC(Block Formatting Context)를 호출하는 것입니다. Block Formatting Context는 그 안에 있는 모든 것을 포함하는데, 여기에는 더 이상 상자의 바닥을 찌를 수 없는 떠 있는 항목이 포함됩니다. BFC를 강제 실행하는 몇 가지 방법이 있습니다. 부동 소수점을 지울 때 가장 일반적인 것은 overflow 속성을 기본 표시 이외의 값으로 설정하는 것입니다.

 .container { overflow: auto; }

이 방법으로 오버플로를 사용하면 일반적으로 작동하지만 특정 상황에서는 항목에 그림자가 잘리거나 원치 않는 스크롤 막대가 나타날 수 있습니다. 또한 스타일시트에서 약간 혼란스러워 보일 수 있습니다. 스크롤바를 원했기 때문에 오버플로를 설정했습니까 아니면 이 지우기 기능을 얻기 위해 오버플로를 설정했습니까?

의도를 보다 명확하게 하고 원치 않는 부작용을 일으키는 BFC 생성을 방지하기 위해 display 속성의 값으로 flow-root 를 사용할 수 있습니다. display: flow-root 가 BFC를 생성하여 다른 문제를 일으키지 않고 float를 지우는 것입니다.

 .container { display: flow-root; }

float의 레거시 사용법

새로운 레이아웃 방법이 열 레이아웃을 만드는 데 사용되기 전까지 이 기술은 항목 집합에 너비를 지정하고 서로 옆에 뜨도록 설정하는 방식으로 작동했습니다. 이러한 떠 있는 상자의 백분율 크기를 주의 깊게 관리하면 격자 효과를 만들 수 있습니다.

나는 지금 새로운 디자인을 시작하고 이 방법을 사용하는 것을 제안하지 않을 것입니다. 그러나 앞으로 몇 년 동안 기존 사이트에 남아 있을 것입니다. 따라서 거의 모든 것이 떠있는 것처럼 보이는 디자인을 발견하면 이것이 사용되는 기술입니다.

플로트 및 플로트 지우기에 대한 리소스 및 추가 정보

• "Clearfix: 요소가 자식을 자동으로 지우도록 강제합니다.", Chris Coyier, CSS-Tricks
• " float ," CSS: CSS(Cascading Style Sheets), MDN 웹 문서
• " clear ," CSS: CSS(Cascading Style Sheets), MDN 웹 문서
• "CSS 레이아웃 및 블록 형식 지정 컨텍스트 이해", Rachel Andrew, Smashing Magazine

포지셔닝

일반 흐름에서 요소를 제거하거나 일반 흐름에서 요소를 이동하려면 CSS의 position 속성을 사용할 수 있습니다. 정상적인 흐름에서 요소의 position 는 static 입니다. 항목은 블록 차원에 차례로 표시되며 페이지를 스크롤하면 함께 스크롤됩니다.

위치 값을 변경할 때 일반적으로 오프셋 값을 사용하여 특정 기준점에서 상자를 이동합니다. 사용되는 기준점은 사용 중인 위치 값에 따라 다릅니다.

상대 포지셔닝

항목에 position: relative 가 있는 경우 기준점은 일반적으로 정상적인 흐름에 있는 위치입니다. 그런 다음 top , left , bottom 및 right 속성에 대한 오프셋 값을 사용하여 일반적으로 표시되는 위치에서 상자를 이동할 수 있습니다.

 .item { position: relative; bottom: 50px; }

페이지의 다른 항목은 요소의 새 위치에 응답하지 않습니다. 정상적인 흐름에서 배치된 위치는 예약되어 있으므로 모든 겹침을 직접 관리해야 합니다.

절대 위치

position: absolute 이며 정상적인 흐름에서 완전히 제거됩니다. 남겨진 공간이 제거됩니다. 그러면 항목이 포함된 블록을 기준으로 위치가 지정되며, 이 블록은 배치된 다른 요소 내부에 중첩되지 않는 한 뷰포트가 됩니다.

따라서 항목에 position: absolute 를 설정하면 가장 먼저 발생하는 일은 일반적으로 뷰포트의 상단과 왼쪽에 고정된다는 것입니다. 그런 다음 top , left , bottom 및 right 속성에 대한 오프셋 값을 사용하여 해당 위치에서 원하는 위치로 상자를 이동할 수 있습니다.

 .item { position: absolute; top: 20px; right: 20px; }

종종 상자가 뷰포트에 따라 배치되는 것을 원하지 않지만 포함하는 요소를 참조하면 상자가 내부에 있습니다. 이 경우 기본 정적 이외의 위치 값을 포함하는 요소에 제공해야 합니다.

position: relative 설정하면 정상적인 흐름에서 항목이 제거되지 않으므로 이것이 일반적인 선택입니다. position: relative 에서 오프셋을 설정하려는 상위 요소를 지정한 다음 해당 요소의 경계에서 절대 위치 블록을 오프셋합니다.

고정 포지셔닝

position: fixed 가 있는 항목은 대부분의 경우 뷰포트를 기준으로 배치되고 문서 흐름에서 제거되어 공간이 예약되지 않습니다. 페이지가 스크롤될 때 고정 요소는 일반적인 흐름의 나머지 콘텐츠가 평소와 같이 스크롤되므로 뷰포트에 상대적인 위치에 유지됩니다.

 .item { position: fixed; top: 20px; left: 100px; }

이것은 예를 들어 콘텐츠가 스크롤되는 동안 화면에 유지되는 고정 탐색 패널을 활성화하는 데 도움이 될 수 있습니다. 다른 위치 값과 마찬가지로 이 작업을 수행할 때 겹침이 발생할 수 있으므로 모든 콘텐츠를 읽을 수 있고 고정 항목 뒤에 표시되지 않도록 주의해야 합니다.

뷰포트를 기준으로 none 않고 고정 항목을 배치하려면 transform , perspective 또는 filter 속성 중 하나가 기본값이 아닌 다른 것으로 설정된 포함 요소가 있어야 합니다. 이 경우 해당 요소는 포함하는 블록이 되고 오프셋은 뷰포트가 아닌 해당 블록과 관련됩니다.

스티키 포지셔닝

position: sticky 하면 일반 흐름에서와 마찬가지로 요소가 문서와 함께 스크롤되지만 뷰포트와 관련하여(일반적인 오프셋 사용) 특정 지점에 도달하면 "고정"되어 시작됩니다. position: fixed . 이것은 새로운 값이고 다른 방법보다 브라우저에서 잘 지원되지 않지만 페이지로 스크롤하는 것으로 대체됩니다. os는 지원되지 않는 경우 문제를 일으키지 않고 향상으로 멋지게 사용되는 값입니다.

 .item { position: sticky; top: 0; }

콘텐츠와 함께 스크롤하는 탐색 모음의 인기 있는 효과를 만든 다음 콘텐츠를 스크롤할 때 화면에 유지되도록 뷰포트 상단에서 멈추는 방법입니다.

포지셔닝에 대한 리소스 및 추가 정보

• "포지셔닝", MDN 학습 영역, MDN 웹 문서, Mozilla
• " position: sticky; ,” Chris Coyier, CSS-Tricks
• "CSS position:sticky", 고정 위치 지정을 위한 브라우저 지원 정보, caniuse

플렉스 레이아웃

Flexible Box Layout(Flexbox)은 1차원 레이아웃을 위해 설계된 레이아웃 방법입니다. 1차원이란 콘텐츠를 행 또는 열로 배치하려는 것을 의미합니다. 요소를 플렉스 레이아웃으로 바꾸려면 flex 값과 함께 display 속성을 사용합니다.

 .container { display: flex; }

해당 요소의 직계 자식은 플렉스 항목이 되고 인라인 방향의 시작 가장자리에 정렬된 행으로 배치됩니다.

Flexbox의 축

위의 예에서 항목을 왼쪽으로 정렬되는 것으로 설명하지 않고 인라인 방향으로 행의 시작 가장자리에 정렬된 것으로 항목을 설명했습니다. flex-direction 속성의 기본값이 row 이기 때문에 항목이 연속적으로 배치됩니다. 이는 문장이 실행되는 방향인 인라인 방향으로 행을 생성합니다. 우리는 왼쪽에서 오른쪽으로 쓰는 언어인 영어로 작업하기 때문에 행의 시작이 왼쪽에 있으므로 항목이 거기에서 시작됩니다. 따라서 flex-direction 의 값은 Flexbox의 주축 을 정의합니다.

따라서 교차 축은 주축을 가로질러 직각으로 이어집니다. 플렉스 방향이 row 이고 항목이 인라인 방향으로 표시되는 경우 교차 축은 블록 방향으로 실행됩니다. flex-direction 이 column 이므로 항목이 블록 방향으로 실행되는 경우 교차 축이 행을 따라 있습니다.

Flexbox로 작업할 때 주축과 교차축의 관점에서 생각하는 데 익숙해지면 많은 일이 쉬워질 것입니다.

방향과 순서

Flexbox는 row-reverse 또는 column-reverse 의 flex-direction 값을 사용하여 기본 축에서 항목의 방향을 변경할 수 있는 기능을 제공합니다.

order 속성을 사용하여 개별 플렉스 항목의 순서를 변경할 수도 있습니다. 그러나 문서의 탭 순서가 콘텐츠가 소스에 있는 순서를 따르기 때문에 마우스나 터치스크린이 아닌 키보드를 사용하여 탐색하는 사용자에게 문제가 발생할 수 있으므로 그렇게 할 때 각별히 주의해야 합니다. 자세한 내용은 시각적 및 문서 순서에 대한 아래 섹션을 참조하십시오.

플렉스 속성

flex 속성은 주축을 따라 플렉스 항목의 비율을 제어하는 ​​방법입니다. 세 가지 속성은 다음과 같습니다.

• flex-grow
• flex-shrink
• flex-basis

이들은 일반적으로 flex 속성의 약식 형태로 사용되며, 첫 번째 값은 flex-grow , 두 번째 flex-shrink 및 세 번째 flex-basis 입니다.

 .item { flex: 1 1 200px; }

flex-basis 의 값은 항목이 커지거나 줄어들기 전에 가질 크기를 제공합니다. 위의 예에서 해당 크기는 200픽셀이므로 각 항목에 200픽셀의 공간을 제공합니다. 컨테이너가 200픽셀로 깔끔하게 분할될 가능성은 낮으므로 각 항목에 200픽셀이 있는 경우 모든 항목에 대한 공간이 남거나 충분하지 않습니다. flex-grow 및 flex-shrink 속성을 사용하면 항목에 대한 공간이 너무 많거나 충분하지 않은 경우 항목에 어떤 일이 발생하는지 제어할 수 있습니다.

flex-grow 가 양수 값으로 설정되면 항목이 공간을 차지하도록 커질 수 있습니다. 따라서 위의 예에서 각 항목에 200픽셀을 제공한 후 항목 간에 추가 공간이 공유됩니다.

flex-shrink 가 양수 값으로 설정되면 모든 항목에 flex-basis 가 제공되면 오버플로가 발생하는 상황에서 항목이 축소될 수 있습니다. 이 예에서 컨테이너에 공간이 충분하지 않은 경우 각 항목은 모든 항목이 컨테이너에 들어갈 때까지 동일한 양만큼 축소됩니다.

flex-grow 및 flex-shrink 값은 양수 값일 수 있습니다. flex-grow 값이 더 큰 항목은 성장할 때 비례하여 더 많은 사용 가능한 공간이 제공되고 flex-shrink 값이 크면 축소할 때 더 많이 제거됩니다.

이러한 플렉스 속성이 작동하는 방식을 이해하는 것이 실제로 Flexbox를 이해하는 데 핵심이며 아래 나열된 리소스에서 모든 세부 정보를 얻을 수 있습니다. 그러나 한 차원의 컨테이너에 늘리거나 찌그러뜨리고 싶은 항목이 많을 때 Flexbox를 사용하는 것을 고려하십시오. 행과 열에 일렬로 정렬하려고 하는 자신을 발견했다면 Grid가 필요하고 이 경우 Flexbox는 아마도 작업을 위한 도구가 아닐 것입니다.

Flex 레이아웃에 대한 리소스 및 추가 참고 자료

• "CSS Flexible Box Layout," 사양에 대한 완전한 가이드, MDN 웹 문서, Mozilla
• "Flexbox에 대한 완전한 가이드", Chris Coyier, CSS-Tricks
• Flexbox 학습용 게임 "Flexbox Froggy"
• "Flexbugs", Flexbox와 관련된 브라우저 버그의 커뮤니티 큐레이트 목록

그리드 레이아웃

CSS Grid Layout은 2차원 레이아웃 방식으로 설계되었습니다. 2차원이란 콘텐츠를 행과 열에 배치하려는 것을 의미합니다. Flexbox와 마찬가지로 Grid Layout은 display 값이므로 Grid 사용을 시작하려면 컨테이너에서 display: grid 로 시작한 다음 grid-template-columns 및 grid-template-rows 를 사용하여 일부 열 및/또는 행을 설정해야 합니다. grid-template-rows 속성.

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

위의 CSS는 열과 행 트랙이 완전히 고정된 고정 크기 그리드를 만듭니다. 이것은 아마도 웹에서 원하는 것이 아니며 Grid에서 잘 다룰 것입니다. 모든 트랙의 기본값은 auto 이며 일반적으로 "콘텐츠에 충분히 큰" 것으로 생각할 수 있습니다. 행 트랙을 생성하지 않은 경우 추가된 콘텐츠를 가져오기 위해 행이 생성되고 auto 크기가 조정됩니다. 일반적인 패턴은 열 트랙을 지정하지만 그리드가 필요에 따라 행을 생성하도록 허용하는 것입니다.

길이 단위 또는 백분율을 사용하여 열 및 행 트랙을 설정할 수 있지만 그리드 레이아웃을 위해 생성된 단위인 새로운 fr 단위를 사용할 수도 있습니다. fr 단위는 플렉스 단위이며 그리드 컨테이너에서 사용 가능한 공간의 몫을 나타냅니다.

그리드는 공간을 분배할 수 있습니다. 컨테이너에 맞는지 확인하기 위해 백분율을 계산할 필요가 없습니다. 아래 예에서는 fr 단위를 사용하여 열을 만들고 트랙이 자동으로 생성되도록 합니다. 또한 grid-gap 을 사용하여 트랙의 간격을 지정하고 있습니다(갭 및 그리드 레이아웃에 대한 자세한 내용은 Box Alignment 섹션 참조).

Flexbox 및 flex-grow 또는 flex-shrink 와 마찬가지로 fr 단위는 사용 가능한 공간 공유를 처리합니다. 한 트랙의 fr 값이 높을수록 비례적으로 사용 가능한 공간이 더 많이 확보됩니다. fr 단위와 절대 길이를 혼합할 수도 있습니다. 길이에 필요한 공간은 fr 단위를 계산하기 전에 사용 가능한 공간에서 뺍니다.

그리드 용어

그리드에는 항상 두 개의 축이 있습니다. 인라인 축은 페이지에 단어가 배치되는 방향으로 실행되고 블록 축은 블록이 배치되는 방향으로 실행됩니다.

Grid Container는 display: grid 를 설정한 요소입니다. 그런 다음 grid-template-columns 및 grid-template-rows 를 사용할 때 지정한 열 및 행 트랙 에 의해 생성된 그리드 선이 있습니다. 격자의 가장 작은 단위(4개의 교차 선 사이)를 격자 셀이라고 하며 완전한 직사각형을 구성하는 격자 셀 모음을 격자 영역이라고 합니다.

그리드 자동 배치

그리드를 생성하자마자 그리드 컨테이너의 직계 자식이 그리드의 각 셀에 하나씩 배치되기 시작합니다. 그리드 자동 배치 규칙에 따라 이 작업을 수행합니다. 이러한 규칙은 항목이 겹치지 않도록 각 항목이 빈 셀에 배치되도록 합니다.

위치를 지정하지 않은 그리드 컨테이너의 직계 자식은 자동 배치 규칙에 따라 배치됩니다. 아래 예에서 나는 모든 세 번째 항목이 2행 트랙에 걸쳐 있도록 하면서도 여전히 시작 라인의 관점에서 자동 배치됩니다.

기본 라인 기반 포지셔닝

그리드에 항목을 배치하는 가장 간단한 방법은 그리드의 한 줄에서 다른 줄로 확장되도록 항목 규칙을 지정하는 선 기반 위치 지정을 사용하는 것입니다. 예를 들어, 3개의 열 트랙과 2개의 행 트랙이 있는 그리드가 있는 경우 열 라인 1에서 열 라인 3까지, 행 라인 1에서 행 라인 3까지 항목을 배치할 수 있습니다. 그러면 총 4개의 그리드 셀이 포함됩니다. , 두 개의 열 트랙과 두 개의 열 행에 걸쳐 있습니다.

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

이러한 속성은 첫 번째 값이 start 이고 두 번째 값이 end 인 속기, grid-column 및 grid-row 로 나타낼 수 있습니다.

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

그리드 항목은 동일한 셀을 차지할 수 있으므로 콘텐츠가 겹치는 디자인을 만들 수 있습니다. 항목은 콘텐츠가 웹에 쌓이는 일반적인 방식으로 쌓이며 소스를 낮추는 항목은 다른 항목의 상단에 나타납니다. 그래도 z-index 를 사용하여 이를 제어할 수 있습니다.

명명된 영역으로 포지셔닝

명명된 영역을 사용하여 그리드에 항목을 배치할 수도 있습니다. 이 방법을 사용하려면 각 항목에 이름을 지정한 다음 레이아웃을 grid-template-areas 속성 값으로 설명합니다.

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

이 방법을 사용할 때 기억해야 할 몇 가지 규칙이 있습니다. 항목이 여러 셀에 걸쳐 있도록 하려면 이름을 반복해야 합니다. 영역은 완전한 직사각형을 형성해야 하며 L자형이나 테트리스 조각은 허용되지 않습니다! 그리드는 완전해야 합니다. 모든 셀이 채워져야 합니다. 공백을 남기려면 해당 셀을 . . 예를 들어 아래 CSS에서 오른쪽 하단 모서리를 비워 둡니다.

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

이것은 CSS를 보는 사람이 레이아웃이 어떻게 작동하는지 정확히 볼 수 있기 때문에 작업하기에 좋은 방법입니다.

그리드 레이아웃에 대한 리소스 및 추가 참고 자료

이 빠른 개요에서 공유한 것보다 CSS 그리드 레이아웃에는 훨씬 더 많은 것이 있으며 아래 리소스는 사양을 배우는 데 도움이 될 것입니다. 구성 요소와 전체 페이지 레이아웃은 모두 격자가 될 수 있습니다. 생성할 2차원 레이아웃이 있는 경우 크든 작든 상관 없이 격자 레이아웃을 선택하십시오.

• "CSS 그리드 레이아웃", 개발자를 위한 웹 기술, MDN 웹 문서, Mozilla
• "Grid by Example", CSS 그리드 레이아웃을 배우는 데 필요한 모든 것, Rachel Andrew
• CSS 기술을 테스트하고 향상시킬 수 있는 재미있는 인터랙티브 게임 "Grid Garden"
• "레이아웃 랜드", Jen Simmons, YouTube

또한 다양한 그리드 개념을 파헤치는 데 도움이 되는 여러 기사를 Smashing Magazine에 작성했습니다.

• "CSS 그리드 레이아웃의 모범 사례"
• "생성된 콘텐츠 및 CSS 그리드 레이아웃으로 빈 셀 스타일 지정"
• "CSS 그리드 사용: 그리드 없는 브라우저 지원"
• “CSS 그리드 문제와 걸림돌”
• "CSS 그리드 레이아웃의 이름 지정"

시각적 및 문서 순서

이 기사의 시작 부분에서 문서를 위에서 아래로 읽을 수 있는 순서로 시작할 것을 제안했습니다. 이렇게 하면 접근성과 CSS 레이아웃 작동 방식 모두에 도움이 되기 때문입니다. Flexbox 및 CSS Grid에 대한 간략한 소개에서 해당 순서에서 상당히 극적으로 이동하는 것이 가능하다는 것을 알 수 있습니다. 이것은 문제를 일으킬 가능성이 있습니다.

브라우저는 문서의 비시각적 사용에 대해 문서 소스를 따릅니다. 따라서 화면 판독기는 문서 순서를 읽고 키보드를 사용하여 탐색하는 사람은 표시 순서가 아닌 소스에 있는 순서대로 문서를 탭핑합니다. 많은 스크린 리더 사용자는 완전히 시각 장애인이 아니므로 문서에서 자신이 어디에 있는지 볼 수 있는 것과 함께 스크린 리더를 사용할 수 있습니다. 이 두 경우 모두 소스와 비교할 때 뒤죽박죽인 디스플레이는 실제로 매우 혼란스러운 상황을 유발할 수 있습니다.

소스에 있는 순서에서 요소를 이동할 때 매우 주의하십시오. CSS에서 항목의 순서를 재정렬하고 있는 자신을 발견했다면 정말로 돌아가서 문서를 재구성해야 합니까? 여전히 문서 주위를 탭할 수 있고 시각적 순서가 의미가 있는지 테스트하십시오.

시각적 및 문서 주문에 대한 리소스 및 추가 참고 자료

• "CSS 그리드 레이아웃 및 접근성", 개발자를 위한 웹 기술, MDN 웹 문서, Mozilla
• "HTML 소스 순서 대 CSS 표시 순서", Adrian Roselli
• "Flexbox와 키보드 탐색 연결 끊김", Code Things, Tink
• "키보드 포커스를 위한 응답 순서 충돌", Alastair Campbell

박스 제너레이션

웹 페이지에 올리는 모든 것은 상자를 만들고 이 기사의 모든 내용은 CSS를 사용하여 디자인에서 상자를 레이아웃하는 방법을 설명하지만 특정 상황에서는 상자를 전혀 만들고 싶지 않을 수 있습니다. 상자를 원하지 않는 상황을 처리하는 두 가지 display 속성 값이 있습니다.

상자 또는 내용물을 생성하지 마십시오( display: none )

요소와 해당 요소의 모든 콘텐츠(자식 항목 포함)가 생성되지 않도록 하려면 display: none 을 사용할 수 있습니다. 이제 요소가 표시되지 않으며 원래 있던 위치를 위한 공간이 예약되지 않습니다.

 .item { display: none; }

이 요소를 생성하지 말고 모든 하위 요소를 생성하십시오( display: contents )

display의 새로운 값은 display display: contents 입니다. display: contents 를 요소에 적용하면 해당 요소에 대한 상자가 생성되지 않지만 자식은 정상적으로 생성됩니다. 이것은 간접 자식 요소가 플렉스 또는 그리드 레이아웃의 일부가 되도록 하려는 경우에 유용할 수 있습니다.

아래 예에서 첫 번째 플렉스 항목에는 두 개의 중첩된 자식이 포함되어 있지만 display: contents 되도록 설정되어 있으므로 해당 상자는 임대되지 않고 자식은 직계 자식인 것처럼 표시되어 플렉스 항목이 됩니다. 해당 요소에서 display: contents 을 제거하여 레이아웃이 어떻게 변경되는지 확인합니다.

박스 생성을 위한 리소스 및 추가 참고 자료

• " display: contents ", Rachel Andrew
• display: contents; 작품,” 이레 아데리노쿤,
• CSS display: contents ,” 브라우저 지원 정보, caniuse

조정

정렬은 최근까지 웹에서 까다로운 주제였습니다. 상자 안의 항목을 올바르게 정렬하는 방법은 매우 제한적이었습니다. 이것은 현재 Grid 및 Flex 컨테이너에서 정렬을 제어할 때 사용할 Box Alignment Module에서 변경됩니다. 앞으로 다른 레이아웃 방법도 이러한 정렬 속성을 구현할 것입니다. 상자 정렬 사양에 자세히 설명된 정렬 속성 목록은 다음과 같습니다.

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

레이아웃 모델에는 기능이 다르기 때문에 사용하는 레이아웃 모델에 따라 얼라인먼트가 약간 다르게 작동합니다. 간단한 Grid 및 Flex 레이아웃에서 정렬이 어떻게 작동하는지 살펴보겠습니다.

align-items 및 justify-items 속성은 align-self 및 justify-self 속성을 그룹으로 설정합니다. 이러한 속성은 그리드 영역 내부의 항목을 정렬합니다.

align-content 및 justify-content 속성은 그리드 트랙을 정렬합니다. 여기서 그리드 컨테이너에는 트랙을 표시하는 데 필요한 것보다 더 많은 공간이 있습니다.

Flexbox에서 align-items 및 align-self 는 교차 축의 정렬을 처리하는 반면, justify-content 는 주 축의 공간 분포를 처리합니다.

교차 축에서 flex 컨테이너에 플렉스 라인과 추가 공간을 래핑한 align-content 를 사용할 수 있습니다.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

분열

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

조각화에 대한 리소스 및 추가 참고 자료

• "2018년 인쇄 스타일시트 현황에 대한 가이드", Rachel Andrew, Smashing Magazine
• "열 나누기", QuirkMode.org

레이아웃 유형 선택: 어떻게 선택합니까?

대부분의 웹 페이지는 이러한 레이아웃 유형을 혼합하여 사용하며 각 사양은 서로 상호 작용하는 방식을 정확히 정의합니다. 예를 들어, 일부 그리드 항목이 Flex 컨테이너이기도 한 그리드 레이아웃이 있을 수 있습니다. 이러한 플렉스 컨테이너 중 일부는 위치 지정 항목에 대한 포함 블록이거나 내부에 이미지가 떠 있을 수 있습니다. 사양은 우리가 레이아웃하고 있는 콘텐츠에 가장 적합한 것에 따라 레이아웃 모델을 혼합할 것이라는 예상으로 작성되었습니다. 이 가이드에서는 특정 효과를 달성하는 가장 좋은 방법이 무엇인지 알아보는 데 도움이 되도록 각 레이아웃 유형이 작동하는 기본 방식에 대한 개요를 제공하려고 했습니다.

그러나 염두에 두고 있는 디자인을 만드는 다양한 방법을 사용하는 것을 두려워하지 마십시오. 실제 문제를 일으키는 선택에 대해 걱정해야 하는 곳은 상상할 수 있는 것보다 적습니다. 좋은 문서 구조로 시작하고 해당 순서에서 시각적 표시를 분리하지 않도록 주의하십시오. 나머지 대부분은 대상 브라우저에서 예상한 대로 작동하는지 테스트하는 경우일 뿐입니다.