Multi-column layout/Handling overflow

김동현·2026년 3월 21일
CSSdocs

mdn 학습 번역 - CSS

목록 보기
66/190

안녕하세요! 오늘 함께 공부해 볼 MDN 공식 문서는 앞서 배운 다단 레이아웃(Multi-column layout)을 사용할 때 빼놓을 수 없는 핵심 주제, 바로 넘침(Overflow) 현상을 다루는 방법입니다.

웹 문서를 만들다 보면 텍스트나 이미지가 우리가 의도한 영역을 벗어나서 레이아웃이 깨지는 경우가 종종 발생하죠. 프론트엔드 개발자라면 이런 예외 상황들을 우아하게 처리할 수 있어야 합니다. 이번 문서를 통해 단(Column) 안에서 콘텐츠가 넘칠 때 어떻게 처리해야 하는지 완벽하게 마스터해 봅시다!

다단 레이아웃에서 넘침(overflow) 처리하기 (Handling overflow in multi-column layout)

이번 가이드에서는 다단(multicol) 레이아웃을 사용할 때, 단 상자(column boxes) 내부에서 내용이 넘치는 경우와 컨테이너에 들어갈 수 있는 양보다 더 많은 콘텐츠가 있을 때 발생하는 넘침(overflow) 현상을 어떻게 다뤄야 하는지 살펴보겠습니다.

이 문서에서 다룰 내용 (In this article)

단 상자 내부에서의 넘침 (Overflow inside column boxes)

아이템의 크기가 단 상자(column box)보다 클 때 넘침(overflow) 상황이 발생합니다. 예를 들어, 단 안에 있는 이미지가 column-width 값보다 넓거나, column-count로 지정한 단의 개수를 기준으로 계산된 단의 너비보다 넓을 때 이런 일이 일어날 수 있습니다.

이런 상황에서는 콘텐츠가 단 상자에 의해 잘려(clipped) 나가지 않고, 눈에 보이도록 다음 단으로 삐져나와(overflow) 흘러야 합니다.

<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>
  <img
    alt="A close-up of two hot air balloons being inflated."
    src="[https://mdn.github.io/shared-assets/images/examples/balloons3.jpg](https://mdn.github.io/shared-assets/images/examples/balloons3.jpg)" />
  <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: 250px;
}

이 예제는 다음과 같이 렌더링 됩니다.

두 개의 텍스트 단이 있습니다. 왼쪽 단에는 단보다 넓은 사진이 들어있죠. 이 이미지는 두 번째 단으로 영역을 확장하여, 오른쪽 단의 텍스트 뒤에 겹쳐서 나타납니다. 오른쪽 단의 텍스트 흐름 자체는 튀어나온 사진의 영향을 받지 않지만, 시각적인 형태는 명백하게 영향을 받게 됩니다.

만약 이미지가 단 상자에 딱 맞게 들어가도록 만들고 싶다면, max-width: 100%를 설정해 보세요. 이렇게 하면 이미지가 자신의 컨테이너(이 경우에는 단 상자)를 넘어서 커지는 것을 막아줍니다.

💡 강사의 실무 팁!
img { max-width: 100%; height: auto; } 조합은 반응형 웹을 구축할 때 이미지가 컨테이너를 이탈하여 레이아웃을 망가뜨리는 것을 막아주는 마법의 코드입니다. 실무에서도 글로벌 스타일이나 리셋 CSS에 기본적으로 넣어두고 시작하는 경우가 아주 많으니 꼭 기억해 두세요!

<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>
  <img
    alt="A close-up of two hot air balloons being inflated."
    src="[https://mdn.github.io/shared-assets/images/examples/balloons3.jpg](https://mdn.github.io/shared-assets/images/examples/balloons3.jpg)" />
  <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: 250px;
}
img {
  max-width: 100%;
}

업데이트된 렌더링 결과는 다음과 같습니다. (max-width: 100%가 적용되어 사진이 왼쪽 단 상자 너비에 맞게 쏙 들어간 것을 확인할 수 있습니다.)

들어갈 공간보다 단이 더 많은 경우 (More columns than will fit)

넘치는 단을 어떻게 처리할지는 미디어가 인쇄물처럼 분할된(fragmented) 매체인지, 아니면 웹 페이지처럼 연속된(continuous) 매체인지에 따라 달라집니다.

  • 조각난(fragmented) 매체에서는 한 조각(예를 들어, 페이지 한 장)이 단으로 가득 차게 되면, 단들이 새로운 페이지로 넘어가서 다시 화면을 채우게 됩니다.
  • 연속된(continuous) 매체에서는 다단 컨테이너에 높이(height)가 설정되어 있을 때, 기본적으로 단들이 인라인 방향(가로 방향)으로 넘쳐흐릅니다. 웹에서는 이것이 가로 스크롤바가 생긴다는 것을 의미하죠. 이러한 기본 동작은 column-height와 column-wrap 속성을 사용하여 단 줄바꿈(column wrapping)을 강제로 적용함으로써 덮어쓸 수 있습니다.

아래 예제는 연속된 매체에서 나타나는 기본 넘침 동작을 보여줍니다. 다단 컨테이너에 height가 설정되어 있고, 주어진 공간 안에 단을 만들기에는 텍스트가 너무 많습니다. 그 결과, 컨테이너 밖으로 새로운 단들이 생성됩니다.

<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;
  height: 180px;
  border: 2px dashed;
}

가로로 스크롤하여 컨테이너 영역(점선 테두리)을 넘쳐 흐른 단들을 확인해 보세요.

세로 미디어 쿼리 사용하기 (Using vertical media queries)

웹에서 다단을 사용할 때 발생하는 한 가지 문제점은, 만약 단의 높이가 뷰포트(화면 표시 영역)보다 길어지면 사용자가 글을 읽기 위해 위아래로 계속 스크롤을 해야 한다는 점입니다. 이는 사용자 경험(UX) 측면에서 좋지 않습니다. 이를 방지하는 한 가지 방법은 세로 공간이 충분하다고 확신할 때만 단 속성을 적용하는 것입니다.

💡 강사의 실무 UX 팁!
프론트엔드 개발의 핵심은 결국 사용자가 화면을 편안하게 보도록 만드는 것입니다. 글을 읽다가 칼럼의 맨 위로 가기 위해 계속 마우스를 올렸다 내렸다 해야 한다면 정말 피곤하겠죠? 이런 섬세한 미디어 쿼리 사용은 여러분의 개발 센스를 한 단계 높여주는 아주 좋은 방법입니다.

아래 예제에서는 단 속성을 적용하기 전에 충분한 세로 공간이 있는지 확인하기 위해 height 기반의 @media 쿼리(media query)를 사용했습니다.

<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;
}

@media (height >= 300px) {
  .container {
    column-width: 200px;
  }
}

이 예제는 뷰포트 높이가 300px 이상일 때만 다단 레이아웃이 적용됩니다.

다단에서 단 줄바꿈 사용하기 (Using column wrapping for multicol)

column-height와 column-wrap 속성을 사용하면 생성되는 단에 고정된 높이를 설정하고, 넘치는 잉여 단들을 블록 방향(세로 방향)의 추가적인 줄(row)로 강제로 넘어가게 만들 수 있습니다. 가로 쓰기 모드(horizontal writing mode) 콘텐츠의 경우, 이 방법을 사용하면 가로로 스크롤해야 하는 단일 줄 대신에 세로로 스크롤할 수 있는 단들의 여러 줄이 생성됩니다. 예제를 통해 살펴보겠습니다.

HTML에는 기본적인 텍스트 콘텐츠가 포함되어 있는데, 코드의 간결성을 위해 여기서는 숨겨 두었습니다.

<p>
  This is a bunch of text split into three columns using the CSS
  <code>column-count</code> property with a value of <code>3</code>. It also
  includes a <code>column-height</code> value of <code>95vh</code>. The
  <code>column-wrap</code> value is set to its initial value, <code>auto</code>;
  when a <code>column-height</code> value is included,
  <code>column-wrap: auto</code> resolves to <code>wrap</code>, which allows the
  columns to wrap onto multiple rows. The text is equally distributed over the
  columns, and placed into multiple rows.
</p>

<p>
  The <code>column-height</code> and <code>column-wrap</code> properties were
  introduced in
  <a href="[https://drafts.csswg.org/css-multicol-2/](https://drafts.csswg.org/css-multicol-2/)"
    >CSS Multi-column Layout Module Level 2</a
  >.
</p>

이제 이 콘텐츠에 스타일을 입혀보겠습니다. 가장 주목할 점은 뷰포트를 채우기 위해 <body> 요소의 column-count를 2로, column-height를 95vh로 설정했다는 것입니다. 여기서 column-wrap을 wrap으로 명시적으로 설정할 필요는 없습니다. column-height가 <length> 단위의 값으로 설정되면 column-wrap의 초깃값(auto)이 자동으로 wrap으로 해석되기 때문이며, 이것이 보통 여러분이 원하시는 동작일 것입니다.

body {
  font-size: 1.3em;
  line-height: 1.5;
  column-count: 3;
  column-height: 95vh;
}
@supports not (column-height: 5em) {
  body::before {
    content: "Your browser does not support the 'column-height' property.";
    background-color: wheat;
    position: fixed;
    inset: 40% 0;
    height: fit-content;
    text-align: center;
    padding: 1rem 0;
  }
}

이 예제는 다음과 같이 렌더링 됩니다. (지원하지 않는 브라우저의 경우 화면 중앙에 경고 메시지가 표시됩니다.)

💡 강사의 브라우저 호환성 팁!
위의 CSS 코드에서 사용된 @supports 문법 보이시나요? CSS의 최신 기능을 사용할 때, 해당 기능을 지원하지 않는 브라우저 사용자들을 위해 폴백(fallback) 화면이나 메시지를 제공하는 아주 훌륭한 방법입니다. 현업에서도 종종 쓰이는 테크닉이니 눈여겨보세요.

다음 단계 (Next steps)

이 시리즈의 마지막 가이드에서는 다단 레이아웃에서 단편화(fragmentation)가 어떻게 동작하는지를 살펴보며, 단 사이에서 콘텐츠가 끊어지는 방식을 우리가 어떻게 제어할 수 있는지 알아보겠습니다.

MDN 개선에 참여하기 (Help improve MDN)

이 페이지가 도움이 되셨나요?

기여하는 방법 알아보기 (Learn how to contribute)

이 페이지는 MDN 기여자들에 의해 2026년 3월 4일에 마지막으로 수정되었습니다 (MDN contributors).

profile
김동현
프론트에_가까운_풀스택_개발자
이전 포스트

Multi-column layout/Spanning and balancing columns

다음 포스트

Multi-column layout/Handling content breaks

0개의 댓글