Multi-column layout/Styling columns

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

63/190

안녕하세요! 프론트엔드 개발 강사입니다. MDN 공식 문서를 통해 CSS를 깊이 있게 공부하시려는 모습이 정말 멋지네요! 영문 문서라 조금 답답하셨을 텐데, 제가 딱딱한 직역 대신 이해하기 쉬운 구어체로 전부 번역해 드릴게요. 물론 원본에 있는 내용은 하나도 빠짐없이 담았고, 실무에서 알아두면 좋은 강사의 꿀팁과 부연 설명도 팍팍 추가해 두었으니 찬찬히 읽어보세요! 😊

단 스타일링하기 (Styling columns)

👨‍🏫 강사의 부연 설명:
다단 레이아웃(Multi-column layout)은 신문 기사처럼 콘텐츠를 여러 단으로 나누어 보여줄 때 아주 유용해요. 이 문서에서는 나누어진 '단(Column)'들을 어떻게 예쁘게 꾸밀 수 있는지 배웁니다.

다단(multi-column) 컨테이너 안에 생성된 단 박스(column boxes)들은 '익명 박스(anonymous boxes)'이기 때문에, 개별적인 단에 직접 스타일을 지정하는 것은 불가능해요. 하지만 우리는 단과 단 사이의 간격(gap)이나 컨테이너 전반에 들어가는 구분선(rule)의 스타일은 변경할 수 있답니다. 이 가이드에서는 단 사이의 간격과 구분선 스타일 규칙을 어떻게 변경하는지 친절하게 설명해 드릴게요.

💡 강사의 실무 팁! "익명 박스가 뭔가요?"
익명 박스(Anonymous boxes)란 우리가 HTML에 <div>나 <span>처럼 직접 태그를 작성하지 않았지만, 브라우저의 CSS 렌더링 엔진이 레이아웃을 계산하기 위해 내부적으로 (가상으로) 만들어내는 박스를 말해요. HTML 요소가 아니기 때문에 class나 id를 줄 수 없죠. 그래서 "첫 번째 단 배경은 빨간색, 두 번째 단은 파란색"처럼 각각을 콕 집어서 꾸미는 것이 불가능한 거랍니다!

단 간격 (Column gaps)

단 사이의 간격은 column-gap 또는 gap 속성을 사용해서 조절할 수 있어요. column-gap 속성은 다단 레이아웃(multi-column layout) 모듈에서 정의되었고, gap 속성은 박스 정렬(box alignment) 모듈에서 정의되었죠. gap은 CSS 그리드 레이아웃(CSS grid layout)이나 CSS 플렉스박스 레이아웃(CSS flexible box layout)을 포함해서 간격을 지원하는 모든 레이아웃의 박스 사이 간격을 정의하기 위해 만들어진 통합 속성이랍니다.

column-gap의 초기 기본값은 1em이에요. 이 기본값 덕분에 단 안의 글자들이 서로 딱 달라붙어서 뭉개지는 걸 막아주죠. 다른 레이아웃 방식(Flex나 Grid)에서도 column-gap은 gap과 동일한 의미로 지원되지만, 그쪽에서는 초기값이 0이라는 차이가 있습니다. normal이라는 키워드 값을 사용하면 column-gap을 다시 이 초기값으로 설정할 수 있어요.

💡 강사의 실무 팁! column-gap vs gap
예전에는 다단 레이아웃에선 column-gap을, Grid에선 grid-gap을 썼어요. 하지만 최근 CSS 트렌드에서는 이 모든 간격을 그냥 gap이라는 하나의 속성으로 통일해서 사용하는 추세입니다. 실무 프로젝트에서도 호환성 문제가 없는 모던 브라우저 환경이라면 깔끔하게 gap 속성 하나를 사용하는 것을 강력히 추천해요!

간격은 어떠한 <length> (길이) 값이라도 사용해서 변경할 수 있어요. 아래의 예제에서는 column-gap을 40px로 설정해보았습니다.

(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.
  </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;
  column-gap: 40px;
}

column-gap에 허용되는 값은 <length-percentage>입니다. 즉, 퍼센트(%) 값도 사용할 수 있다는 뜻이죠! column-gap에 퍼센트 값을 주면, 전체 다단 컨테이너의 너비를 기준으로 그 비율만큼 간격이 계산됩니다.

단 구분선 (Column rules)

CSS 스펙에서는 단 사이에 선을 긋기 위해 column-rule-width (선 두께), column-rule-style (선 스타일), 그리고 column-rule-color (선 색상) 속성들을 정의하고 있어요. 그리고 이 세 가지를 한 번에 작성할 수 있는 단축 속성(shorthand)인 column-rule도 제공합니다. 이 속성들은 우리가 흔히 아는 border 속성들과 아주 똑같이 작동해요. 유효한 border-style에 들어가는 아무 <line-style> (예: solid, dashed, dotted 등) 값이나 column-rule-style로 똑같이 사용할 수 있답니다.

이 속성들은 다단 컨테이너 역할을 하는 부모 요소에 적용됩니다. 그래서 모든 단이 동일한 형태의 구분선을 가지게 돼요. 참고로 이 구분선은 오직 단과 단 '사이'에만 그려지며, 컨테이너의 바깥쪽 가장자리에는 그려지지 않습니다. 또한 내용(content)이 들어있는 단 사이에만 그려진다는 점도 기억해두세요.

다음 예제에서는 세부 속성(longhand)들을 각각 사용해서, 색상은 rebeccapurple이고 두께는 5px인 점선(dotted) 형태의 구분선을 만들어보았어요.

(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.
  </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;
  column-rule-width: 5px;
  column-rule-style: dotted;
  column-rule-color: rebeccapurple;
}

⚠️ 강사의 중요 팁! 구분선은 공간을 차지하지 않습니다!
여기서 아주 중요한 특징이 하나 나옵니다. 단 구분선(column-rule) 자체는 공간(너비)을 전혀 차지하지 않아요! 즉, 구분선을 아주 두껍게 그린다고 해서 그 선이 단을 양옆으로 밀어내고 자기 자리를 차지하는 게 아니랍니다. 그저 단 사이의 간격(gap) 위에 겹쳐서(overlay) 그려질 뿐이에요. 이게 무슨 뜻이냐고요? 선 두께가 column-gap보다 두꺼워지면 선 밑으로 글자가 깔려버릴 수 있다는 얘기예요!

아래의 예제를 보실까요? 이 예제에서는 단 간격(gap)은 10px인데 구분선(rule)은 무려 40px로 아주 두껍게 설정했어요. 결과적으로 구분선이 단 안에 있는 내용물 아래로 깔려버리게 된답니다. 구분선 양옆으로 적절한 여백을 확보하려면, column-gap을 구분선 두께인 40px보다 훨씬 크게 설정해 주어야 해요.

(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.
  </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;
  column-gap: 10px;
  column-rule: 40px solid rebeccapurple; /* 여기서 단축 속성을 썼네요! */
}

다음 단계 (Next steps)

이번 글에서는 단 박스(column boxes)들의 스타일을 입히는 현재 가능한 모든 방법들에 대해 자세히 알아보았어요. 다음 가이드에서는 컨테이너 내부에 있는 요소가 모든 단을 가로지르도록(span across all columns) 만드는 방법에 대해 살펴볼 예정입니다.