CSS 다단 — break-before:column 완전 정리

 

 

Web Development · CSS Multi-column

CSS 다단 — break-before:column으로
제목마다 새 컬럼 시작하기

자동 분배가 어색할 때 "여기서부터 새 컬럼"을 강제로 지정

시작 오늘 분석할 코드

4개 컬럼 + 각 h3 제목이 새 컬럼에서 시작하도록 강제한 코드. 자동 분배가 "제목과 본문을 따로 떼는" 어색한 결과를 줄 때 쓰는 기법.

.multi { column-count: 4; column-rule: 2px dotted #000; text-align: justify; } .multi h3 { break-before: column; /* 이 요소 앞에서 컬럼 끊고 새로 시작 */ }

실제 출력 미리보기 (제목마다 새 컬럼)

건강에 좋은 식품 - Super Food

코코넛 오일

중사슬 지방산이 콜레스테롤에 나쁜 영향을 주지 않는 건강한 지방. 라우르산이 풍부.

아보카도

오메가 3와 단백질, 비타민 E가 풍부. 콜라겐 합성을 도와 피부 탄력을 높인다.

케일

최고의 녹황색 채소. 베타카로틴과 엽록소가 풍부.

블루베리

안토시아닌이 시력 향상에 효과적. 폴리페놀이 지방세포를 녹여준다.

용어 용어 정리

break-before이 요소 앞에서 컬럼·페이지를 끊음

break-after이 요소 뒤에서 끊음

break-inside이 요소 안에서 끊지 못하게

value: column새 컬럼에서 시작

value: page새 인쇄 페이지에서 시작 (print용)

value: avoid가능하면 끊지 말 것

---

1 왜 break-before가 필요한가?

다단 레이아웃에서 브라우저는 각 컬럼 높이를 비슷하게 만들려고 텍스트를 자동 분배한다. 이 방식은 일반 본문엔 좋지만, 제목과 그 아래 첫 단락이 다른 컬럼으로 떨어지는 경우가 종종 생긴다.

자동 분배 (어색): [코코넛 오일 ] [본문… ] [아보카도 ] [본문… ] [본문 첫 줄… ] [… 아보] [본문… 블] [본문… ] ↑ 제목이 컬럼 끝에 끼어 있음 break-before: column 적용: [코코넛 오일 ] [아보카도 ] [케일 ] [블루베리 ] [본문 전체 ] [본문 전체 ] [본문 전체 ] [본문 전체 ]

---

2 break-before 값 종류

값	의미
auto	기본 — 브라우저가 알아서 분배
avoid	가능하면 이 앞에서 끊지 말 것
column	새 컬럼에서 시작
page	새 페이지에서 시작 (인쇄)
avoid-column	컬럼만 안 끊음
avoid-page	페이지만 안 끊음

---

3 break-before vs break-after vs break-inside

break-before

제목 앞에서 새 컬럼 시작 → 제목이 컬럼 맨 위로

break-after

제목 뒤에서 끊기 → 제목 다음 본문이 새 컬럼

※ 실무 패턴

• h3 { break-after: avoid; } — 제목 바로 뒤에서 컬럼 끊지 말기 (제목 + 첫 단락 같은 컬럼)
• img { break-inside: avoid; } — 이미지가 두 컬럼에 걸쳐 잘리지 않게
• blockquote { break-inside: avoid; } — 인용문이 끊기지 않게

---

4 옛날 page-break vs 새 break

옛날 코드에는 page-break-before, page-break-after가 있었다. 인쇄 전용이었지만 현재는 break-*로 통합됐다.

옛날	현재 (CSS3 Fragmentation)
page-break-before: always	break-before: page
page-break-after: avoid	break-after: avoid
page-break-inside: avoid	break-inside: avoid

---

반응형

5 자주 하는 실수

실수	증상	해결
모든 h에 break-before	첫 제목도 새 컬럼 → 빈 컬럼 발생	:not(:first-child) 또는 :first-child에서 break: auto
제목 개수보다 컬럼 적음	일부 제목은 정상 분배	제목 수 = 컬럼 수가 이상적
제목 수가 컬럼보다 많음	같은 컬럼에 제목 둘이 들어감	제목별 1컬럼 보장 어려움 — 수동 조정
이미지가 두 컬럼에 걸침	이미지가 잘림	break-inside: avoid

---

핵심 한 줄 요약

break-before이 요소 앞에서 컬럼·페이지를 끊고 새로 시작

column 값다단 레이아웃에서 새 컬럼 강제

avoid제목·이미지·인용 등이 끊기지 않게

break-inside: avoid이미지·블록이 두 컬럼에 걸치지 않게

옛 page-break-*현재 break-*로 통합 — 컬럼·페이지 모두 처리

Tags

#break-before #column #page-break #break-inside #avoid #multi-column #CSS다단 #컬럼끊기 #columns #매거진 #인쇄레이아웃 #CSS #HTML #박스모델 #웹개발 #티스토리

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

break-before, column, page-break, break-inside, avoid, multi-column, CSS다단, 컬럼끊기, columns, 매거진, 인쇄레이아웃, CSS, HTML, 박스모델, 웹개발, 티스토리