안녕하세요! 프론트엔드 개발 강사입니다. 이번에도 MDN 공식 문서를 통해 CSS 다단 레이아웃(Multi-column)을 깊이 있게 공부하시려는 모습이 정말 멋집니다! 영문 문서라 다소 막막하셨을 텐데, 제가 딱딱한 번역 대신 이해하기 쉬운 구어체로 전부 번역해 드릴게요. 원본 내용은 하나도 빠짐없이 담았고, 실무에서 마주칠 수 있는 상황에 대비해 강사의 꿀팁과 부연 설명도 듬뿍 추가해 두었으니 천천히 읽어보세요! 😊
단 가로지르기와 균형 맞추기 (Spanning and balancing columns)
👨🏫 강사의 부연 설명:
신문이나 잡지를 보면 글이 여러 단으로 나뉘어 있다가도, 중간에 큰 제목이나 사진이 등장하면 모든 단을 하나로 합쳐서 넓게 가로지르는(Span) 것을 본 적 있으시죠? 이번 가이드에서는 다단(multicol) 컨테이너 안에서 특정 요소가 여러 단을 가로지르게 만드는 방법과, 남은 공간에 콘텐츠를 어떻게 채우고 균형을 맞출지 제어하는 방법을 배웁니다.
이 가이드에서는 다단(multicol) 컨테이너 내부의 요소들이 여러 단을 가로지르도록(span) 만드는 방법과, 단들이 어떻게 채워질지를 제어하는 방법에 대해 살펴봅니다.
이 문서의 내용
단 가로지르기 (Spanning the columns)
어떤 항목이 여러 단을 가로지르게 만들려면, column-span 속성에 all이라는 값을 사용하면 됩니다. 이렇게 하면 해당 요소는 모든 단을 가로지르는 스패너(spanner)가 됩니다.
다단 컨테이너의 모든 자손 요소는 스패너가 될 수 있습니다. 직접적인 자식 요소뿐만 아니라 간접적인 자식 요소도 가능하죠. 예를 들어, 컨테이너 안에 바로 중첩된 제목(heading) 요소가 스패너가 될 수도 있고, 컨테이너 안에 있는 <section> 태그 내부에 깊숙이 중첩된 제목 요소도 스패너가 될 수 있습니다.
💡 강사의 실무 팁! "스패너(Spanner)가 뭔가요?"
여기서 말하는 '스패너'는 공구가 아니라 '걸치는 요소, 가로지르는 요소'를 의미해요. 스패너 요소가 등장하면, 브라우저는 이전까지 흐르던 다단 레이아웃을 잠시 끊고(break), 스패너를 넓게 배치한 다음, 그 아래부터 다시 새로운 단을 만들어 콘텐츠를 이어서 배치한답니다. 흐름을 완전히 초기화하는 강력한 녀석이죠!
아래 예제에서는 <h2> 요소에 column-span: all을 설정하여 모든 단을 가로지르도록 만들었습니다.
(MDN Playground에서 실행해보기)
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
column-span: all;
background-color: #4d4e53;
color: white;
}이 두 번째 예제에서는 제목(<h2>)이 <article> 요소 안에 깊숙이 들어있음에도 불구하고, 여전히 우리가 예상한 대로 전체 콘텐츠를 가로지르고 있는 것을 볼 수 있습니다. (직접적인 부모가 다단 컨테이너가 아니어도 작동한다는 뜻이죠!)
(MDN Playground에서 실행해보기)
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<article>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</article>
</div>body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
column-span: all;
background-color: #4d4e53;
color: white;
}스패너(가로지르는 요소)가 도입되면 단의 흐름(flow)이 깨집니다. 스패너 이후에 단이 다시 시작되며, 사실상 완전히 새로운 단 박스(column boxes) 세트가 생성되는 셈입니다. 콘텐츠는 가로지르는 요소를 훌쩍 건너뛰어 연결되지 않습니다. (즉, 왼쪽 단에서 스패너 요소 아래로 글이 쭉 이어지는 게 아니라, 스패너 위쪽에서 단 배치가 한번 끝나고 스패너 아래에서 1단부터 다시 시작된다는 의미입니다.)
column-span의 한계 (Limitations of column-span)
column-span 속성은 오직 두 가지 값만 가질 수 있습니다. 초기값인 none은 항목이 가로지르지 않고 하나의 단 안에 머무른다는 뜻입니다. all이라는 값은 항목이 모든 단을 가로지른다는 뜻입니다. 항목이 3개의 단 중 2개의 단만 가로지르게 하는 등, 부분적으로만 가로지르게 할 수 있는 값은 존재하지 않습니다.
⚠️ 강사의 중요 팁! "부분적으로 넓히고 싶다면?"
이 부분이 다단 레이아웃(Multi-column)의 가장 아쉬운 점이에요. 만약 전체가 아니라 딱 '두 칸'만 차지하는 요소를 만들고 싶다면, 다단 레이아웃 대신 CSS Grid 레이아웃을 사용하는 것이 훨씬 좋습니다. Grid에서는grid-column: span 2;처럼 원하는 만큼만 영역을 차지하게 만들 수 있거든요!
주의해야 할 점 (Things to watch out for)
만약 가로지르는 요소(스패너)가 여백(margin), 패딩(padding), 테두리(border)나 배경색(background color)이 있는 다른 부모 요소 안에 들어있다면, 그 부모 박스의 모양이 스패너 위쪽에 나타나고 나머지 콘텐츠는 스패너 아래쪽에 표시되는 시각적인 문제가 발생할 수 있습니다. 이러한 이유로, 어떤 요소를 모든 단을 가로지르도록 설정할 때는 이러한 상황이 발생하지 않는지 각별히 주의하고 고려해야 합니다.
(MDN Playground에서 실행해보기)
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<article>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</article>
</div>body {
font: 1.2em / 1.5 sans-serif;
}
article {
border: 1px solid red;
padding: 10px;
}
.container {
column-width: 250px;
}
h2 {
background-color: #4d4e53;
color: white;
column-span: all;
}추가적으로, 가로지르는 요소가 콘텐츠의 끝부분에 위치해 있다면, 스패너 이후에 단을 구성할 만큼 충분한 콘텐츠가 없을 때 예기치 않거나 원치 않는 형태가 나타날 수 있습니다. column-span을 사용할 때는 항상 신중하게 적용하고, 다양한 화면 크기(브레이크포인트)에서 테스트하여 의도한 대로 잘 보이는지 꼭 확인하세요.
단 채우기와 균형 맞추기 (Filling and balancing columns)
균형 잡힌(balanced) 단 세트란 모든 단이 대략적으로 비슷한 양의 콘텐츠를 가지고 있는 상태를 말합니다. 채우기(Filling)와 균형 맞추기(balancing)는 제공된 공간의 양과 콘텐츠의 양이 일치하지 않을 때 의미가 있습니다. 대표적으로 컨테이너에 height(높이) 속성이 명시적으로 선언되었을 때 이런 현상이 발생하죠.
💡 강사의 실무 팁! "높이를 지정하지 않으면 어떻게 되나요?"
만약 다단 컨테이너에height를 지정하지 않으면, 컨테이너는 내용물에 맞춰 높이가 쭉쭉 늘어납니다. 이때는 브라우저가 알아서 전체 텍스트를 단 개수에 맞춰 예쁘게 균등 분배(balance)해 버리기 때문에 아래에서 설명할column-fill속성의 차이를 눈으로 확인하기 어려워요! 이 차이를 보시려면 반드시 컨테이너에 고정된 높이가 있어야 합니다.
column-fill 속성의 초기 기본값은 balance입니다. balance 값은 모든 단이 가능한 한 최대한 균형을 이루도록 맞춘다는 뜻입니다. 페이지 기반 미디어(paged media)와 같이 조각난(fragmented) 문맥에서는 오직 마지막 조각만 균형이 맞춰집니다. 즉, 마지막 페이지에서만 마지막 단 박스 세트가 균형을 이루게 된다는 뜻입니다.
또 다른 균형 맞추기 값인 balance-all은 조각난 문맥(페이지 기반 미디어 등)에서 모든 단의 균형을 강제로 맞춥니다.
아래 예제의 단에는 이미지와 약간의 텍스트가 포함되어 있으며, 균형이 맞춰져(balanced) 있습니다. 잘릴 수 없는(cannot break) 이미지는 첫 번째 단에 들어갑니다. 그리고 나머지 단들은 동일한 양의 텍스트가 채워지면서 서로 균형을 이룹니다.
(MDN Playground에서 실행해보기)
<div class="container">
<img
alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
src="[https://mdn.github.io/shared-assets/images/examples/balloons.jpg](https://mdn.github.io/shared-assets/images/examples/balloons.jpg)" />
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion.
</p>
</div>body {
font: 1.2em / 1.5 sans-serif;
}
h2 {
background-color: #4d4e53;
color: white;
}
img {
max-width: 100%;
}
.container {
column-width: 200px;
column-fill: balance;
height: 250px;
}
반면, column-fill 속성에 auto 값을 주면 모든 단을 똑같이 채우고 균형을 맞추는 대신, 단을 순차적으로 채워나갑니다. 시작 방향(inline-start, 보통 왼쪽)에 있는 첫 번째 단을 컨테이너 높이 끝까지 꽉 채운 뒤에야 다음 단으로 콘텐츠를 넘겨 배치하죠. 아래 예제에서는 column-fill을 auto로 변경해 보았습니다. 첫 번째 단부터 컨테이너의 높이(250px)만큼 꽉꽉 채워지고, 콘텐츠가 모자라서 마지막에는 빈 단이 남게 되는 것을 보실 수 있습니다.
(MDN Playground에서 실행해보기)
<div class="container">
<img
alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
src="[https://mdn.github.io/shared-assets/images/examples/balloons.jpg](https://mdn.github.io/shared-assets/images/examples/balloons.jpg)" />
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion.
</p>
</div>body {
font: 1.2em / 1.5 sans-serif;
}
h2 {
background-color: #4d4e53;
color: white;
}
img {
max-width: 100%;
}
.container {
column-width: 150px;
column-fill: auto;
height: 250px;
}다음 단계 (Next steps)
다음 가이드에서는 다단 컨테이너 내에서 콘텐츠가 넘칠 때(overflow), 그리고 지정한 단의 개수가 컨테이너 너비에 다 들어가지 못할 만큼 많을 때 다단 레이아웃이 넘침(overflow)을 어떻게 처리하는지에 대해 배워보겠습니다.
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요? [네 (Yes)] / [아니요 (No)]
기여하는 방법 알아보기 (Learn how to contribute)
이 페이지는 2025년 11월 7일에 MDN 기여자들 (MDN contributors)에 의해 마지막으로 수정되었습니다.
