Multi-column layout/Handling content breaks

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

67/190

안녕하세요! 프론트엔드 개발 강사입니다. 이번에도 다단 레이아웃(Multi-column)에 대한 정말 중요한 개념을 들고 오셨네요!

문서나 기사가 길어지면 자연스럽게 다음 단이나 다음 페이지로 넘어가게 되는데, 이때 그림이 반으로 쪼개지거나 단의 맨 끝에 제목만 덩그러니 남는다면 가독성이 확 떨어지겠죠? 이번 가이드에서는 이런 콘텐츠 끊김(Breaks) 현상을 어떻게 똑똑하게 제어할 수 있는지 배웁니다.

딱딱한 직역 대신 이해하기 쏙쏙 되도록 구어체로 번역해 드리고, 실무에서 제가 직접 겪었던 꿀팁들도 가득 담아드릴 테니 찬찬히 읽어보세요! 😊

다단 레이아웃에서 콘텐츠 끊김(단 나누기) 처리하기 (Handling content breaks in multi-column layout)

다단(multicol) 레이아웃에서 단 박스(column boxes) 사이를 넘어가는 콘텐츠는, 인쇄 매체(paged media, 예: 책이나 PDF)에서 페이지와 페이지 사이를 넘어갈 때와 동일한 방식으로 끊어집니다(breaks). 이 두 가지 상황 모두에서, 우리는 CSS 단편화(CSS fragmentation) 모듈의 속성들을 사용하여 콘텐츠가 어디서, 그리고 어떻게 끊어질지를 제어할 수 있습니다. 이번 가이드에서는 이 단편화(fragmentation)가 다단 컨테이너(multi-column container 또는 줄여서 multicol container) 내부에서 어떻게 작동하는지 알아보겠습니다.

💡 강사의 부연 설명: "단편화(Fragmentation)가 무슨 뜻인가요?"
말이 조금 어렵죠? 쉽게 말해 '조각내기'입니다. 하나의 긴 텍스트나 그림을 한정된 공간(단이나 페이지)에 밀어 넣다 보면 어쩔 수 없이 조각을 내서 다음 칸으로 넘겨야 하잖아요? 이 조각내는 규칙을 정하는 것이 바로 CSS 단편화 모듈이랍니다!

이 문서의 내용

단편화 기본 (Fragmentation basics)
박스 내부의 끊김 (Breaks inside boxes)
박스 이전과 이후의 끊김 (Breaks before and after boxes)
줄 사이의 끊김 (Breaks between lines)
예상대로 작동하지 않을 때 (When things don't work as expected)

단편화 기본 (Fragmentation basics)

CSS 단편화 모듈은 콘텐츠가 단편화 컨테이너(fragmentation containers, 또는 fragmentainers 라고도 부름) 사이에서 어떻게 끊어지는지에 대한 세부 사항을 다룹니다. 반면에 다단 레이아웃(multi-column layout) 모듈은 단의 안쪽이나 단과 단 사이의 끊김을 제어할 수 있는 break-after, break-before, 그리고 break-inside 속성들을 정의하고 있습니다. 다단 레이아웃에서는 각각의 단 박스(column box)가 바로 단편화 컨테이너 역할을 하게 되죠.

하나의 단 박스 안에는 다양한 마크업 요소들이 들어갈 수 있는데, 사실 중간에 내용이 뚝 끊어지면 안 되는 곳들이 참 많습니다. 예를 들어, 이미지의 캡션(설명)이 자기가 설명하는 이미지와 분리되어 다음 단으로 넘어가 버리면 곤란하겠죠. 또한, 단의 맨 끝을 제목(heading)으로 마무리하고 내용은 다음 단으로 넘어가는 것도 시각적으로 이상합니다. 다단 단편화 속성들은 우리가 이런 상황을 어느 정도 통제할 수 있는 방법을 제공합니다.

우리가 끊어짐을 제어하고 싶어 하는 위치는 보통 다음과 같이 다양합니다:

박스 내부의 끊김: 예를 들어 <figure> 요소 내부가 쪼개지는 것.
박스 이전과 이후의 끊김: 방금 전 말씀드린 제목 요소 앞뒤의 경우.
줄 사이의 끊김: 문단의 글줄이 애매하게 잘리는 것.

박스 내부의 끊김 (Breaks inside boxes)

박스 내부에서 콘텐츠가 쪼개지는 것을 제어하려면 break-inside 속성을 사용합니다. 이 속성은 다음의 값들을 가질 수 있어요:

auto
avoid
avoid-page
avoid-column
avoid-region

아래 예제에서는 캡션이 이미지와 떨어져 분리되는 것을 막기 위해 <figure> 요소에 break-inside: avoid를 적용했습니다.

👨‍🏫 강사의 실무 팁! "break-inside: avoid는 실무 깡패입니다"
핀터레스트(Pinterest)처럼 높이가 제각각인 카드들을 예쁘게 쌓아 올리는 '벽돌(Masonry) 레이아웃'을 만들 때 이 다단 레이아웃을 자주 씁니다. 이때 카드 하나에 break-inside: avoid;를 주지 않으면, 카드가 반으로 찢어져서 위쪽 절반은 1단에, 아래쪽 절반은 2단에 표시되는 끔찍한 일이 발생합니다. 꼭 기억해두세요!

(MDN Playground에서 실행해보기)

<div class="container">
  <figure>
    <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)" />
    <figcaption>Balloons</figcaption>
  </figure>
  <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.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

img {
  max-width: 100%;
}
figure {
  margin: 0;
  break-inside: avoid;
}
figcaption {
  font-weight: bold;
  border-bottom: 2px solid #999999;
}
.container {
  column-width: 200px;
}

박스 이전과 이후의 끊김 (Breaks before and after boxes)

break-before와 break-after 속성은 어떤 요소의 바로 앞이나 뒤에서 끊어짐을 제어하는 데 사용됩니다. 이 속성들은 다단 문맥(multicol context)에서 다음과 같은 값들을 취할 수 있습니다:

auto
avoid
avoid-column
column

이 다음 예제에서는 <h2> 요소가 시작되기 전에 무조건 강제로 새로운 단으로 넘어가도록(column break) 만들고 있습니다.

💡 강사의 실무 팁! "새로운 주제는 새로운 단에서!"
책을 읽을 때 새로운 챕터는 항상 새로운 페이지나 단락의 제일 위에서 시작하죠? 디자인적으로 새로운 섹션(예: <h2>)이 등장할 때 break-before: column;을 주시면, 단 중간에 제목이 애매하게 끼어있는 걸 방지하고 항상 새로운 단의 꼭대기에서 깔끔하게 시작하게 만들 수 있습니다.

(MDN Playground에서 실행해보기)

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon.
  </p>
  <h2>My heading</h2>
  <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.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
}

h2 {
  break-before: column;
}

줄 사이의 끊김 (Breaks between lines)

CSS 단편화 모듈의 일부인 orphans (고아)와 widows (과부) 속성 역시 아주 유용해서 꼭 언급하고 넘어가야 합니다. orphans 속성은 조각(fragment, 여기서는 하나의 단)의 맨 마지막에 혼자 남겨지는 텍스트 줄의 최소 개수를 제어합니다. 반면 widows 속성은 조각의 맨 처음에 혼자 시작되는 텍스트 줄의 최소 개수를 제어하죠.

orphans와 widows 속성은 값으로 <integer> (정수)를 받습니다. 이 숫자는 각각 조각의 끝과 시작 부분에 최소한 몇 줄이 함께 붙어있어야 하는지를 나타냅니다. 참고로 이 속성들은 단락(<p>)과 같은 블록 컨테이너 안에서만 작동합니다. 만약 블록이 가진 전체 줄 수가 여러분이 지정한 값보다 적다면, 그 블록 안의 모든 줄은 쪼개지지 않고 통째로 함께 이동하게 됩니다.

아래 예제에서는 단의 맨 아래에 남는 줄의 수를 제어하기 위해 orphans 속성을 사용하고 있습니다. 속성값을 직접 바꿔보시면서 콘텐츠가 어떻게 끊어지는지 그 효과를 관찰해 보세요.

👨‍🏫 강사의 타이포그래피 상식!
이름이 참 독특하죠? 편집 디자인 업계에서 넘어온 용어입니다. 문단이 나뉠 때 단의 맨 끝에 딱 한 줄만 외롭게 남는 걸 '고아(orphan)'라고 하고, 다음 단의 맨 위에 딱 한 줄만 덩그러니 넘어가는 걸 '과부(widow)'라고 부릅니다. 이 둘은 가독성을 해치기 때문에 최소 2줄 이상이 되도록 유지하는 게 정석이랍니다!

(MDN Playground에서 실행해보기)

<div class="container">
  <p>
    Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
    daikon.
  </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.</p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}

.container {
  column-width: 250px;
  orphans: 3;
}

예상대로 작동하지 않을 때 (When things don't work as expected)

만약 여러분이 가진 콘텐츠 양은 적은데 너무 여러 요소에 걸쳐서 끊김을 제어하려고 한다면 어떨까요? 콘텐츠는 결국 어딘가에서는 끊어져야만 공간에 맞춰 들어갈 수 있기 때문에, 항상 여러분이 의도한 결과만을 완벽하게 얻지는 못할 수도 있습니다.

어느 정도까지는 여러분이 사용하는 이런 단편화 속성들이 브라우저에게 "가능하다면 이렇게 좀 끊어줘"라고 요청하는 '제안(suggestion)'에 불과합니다. 의도한 위치에서 깔끔하게 끊어지지 않는다면 화면이 다소 지저분해 보일 수는 있겠지만, 여전히 사용자들은 끊긴 콘텐츠를 문제없이 읽을 수 있으니 너무 걱정하지 않으셔도 됩니다.

💡 강사의 조언: "브라우저는 콘텐츠를 숨기는 걸 제일 싫어합니다"
브라우저의 최우선 목적은 사용자에게 텍스트를 보여주는 것입니다. 공간이 너무 좁거나 레이아웃이 꼬일 때, 브라우저는 여러분이 설정한 break-inside 규칙을 무시하고서라도 어떻게든 텍스트를 우겨넣어 보여주려고 할 거예요. 그래서 반응형 디자인을 할 땐 화면 크기를 줄여가며 테스트해보는 게 정말 중요합니다!