CSS 다중 열 레이아웃을 사용하는 시기와 방법

CSS Grid Layout 및 Flexbox에 대한 모든 흥분 속에서 또 다른 레이아웃 방법은 종종 간과됩니다. 이 기사에서는 다중 열 레이아웃(종종 다중 열 또는 "CSS 열"이라고도 함)에 대해 살펴보겠습니다. 어떤 작업에 적합한지, 기둥을 만들 때 주의해야 할 몇 가지 사항을 알 수 있습니다.

멀티콜이란?

multicol의 기본 아이디어는 신문에서와 같이 콘텐츠 덩어리를 여러 열로 흐를 수 있다는 것입니다. 두 속성 중 하나를 사용하여 이 작업을 수행합니다. column-count 속성은 내용을 나누려는 열의 수를 지정합니다. column-width 속성은 이상적인 너비를 지정하므로 브라우저에서 얼마나 많은 열이 들어갈지 알아낼 수 있습니다.

다중 열 컨테이너로 전환하는 콘텐츠 내부에 어떤 요소가 있는지는 중요하지 않습니다. 모든 것이 정상적인 흐름으로 유지되지만 열로 나뉩니다. 이것은 오늘날 브라우저에 있는 다른 레이아웃 방법과 달리 multicol을 만듭니다. 예를 들어 Flexbox 및 Grid는 컨테이너의 자식 요소와 해당 항목을 가져온 다음 플렉스 또는 그리드 레이아웃에 참여합니다. multicol을 사용하면 열 내부를 제외하고 여전히 정상적인 흐름이 있습니다.

아래 예에서는 column-width 를 사용하여 최소 14em 의 열을 표시합니다. Multicol은 맞는 만큼 14em 열을 할당한 다음 열 사이의 나머지 공간을 공유합니다. 열은 최소 14em 입니다. 단 하나의 열만 표시할 수 없는 경우에는 더 작을 수 있습니다. Multicol은 CSS에서 이러한 종류의 동작을 처음으로 보았습니다. 기본적으로 기본적으로 반응하는 열이 생성됩니다. Media Queries를 추가하고 다양한 중단점에 대한 열 수를 변경할 필요가 없습니다. 대신 최적의 너비를 지정하면 브라우저에서 해결합니다.

스타일링 칼럼

열 속성 중 하나를 사용할 때 생성된 열 상자는 대상으로 지정할 수 없습니다. JavaScript로 해결할 수 없으며 개별 상자에 스타일을 지정하여 배경색을 제공하거나 패딩 및 여백을 조정할 수 없습니다. 모든 열 상자의 크기는 동일합니다. 할 수 있는 유일한 방법은 테두리와 같은 역할을 하는 column-rule 속성을 사용하여 열 사이에 규칙을 추가하는 것입니다. 기본값은 1em 이지만 유효한 길이 단위로 변경할 수 있는 column-gap 속성을 사용하여 열 사이의 간격을 제어할 수도 있습니다.

이것이 멀티콜의 기본 기능입니다. 콘텐츠 청크를 가져와 열로 나눌 수 있습니다. 콘텐츠는 열을 차례로 채우고 인라인 방향으로 열을 만듭니다. 테두리와 동일한 가능한 값으로 열 사이의 간격을 제어하고 규칙을 추가할 수 있습니다. 지금까지는 훌륭했고 위의 모든 사항은 브라우저에서 매우 잘 지원되고 오랫동안 지원되어 왔으며 이 사양은 이전 버전과의 호환성 측면에서 사용하기에 매우 안전합니다.

열에 대해 고려해야 할 몇 가지 추가 사항과 웹에서 열을 사용할 때 알아야 할 몇 가지 잠재적인 문제가 있습니다.

스패닝 열

때로는 일부 콘텐츠를 열로 나누고 하나의 요소가 열 상자에 걸쳐 있게 하고 싶을 수 있습니다. multicol 컨테이너의 하위 항목에 column-span 속성을 적용하면 이를 달성할 수 있습니다.

아래 예에서 <blockquote> 요소가 열 전체에 걸쳐 있게 했습니다. 이렇게 하면 콘텐츠가 범위 위의 상자 집합으로 분할된 다음 아래에서 새 열 상자 집합을 시작합니다. 콘텐츠는 스팬된 요소를 건너뛰지 않습니다.

column-span 속성은 현재 Firefox에서 구현되고 있으며 기능 플래그 뒤에 있습니다.

현재 사양에서 column-span 의 값은 all 또는 none 입니다. 열의 일부만 확장할 수는 없지만 다중 열을 다른 레이아웃 방법과 결합하여 신문에서 볼 수 있는 종류의 레이아웃을 얻을 수 있습니다. 다음 예에는 두 개의 열 트랙이 있는 그리드 컨테이너가 있습니다. 왼쪽 트랙은 2fr , 오른쪽 트랙은 1fr 입니다. 왼쪽 트랙에 있는 기사는 두 개의 트랙이 있는 다중 콜 컨테이너로 바뀌었고 스패닝 요소도 있습니다.

오른쪽에는 두 번째 그리드 열 트랙으로 연결되는 제방이 있습니다. 우리가 사용할 수 있는 다양한 레이아웃 방법을 가지고 놀면서 당면한 작업에 어떤 레이아웃 방법이 적합한지 정확히 알아낼 수 있습니다. 혼합 및 일치를 두려워하지 마십시오!

콘텐츠 중단 제어

제목이 포함된 콘텐츠가 있는 경우 제목이 열의 마지막 항목으로 끝나고 콘텐츠가 다음 열로 넘어가는 상황을 피하고 싶을 것입니다. 캡션이 있는 이미지가 있는 경우 이상적인 상황은 이미지와 캡션이 열로 분할되지 않고 하나의 단위로 유지되는 것입니다. 이러한 문제를 처리하기 위해 CSS에는 콘텐츠가 중단되는 위치를 제어하는 ​​속성이 있습니다.

콘텐츠를 열로 분할하면 조각화라고 하는 작업이 수행됩니다. 인쇄 컨텍스트에 대한 스타일시트를 만드는 경우와 같이 페이지 간에 콘텐츠를 분할하는 경우에도 마찬가지입니다. 따라서 multicol은 웹의 다른 레이아웃 방법보다 Paged Media에 가장 가깝습니다. 이 때문에 몇 년 동안 콘텐츠의 나누기를 제어하는 ​​방법은 CSS2.1의 일부인 page-break- 나누기 속성을 사용하는 것이었습니다.

• page-break-before
• page-break-after
• page-break-inside

보다 최근에 CSS Fragmentation 사양은 모든 단편화된 컨텍스트를 위해 설계된 단편화에 대한 속성을 정의했으며 사양에는 Paged Media, multicol 및 지연된 지역 사양에 대한 세부 정보가 포함되어 있습니다. 영역은 또한 연속적인 콘텐츠 조각을 조각화합니다. 이러한 속성을 일반화하면 Flexbox의 정렬 속성이 Grid 및 Block 레이아웃에서 사용될 수 있도록 Box Alignment 사양으로 이동된 것과 같은 방식으로 미래의 단편화된 컨텍스트에 적용할 수 있습니다.

• break-before
• break-after
• break-inside

예를 들어, 캡션이 이미지에서 분리되는 것을 방지하기 위해 <figure> 요소에 break-inside avoid 를 사용했습니다. 지원하는 브라우저는 열이 불균형하게 보이더라도 그림을 함께 유지해야 합니다.

불행히도 multicol에서 이러한 속성에 대한 지원은 매우 고르지 않습니다. 지원되는 경우에도 중단을 제어하려고 시도하면서 본질적으로 브라우저가 실제로는 아무데도 중단될 수 없는 많은 요청을 할 수 있다는 사실 때문에 제안으로 간주되어야 합니다. 사양은 이 경우 우선 순위를 정의하지만 가장 중요한 경우만 제어하는 ​​것이 더 유용할 수 있습니다.

웹상의 열 문제

웹에서 multicol이 많이 사용되지 않는 한 가지 이유는 독자가 블록 차원에서 스크롤하게 만드는 읽기 경험으로 끝나는 것이 매우 쉽다는 사실입니다. 이는 영어나 다른 세로 쓰기 모드를 사용하는 사람들에게 세로로 위아래로 스크롤하는 것을 의미합니다. 이것은 좋은 독서 경험이 아닙니다!

예를 들어 뷰포트 단위 vh 를 사용하여 컨테이너 높이를 고정하고 콘텐츠가 너무 많으면 인라인 방향으로 오버플로가 발생하므로 대신 가로 스크롤 막대가 표시됩니다.

이 중 어느 것도 이상적이지 않으며 웹에서 multicol을 사용하는 것은 열에 전달하려는 콘텐츠의 양 측면에서 매우 신중하게 생각해야 하는 것입니다.

블록 오버플로 열

사양의 레벨 2에 대해 현재 수평 스크롤바를 유발하는 오버플로 열이 대신 블록 방향으로 생성될 수 있는 방법을 활성화하는 방법을 고려하고 있습니다. 이것은 높이가 있는 다중 열 컨테이너를 가질 수 있고 콘텐츠가 해당 컨테이너를 채우는 열을 만들면 아래에 새 열 집합이 생성됨을 의미합니다. 이것은 위의 스패닝 예제와 약간 비슷하지만 새 열 상자가 시작되도록 하는 스패너 대신 블록 차원에 제한이 있는 컨테이너로 인해 오버플로가 발생합니다.

이 기능은 웹에서 multicol을 훨씬 더 유용하게 만들 것입니다. 지금은 얼마 남지 않았지만 CSS Working Group repo에서 이 문제를 계속 주시할 수 있습니다. 이 기능에 대한 추가 사용 사례가 있는 경우 게시하면 새 기능을 설계할 때 정말 도움이 될 수 있습니다.

Multicol은 오늘날 무엇에 유용합니까?

현재 사양에서는 스크롤 문제를 고려하지 않고 모든 콘텐츠를 열로 분할하는 것은 권장되지 않습니다. 그러나 웹에서 multicol이 이상적인 경우가 있습니다. 디자인 패턴을 볼 때 고려해야 할 사항으로 만들기에 충분한 사용 사례가 있습니다.

작은 UI 또는 텍스트 요소 축소

Multicol은 공간을 덜 차지하고 싶은 작은 항목 목록이 있는 모든 장소에서 유용할 수 있습니다. 예를 들어 간단한 체크박스 목록이나 이름 목록이 있습니다. 종종 이러한 시나리오에서 방문자는 한 열을 읽고 다음 열로 돌아가지 않고 콘텐츠를 스캔하여 클릭할 확인란이나 선택할 항목을 찾습니다. 스크롤 경험을 생성하더라도 문제가 되지 않을 수 있습니다.

DonarMuseum 웹사이트에서 Sander de Jong이 이런 방식으로 사용한 multicol의 예를 볼 수 있습니다.

알려진 소량의 콘텐츠

일부 콘텐츠가 상대적으로 작고 원치 않는 스크롤을 일으키지 않고 대부분의 화면에 맞는 사이트를 디자인할 때가 있습니다. 저는 Notist 프리젠테이션 페이지에서 강연 소개를 위해 multicol을 사용했습니다.

Andy Clark은 Equfund 웹사이트를 위한 멋진 예를 디자인했습니다.

매우 작은 화면으로 인해 스크롤이 발생할 가능성을 방지하려면 미디어 쿼리를 사용하여 높이와 너비를 확인할 수 있습니다(논리적 세계에서는 인라인뿐만 아니라 블록). 콘텐츠에 대해 충분히 큰 min-height 를 가진 중단점에서만 열을 활성화하면 스크롤 환경이 좋지 않은 매우 작은 장치의 사용자를 구할 수 있습니다.

콘텐츠의 벽돌과 같은 표시

다중 열 레이아웃이 아름답게 작동하는 또 다른 장소는 콘텐츠 표시의 벽돌 유형을 만들려는 경우입니다. Multicol은 현재 높이가 다른 항목으로 이러한 종류의 레이아웃을 만드는 유일한 레이아웃 방법입니다. 그리드는 간격을 남기거나 항목을 늘려 엄격한 2차원 그리드를 만듭니다.

Veerle Pieters는 영감 페이지에서 이러한 방식으로 multicol을 사용하는 아름다운 예를 보여줍니다.

그리드 및 Flexbox 폴백

column- 속성은 Grid 및 Flex 레이아웃에 대한 폴백으로도 사용할 수 있습니다. 컨테이너의 속성 중 하나를 지정하는 경우 display: flex 또는 display: grid 를 사용하여 해당 컨테이너를 Flex 또는 Grid 레이아웃으로 전환하면 모든 열 동작이 제거됩니다. 예를 들어 그리드 레이아웃을 사용하는 카드 레이아웃이 있고 페이지 전체가 아닌 열에서 실행되는 경우 레이아웃을 읽을 수 있는 경우 다중 열을 간단한 대체 수단으로 사용할 수 있습니다. Grid를 지원하지 않는 브라우저는 다중 색상 디스플레이를 가져오고 Grid를 지원하는 브라우저는 Grid 레이아웃을 얻습니다.

멀티콜을 잊지 마세요!

꽤 자주 저는 Grid 또는 Flexbox를 사용하지 않고 Multicol을 보는 것이 답인 Grid 및 Flexbox 질문에 답변합니다. 모든 사이트에서 사용하지는 않겠지만 사용 사례를 발견하면 정말 도움이 될 수 있습니다. MDN에는 multicol 및 관련 단편화 속성에 대한 유용한 리소스가 있습니다.

프로젝트에서 multicol을 사용한 적이 있다면 댓글에 메모를 남겨서 우리가 이 기능을 사용할 수 있는 다른 방법을 공유할 수 있습니다.