안녕하세요! 오늘 다뤄볼 주제는 앞서 배운 기본 개념을 바탕으로 실제 코드에서 다단 레이아웃을 어떻게 사용하는지(Using multi-column layouts)에 대한 내용입니다.
특히 텍스트가 빽빽하게 들어가는 웹 페이지를 만들 때, 긴 글을 시각적으로 어떻게 풀어내느냐가 사용자 경험(UX)에 아주 큰 영향을 미치는데요. 포트폴리오로 구상하고 계신 독후감 사이트 같이 텍스트 중심의 웹 애플리케이션에 적용하기 딱 좋은 기술이니 눈여겨보시면 좋을 것 같습니다. 자, 그럼 공식 문서를 함께 번역하면서 살펴볼까요?
다단 레이아웃 사용하기 (Using multi-column layouts)
CSS 다단 레이아웃 모듈(CSS multi-column layout module)에 정의된 속성들은 기존의 블록 레이아웃 모드(block layout mode)를 확장해서 텍스트를 여러 단(columns)으로 나눌 수 있게 해줍니다.
사람들은 한 줄의 길이가 너무 길면 글을 읽는 데 어려움을 느낍니다. 시선이 한 줄의 끝에서 다음 줄의 시작 지점으로 이동하는 데 시간이 너무 오래 걸리면, 지금 어느 줄을 읽고 있었는지 놓치기 십상이거든요. 큰 화면을 사용할 때 텍스트를 읽는 사용자에게 더 나은 경험을 제공하려면, 마치 신문에서 하는 것처럼 텍스트 단을 나란히 배치해서 텍스트의 너비를 제한해 주는 것이 좋습니다.
💡 강사의 실무 & 포트폴리오 팁!
이 부분은 UI/UX 측면에서 매우 중요한 포인트입니다. 기술 면접이나 임원 면접에서 "왜 이 페이지에 다단 레이아웃을 적용했나요?"라는 질문을 받았을 때, "단순히 예뻐서"가 아니라 "사용자의 시선 이동 거리를 줄여 가독성을 높이고 피로도를 낮추기 위해 적용했습니다"라고 대답해 보세요. 사용자 경험까지 깊이 고민하는 프론트엔드 개발자라는 긍정적인 인상을 심어줄 수 있습니다.
이 문서에서 다룰 내용 (In this article)
- 단 사용하기 (Using columns)
- 예제 1 (Example 1)
- 예제 2 (Example 2)
- 예제 3 (Example 3)
- 예제 4 (Example 4)
- 예제 5 (Example 5)
- 예제 6 (Example 6)
- 결론 (Conclusion)
단 사용하기 (Using columns)
단 개수와 너비 (Column count and width)
단이 화면에 나타날지, 그리고 나타난다면 몇 개나 나타날지를 제어하는 CSS 속성에는 두 가지가 있습니다. 바로 column-count와 column-width입니다.
column-count 속성은 단의 개수를 특정한 숫자로 딱 정해줍니다. 예를 들면 아래와 같습니다.
예제 1 (Example 1)
HTML
<div id="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>CSS
#col {
column-count: 2;
}결과 (Result)
콘텐츠가 두 개의 단으로 표시됩니다.
(column-count: 2; 가 적용되어 화면이 두 단으로 나뉜 결과가 렌더링 됩니다.)
반면에 column-width 속성은 단이 가졌으면 하는 최소 너비를 설정합니다. 만약 column-count가 함께 설정되지 않았다면, 브라우저는 주어진 공간(너비) 안에 들어갈 수 있는 최대한 많은 개수의 단을 자동으로 만들어냅니다.
예제 2 (Example 2)
HTML
<div id="wid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>CSS
#wid {
column-width: 100px;
}결과 (Result)
(column-width: 100px; 이 적용되어 너비에 맞춰 단이 여러 개로 나뉜 결과가 렌더링 됩니다.)
다단 블록 안에서는 필요에 따라 콘텐츠가 한 단에서 다음 단으로 자연스럽게 흘러갑니다. 텍스트를 편집하거나 인쇄할 때와 마찬가지로, HTML, CSS, DOM의 모든 기능이 이 단 내부에서도 완벽하게 지원됩니다.
columns 단축 속성 (The columns shorthand)
여러분은 column-count나 column-width 중 하나를 사용할 수 있습니다. 이 두 속성에 들어가는 값의 형태(단위)가 겹치지 않기 때문에, 단축 속성인 columns를 사용하는 것이 꽤 편리할 때가 많습니다.
🧐 부연 설명
column-count는 숫자(예: 3)를 받고,column-width는 길이 단위(예: 100px, 12em)를 받습니다. 값의 형태가 확연히 다르기 때문에 브라우저가columns: 3 100px;처럼 한 번에 써도 뭐가 개수고 뭐가 너비인지 찰떡같이 알아듣는답니다!
예제 3 (Example 3)
이 예제에서는 column-width: 12em 이라는 CSS 선언이 단축 속성인 columns: 12em으로 대체되었습니다.
HTML
<div id="col_short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>CSS
#col_short {
columns: 12em;
}예제 4 (Example 4)
이 예제에서는 column-count: 4 라는 CSS 선언이 단축 속성인 columns: 4로 대체되었습니다.
HTML
<div id="columns_4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>CSS
#columns_4 {
columns: 4;
}예제 5 (Example 5)
column-width: 8em 과 column-count: 12 라는 두 개의 CSS 선언은 columns: 12 8em 이라는 하나의 단축 속성으로 합쳐서 대체할 수 있습니다. 단축 속성에서 column-count 부분(12)은 화면에 표시될 단의 최대 개수를 의미합니다. 그리고 column-width 부분(8em)은 각 단이 가져야 할 최소 너비를 의미하죠.
HTML
<div id="columns_12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>CSS
#columns_12 {
columns: 12 8em;
}결과 (Result)
(columns: 12 8em; 이 적용된 결과가 렌더링 됩니다.)
단 사이의 기본 간격(gap)이 1em이라고 가정해 볼까요? 만약 컨테이너의 너비가 103em보다 넓다면 (12개의 단 * 각각 8em 너비 + 11개의 단 사이 간격 1em = 총 107em... 문서 원본에는 계산 오류가 살짝 있네요! 원문에는 7 1em gaps라고 되어 있지만, 12개 단 사이의 간격은 11개입니다. 원문의 의도대로라면 약 107em 이상일 때), 각 단의 너비가 8em 이상인 단이 최대 12개까지 생깁니다.
만약 컨테이너의 너비가 이보다 좁다면, 단의 개수는 12개보다 적어지게 됩니다.
더 나아가 컨테이너 너비가 17em (8em 단 1개 + 8em 단 1개 + 1em 간격)보다도 좁아진다면, 더 이상 나눌 공간이 없으므로 단 사이 간격 없이 하나의 단으로만 콘텐츠가 표시됩니다.
💡 강사의 기술 면접 대비 팁!
이 부분은 CSS만으로 반응형 웹(Responsive Web)을 구현하는 아주 우아한 방법입니다. 면접관이 "미디어 쿼리(Media Query)를 최소화하면서 반응형 레이아웃을 구현해 본 경험이 있나요?"라고 물어본다면, 방금 배운columns: 12 8em;처럼column-count와column-width를 조합해서 브라우저가 공간에 맞춰 스스로 단을 조절하게 만들었던 경험을 이야기해 보세요!
높이 균형 맞추기 (Height balancing)
CSS 다단 레이아웃은 기본적으로 단들의 높이가 균형을 이뤄야 한다고 요구합니다. 즉, 브라우저가 각 단에 들어가는 콘텐츠의 높이가 대략적으로 비슷해지도록 전체 단의 최대 높이를 자동으로 설정해 준다는 뜻입니다. (Firefox 브라우저가 이런 방식으로 동작합니다.)
하지만, 어떤 상황에서는 단의 최대 높이를 우리가 직접 명시적으로 지정해 주는 것이 유용할 때도 있습니다. 이렇게 하면 콘텐츠가 첫 번째 단부터 채워지기 시작해서 필요한 만큼 단을 만들어내며, 경우에 따라 오른쪽으로 넘쳐흐르도록(overflow) 배치할 수 있습니다.
따라서 다단 블록에 CSS height나 max-height 속성을 설정해서 높이를 제한하면, 각 단은 그 설정된 높이까지만 커지고 그 이상 콘텐츠가 넘치면 새로운 단을 추가하게 됩니다. 이 방식은 브라우저가 레이아웃을 계산할 때(렌더링 성능 측면에서) 훨씬 더 효율적입니다.
💡 강사의 실무 팁!
브라우저가 콘텐츠 높이를 균등하게 맞추기 위해 계속 계산을 다시 하는 것을 방지하려면max-height를 주는 것이 성능 최적화에 도움이 됩니다. 프론트엔드 개발자로서 렌더링 최적화까지 고려한다면 금상첨화겠죠?
단 간격 (Column Gaps)
단과 단 사이에는 틈(gap)이 있습니다. 권장되는 기본 간격은 1em입니다. 이 크기는 다단 블록에 column-gap 속성을 적용해서 자유롭게 바꿀 수 있습니다.
예제 6 (Example 6)
HTML
<div id="column_gap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>CSS
#column_gap {
column-count: 5;
column-gap: 2em;
}결과 (Result)
(5개의 단으로 나뉘고 각 단 사이에 2em의 넓은 간격이 적용된 결과가 렌더링 됩니다.)
결론 (Conclusion)
CSS 단(columns)은 넓은 화면(뷰포트)에서 반응형 콘텐츠를 볼 때, 텍스트가 꽉 찬 큰 덩어리를 훨씬 읽기 쉽게 만들어주는 기본적인 레이아웃 도구입니다. 창의적인 개발자라면 이 기능을 다양하게 활용할 수 있을 텐데요, 특히 컨테이너 쿼리(container queries)와 높이 자동 균형 기능(automatic height balancing feature)을 함께 접목하면 그 활용도가 무궁무진해집니다.
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요?
기여하는 방법 알아보기 (Learn how to contribute)
이 페이지는 MDN 기여자들에 의해 2025년 12월 15일에 마지막으로 수정되었습니다 (MDN contributors).
