CSS 다단 — column-gap · column-rule 완전 정리

 

 

Web Development · CSS Multi-column

CSS 다단 꾸미기 —
column-gap · column-rule

컬럼 사이 간격과 구분선으로 신문 같은 가독성 만들기

시작 오늘 분석할 코드

컬럼 3개 + 컬럼 사이 간격(column-gap) 20px + 점선 구분선(column-rule)까지 적용한 다단 레이아웃이다. 신문이나 잡지에서 흔히 보이는 형태.

.multi { column-count: 3; column-gap: 20px; /* 컬럼 사이 간격 */ column-rule: 2px dotted #000; /* 사이 구분선 */ text-align: justify; /* 양쪽 정렬 */ }

실제 출력 미리보기

건강에 좋은 식품 - Super Food

코코넛 오일

파나마에서는 "한 컵이면 모든 병이 낫는다"고 할 정도로 효능이 뛰어나다. 중사슬 지방산이 콜레스테롤에 나쁜 영향을 주지 않는다.

아보카도

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

케일

최고의 녹황색 채소. 베타카로틴과 엽록소가 풍부해 항암효과가 뛰어나다.

블루베리

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

아몬드

오메가3, 섬유소, 비타민 E가 풍부. 식욕 감소·세로토닌 분비 증가에도 도움.

용어 용어 정리

column-gap컬럼과 컬럼 사이 빈 공간 (가로 간격)

column-rule컬럼 사이의 세로 구분선

text-align: justify양쪽 정렬 — 컬럼 가장자리가 깔끔하게 맞음

단축 표기column-rule: 두께 종류 색

분리 속성column-rule-width / -style / -color로 따로 지정 가능

---

1 column-gap — 컬럼 사이 숨통

간격이 없으면 어떻게 되나?

column-gap이 없으면 기본값(1em, 보통 16px)이 적용된다. 0으로 명시하면 컬럼들이 딱 붙어서 어디까지가 어느 컬럼인지 알아보기 어렵다.

column-gap: 0 → 컬럼이 딱 붙음, 답답 column-gap: 20px → 적절한 숨통, 가독성 좋음 column-gap: 60px → 너무 떨어져 보임

---

2 column-rule — 신문 같은 구분선

column-rule 한 줄 = border 한 줄

column-rule의 문법은 border와 똑같다. 두께 / 종류 / 색 순서로 한 줄에 적는다.

column-rule: 2px dotted #000; ─┬─ ──┬─── ─┬── │ │ └─ 색 │ └─ 종류 (solid, dotted, dashed, double…) └─ 두께

속성	역할
column-rule-width	구분선 두께
column-rule-style	구분선 종류 (solid / dotted / dashed / double…)
column-rule-color	구분선 색
column-rule	위 3개를 한 줄로 단축

※ rule은 gap의 한가운데에 그려진다

• column-rule은 column-gap의 가운데를 차지하므로 추가 공간을 잡지 않는다
• 그래서 두께를 늘려도 컬럼 폭은 변하지 않음
• 단, 두께가 gap보다 크면 양쪽 컬럼을 침범함 → gap을 충분히 두기

---

3 text-align: justify — 양쪽 맞추기

다단 레이아웃에서는 justify를 거의 항상 같이 쓴다. 컬럼 양 끝이 깔끔하게 맞춰져야 신문 같은 인상이 나기 때문.

왼쪽 정렬 (기본)

[…………………………]
[…………………………………]
[…………………]
오른쪽이 들쭉날쭉

justify

[…………………………………]
[…………………………………]
[…………………………………]
양쪽이 깔끔히 맞음

---

반응형

4 자주 하는 실수

실수	증상	해결
column-rule만 적고 gap 없음	구분선이 컬럼에 끼어들거나 너무 가까움	gap을 rule 두께의 5~10배로
justify로 글자 사이 공백 넓어짐	한 줄에 단어 적으면 어색	좁은 컬럼에서는 justify 빼거나 hyphens 사용
모바일에서 컬럼이 너무 좁음	한 줄에 한 단어만	media query로 1컬럼 전환
column-rule 색이 배경과 비슷	구분선이 안 보임	대비되는 색으로

---

핵심 한 줄 요약

column-gap컬럼 사이 가로 간격 (보통 20~30px)

column-rule컬럼 사이 구분선 — 문법은 border와 동일

rule은 gap 가운데두께 늘려도 컬럼 폭에 영향 없음

justify양쪽 정렬 — 다단 레이아웃의 기본 짝꿍

신문 분위기column-count + gap + rule + justify = 표준 조합

Tags

#column-gap #column-rule #multi-column #CSS다단 #구분선 #컬럼간격 #rule-style #rule-color #rule-width #columns #justify #신문레이아웃 #CSS #HTML #박스모델 #웹개발 #티스토리

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

column-gap, column-rule, multi-column, CSS다단, 구분선, 컬럼간격, rule-style, rule-color, rule-width, columns, justify, 신문레이아웃, CSS, HTML, 박스모델, 웹개발, 티스토리