CSS 다단 — column-count 완전 정리

 

 

Web Development · CSS Multi-column

CSS 다단 레이아웃 —
column-count로 신문처럼 나누기

긴 글을 여러 컬럼으로 자동 분할 — 신문·잡지 같은 가독성 패턴

시작 오늘 분석할 코드

한 덩어리의 글을 3개의 컬럼으로 자동 분할해주는 가장 단순한 다단 레이아웃 코드다. 텍스트가 어느 컬럼이 어디서 끝나야 할지는 브라우저가 자동으로 균등 분배한다.

<style> .multi { -webkit-column-count: 3; /* Safari/Chrome 옛날 호환 */ -moz-column-count: 3; /* Firefox 옛날 호환 */ column-count: 3; /* 표준 */ } </style> <div class="multi"> <p>코코넛 오일…</p> <p>블루베리…</p> <p>아몬드…</p> </div>

실제 출력 미리보기

건강에 좋은 식품 - Super Food

코코넛 오일: 남미 파나마에서는 "코코넛오일 한 컵이면 모든 병이 낫는다"라고 이야기할 정도로 효능이 뛰어나다. 코코넛 오일에 들어있는 중사슬 지방산은 콜레스테롤 수치에 나쁜 영향을 주지 않는 건강한 지방산이다.

블루베리: 우리 몸이 산화하는 현상을 막아주는 '항산화 물질'이 가장 많은 식품으로 알려졌다. '안토시아닌'이라는 물질은 시력 향상에 뛰어난 효과가 있다.

아몬드: 혈관질환에 좋은 오메가3, 섬유소, 비타민 E가 풍부해 항산화 효과가 높으며 콜레스테롤 수치를 낮추는 L-아르기닌 등의 영양소가 들어있다.

용어 용어 정리

column-count컬럼 개수를 지정 — 너비는 자동 분할

다단 레이아웃한 글을 여러 세로 칸으로 나눠 배치

-webkit-Safari·옛날 Chrome용 벤더 프리픽스

-moz-옛날 Firefox용 벤더 프리픽스

자동 균등 분배텍스트 길이에 맞춰 각 컬럼 높이를 비슷하게

justify양쪽 정렬 — 다단과 잘 어울림

---

1 column-count는 무엇을 하나?

column-count: 3은 "이 박스의 콘텐츠를 3개의 세로 컬럼으로 나눠라"는 명령이다. 박스의 너비를 3등분하고, 그 안의 텍스트를 위에서부터 차곡차곡 채워 한 컬럼이 차면 다음 컬럼으로 넘긴다.

column-count 없음: [───── 한 컬럼 전체 폭 ─────] 코코넛 오일… 블루베리… 아몬드… column-count: 3: [코코넛 오일…] [블루베리…] [아몬드…] 컬럼 1 컬럼 2 컬럼 3

※ 자동 균등 분배

• 브라우저가 각 컬럼 높이를 비슷하게 맞추려고 노력함
• 한 컬럼이 가득 차면 다음 컬럼으로 넘어가는 게 아니라, 전체 길이를 컬럼 수로 나눠 균등하게 배치
• 그래서 마지막 컬럼이 짧지 않고 비슷하게 채워짐

---

2 벤더 프리픽스 — 왜 같은 코드를 3번 쓰나?

같은 속성을 -webkit-, -moz-, 그리고 프리픽스 없이 3번 쓴 이유는 옛날 브라우저 호환이다. 다단 레이아웃이 표준이 되기 전, 각 브라우저가 자기 prefix로 먼저 구현했었다.

프리픽스	대상 브라우저	지금
-webkit-	옛날 Safari, Chrome	최신 버전은 표준 사용 — 거의 불필요
-moz-	옛날 Firefox	최신 버전은 표준 사용 — 거의 불필요
프리픽스 없음	표준	모든 최신 브라우저

※ 2024년 이후는 IE 종료, 모든 모던 브라우저가 표준 지원 → column-count: 3 한 줄이면 충분. 옛 코드를 정리할 때 prefix를 빼도 됨.

---

3 column-count vs column-width

다단 레이아웃을 만드는 방법은 두 가지다. 어느 쪽을 쓰는지에 따라 화면이 좁아질 때 동작이 다르다.

column-count: 3

"무조건 3컬럼으로". 화면이 좁아도 3개 유지 → 모바일에서 글자가 좁아짐

column-width: 200px

"한 컬럼 200px 보장". 화면이 넓으면 4·5컬럼, 좁으면 1컬럼으로 자동 변환 → 반응형에 유리

---

반응형

4 자주 하는 실수

실수	증상	해결
모바일 고려 안 함	좁은 화면에서 글자가 매우 좁아짐	media query로 1컬럼 전환 또는 column-width 사용
이미지가 컬럼을 가로지름	이미지가 잘리거나 어색	이미지에 break-inside: avoid
제목이 컬럼 끝에 끼어 있음	제목 + 내용이 분리	제목에 break-after: avoid
벤더 프리픽스만 쓰고 표준 누락	최신 브라우저에서 동작 안 할 수도	표준은 항상 마지막에 추가

---

핵심 한 줄 요약

column-count컨테이너를 N개 컬럼으로 자동 분할

균등 분배텍스트 길이를 N으로 나눠 컬럼 높이 비슷하게

vs column-widthcount는 고정 N개 / width는 화면 폭에 따라 가변

벤더 프리픽스-webkit-/-moz- 은 레거시 — 요즘은 표준 한 줄

반응형모바일에서는 1컬럼으로 줄이는 미디어 쿼리 권장

Tags

#column-count #multi-column #CSS다단 #컬럼개수 #columns #신문레이아웃 #매거진 #balance #벤더프리픽스 #반응형 #column-width #CSS #HTML #박스모델 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

column-count, multi-column, CSS다단, 컬럼개수, columns, 신문레이아웃, 매거진, balance, 벤더프리픽스, 반응형, column-width, CSS, HTML, 박스모델, 웹개발, 티스토리