Multi-column layout/Basic concepts

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

62/190

안녕하세요! 오늘 함께 살펴볼 내용은 CSS를 활용해 멋진 텍스트 배치를 도와주는 다단 레이아웃(Multi-column layout)입니다. 포트폴리오에 포함될 웹 프로필이나 특히 텍스트가 주를 이루는 독후감 사이트를 만드실 때, 이 다단 레이아웃을 활용하면 신문처럼 세련되고 가독성 높은 UI를 구성하실 수 있답니다.

그럼 MDN 공식 문서를 보면서 하나씩 친절하게 짚어드릴게요!

다단 레이아웃의 기본 개념 (Basic concepts of multi-column layouts)

다단 레이아웃(Multi-column layout, 흔히 줄여서 multicol 레이아웃이라고 부릅니다)은 마치 신문의 단락처럼 콘텐츠를 여러 개의 단 상자(column boxes)로 나누어 배치할 수 있게 해주는 CSS 명세서(specification)입니다. 이 가이드에서는 몇 가지 흔한 사용 사례와 함께 이 명세서가 어떻게 작동하는지 설명해 드릴게요.

주요 속성들 (Key properties)

다단 레이아웃(Multicol layout)은 CSS에 있는 다른 레이아웃 방식들과는 조금 다릅니다. 이 녀석은 자손 요소들을 포함한 모든 콘텐츠를 여러 개의 단(columns)으로 '조각내어(fragments)' 배치하거든요. 이는 우리가 인쇄용 스타일시트를 만들어서 CSS 인쇄 매체 (CSS paged media)를 다룰 때 콘텐츠가 여러 페이지로 쪼개지는 방식과 똑같이 작동합니다.

이 가이드와 이어지는 다음 가이드들에서는 CSS 다단 레이아웃 (CSS multi-column layout) 모듈에 정의된 아래 속성들에 대해 이야기해 볼 거예요.

💡 강사의 실무 팁!
React나 Next.js 환경에서 컴포넌트 기반 개발을 하실 때, 위 속성들을 Props로 넘겨받도록 컴포넌트(예: <ColumnLayout columns={3} gap="2rem" />)를 설계해 두시면 여러 페이지에서 재사용하기가 정말 좋습니다. Storybook으로 테스트해보기도 딱 좋은 레이아웃 컴포넌트가 될 거예요.

단 정의하기 (Defining columns)

요소에 column-count나 column-width 속성을 추가하거나, columns 단축 속성을 사용하게 되면 그 요소는 다단 컨테이너(multi-column container), 짧게 말해 multicol 컨테이너가 됩니다. 이렇게 만들어진 단들은 익명 상자(anonymous boxes)가 되며, CSS 명세서에서는 이를 단 상자(column boxes)라고 부릅니다.

🧐 보충 설명: 익명 상자가 뭔가요?
익명 상자란 우리가 HTML 태그(예: <div>나 <span>)로 직접 만들어주지 않았지만, CSS 렌더링 엔진이 레이아웃을 구성하기 위해 내부적으로 알아서 만들어내는 가상의 박스를 의미합니다. 즉, 3단으로 나눴다고 해서 DOM 트리에 <div>가 3개 생기는 것이 아니라, 화면에 그릴 때만 3개의 덩어리로 인식한다는 뜻이죠!

단 개수 지정하기 (Specifying the number of columns)

column-count 속성은 콘텐츠를 몇 개의 단으로 보여줄지 그 개수를 지정합니다. 그러면 브라우저가 여러분이 요청한 개수만큼 단을 만들기 위해, 각각의 단 상자에 알맞은 공간을 알아서 할당해 줍니다.

아래 예제에서는 .container 요소에 3개의 단을 만들기 위해 column-count 속성을 사용했어요. .container의 자식 요소들을 포함한 전체 콘텐츠가 3개의 단으로 나뉘어 배치되는 걸 보실 수 있습니다.

<div class="container">
  <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 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-count: 3;
}

위의 예제를 보면, 콘텐츠가 기본 스타일이 적용된 p 태그(단락)들로 감싸져 있습니다. 그래서 각 단락 위쪽에 마진(margin)이 들어가 있죠. 이 마진 때문에 첫 번째 줄의 텍스트가 아래로 살짝 밀려 내려온 것을 볼 수 있는데요. 그 이유는 다단 컨테이너가 새로운 블록 서식 문맥(block formatting context, BFC)을 생성하기 때문입니다. BFC가 생성되면 자식 요소들이 가진 마진이 컨테이너의 바깥쪽 마진과 병합(collapse)되지 않거든요.

💡 강사의 기술 면접 꿀팁!
방금 언급된 BFC(Block Formatting Context)와 마진 병합(Margin Collapsing) 현상은 기술 면접에서 CSS 관련 질문으로 매우 자주 등장하는 단골 손님입니다! 기술 면접이나 임원 면접을 준비하실 때, "다단 레이아웃이나 Flex/Grid 컨테이너는 내부적으로 새로운 BFC를 형성하기 때문에 자식 요소의 마진이 컨테이너 밖으로 빠져나가지 않는다"고 명확히 설명하시면 프론트엔드 기본기가 아주 탄탄하다는 인상을 주실 수 있습니다.

단 너비 지정하기 (Specifying the width of columns)

column-width 속성은 각각의 단 상자가 가져야 할 최적의 너비를 설정할 때 사용합니다. 단의 너비를 선언해주면, 브라우저는 다단 컨테이너 안에 해당 너비를 가진 단이 몇 개나 들어갈 수 있는지 계산한 다음, 남는 여백 공간을 각각의 단에 동일하게 나누어 줍니다. 따라서 남는 공간이 더해지면 단의 너비가 원래 지정한 값보다 더 넓어질 수 있기 때문에, column-width 값은 일종의 최소 너비(minimum width)로 이해하시는 것이 좋습니다.

만약 가용한 너비가 column-width에 지정된 값보다 좁아서 단 1개조차 제대로 들어갈 수 없는 상황이라면, 단 상자의 너비는 선언된 너비보다 더 작게 줄어들게 됩니다.

아래 예제에서는 column-width 속성을 200px로 설정했습니다. 컨테이너에 들어갈 수 있는 최대한의 200픽셀짜리 단이 만들어지고, 남은 여분 공간은 각 단에 공평하게 분배됩니다.

<div class="container">
  <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 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: 200px;
}

💡 강사의 보충 설명!
column-width의 이 '최소 너비'처럼 동작하는 특성은 반응형 웹디자인을 할 때 정말 강력한 무기가 됩니다. 별도로 복잡한 미디어 쿼리(Media Query)를 작성하지 않아도, 화면이 좁아지면 자연스럽게 단의 개수가 줄어들고 화면이 넓어지면 단이 늘어나게 되니까요!

단 개수와 너비 모두 지정하기 (Specifying both number and width of columns)

다단 컨테이너에 이 두 가지 속성을 모두 지정하게 되면, column-count는 단의 최대 개수(maximum number of columns) 역할을 하게 됩니다. 즉, 지정한 column-count 개수에 도달할 때까지는 앞에서 설명한 column-width의 동작 방식대로 작동합니다. 하지만 지정된 최대 단 개수에 도달하고 나면, column-width 크기 이상의 단을 더 추가할 공간이 충분히 남아 있더라도 더 이상 단을 새로 그리지 않고 기존 단들 사이에 남는 공간을 균등하게 분배합니다.

두 속성을 함께 사용할 때는 여러분이 column-count에 지정한 값보다 실제 생성되는 단의 개수가 더 적을 수도 있다는 점을 유의하세요.

다음 예제에서는 column-width를 200px로, column-count를 2로 설정해 보았습니다. 만약 공간이 2개 이상의 단을 넣을 만큼 넉넉하더라도, 최대 개수인 2개의 단만 생성됩니다. 반대로 최소 200픽셀씩 2개의 단을 넣기에 공간이 부족하다면 1개의 단만 생성되게 됩니다.

<div class="container">
  <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 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-count: 2;
  column-width: 200px;
}

단 속성을 위한 단축 속성 (Shorthand for column properties)

columns 단축 속성(shorthand)을 사용하면 column-count와 column-width 값을 한 번에 설정할 수 있어요. 길이 단위(예: px, em 등)를 지정하면 그 값은 column-width로 사용되고, 정수(숫자)를 지정하면 그 값은 column-count로 사용됩니다. 스페이스(공백)로 두 값을 띄어쓰기하여 두 속성을 동시에 설정할 수도 있답니다.

아래 CSS는 column-count를 3으로 설정한 첫 번째 예제와 동일한 결과를 보여줍니다.