column-rule-width
멀티 컬럼 레이아웃에서 컬럼 사이에 그려지는 구분선(rule)의 두께를 설정합니다. 구분선은 컬럼 간격 한가운데에 그려지며, column-rule-style이 지정되어야 비로소 보입니다.
클래스 패턴
| 패턴 | 예시 | CSS |
|---|---|---|
| crw{N}px | crw1px | column-rule-width: 1px |
| crw{N}px | crw2px | column-rule-width: 2px |
| crw{N}px | crw4px | column-rule-width: 4px |
시각 데모
이 데모는 가장 흔한 함정을 그대로 보여줍니다. 위 블록에는 crw4px가 걸려 있지만 선이 보이지 않습니다.
crw4px only
선이 없습니다. column-rule-style이 지정되지 않았기 때문입니다.
what a 4px rule looks like
테두리로 흉내 낸 4px 구분선입니다. style만 지정하면 위 블록도 이렇게 보입니다.
<!-- Width alone paints nothing: column-rule-style defaults to none -->
<div class="cw16rem cg4rem crw4px">...</div>
<!-- What the rule would look like, faked with a border -->
<div class="df gap4rem">
<div class="fg1 fb0 br4pxsolid38BDF8 pr4rem">...</div>
<div class="fg1 fb0">...</div>
</div>클래스별 상세
crw1pxcolumn-rule-width: 1px
가장 흔한 두께입니다. 본문처럼 글자가 촘촘한 다단 레이아웃에서는 1px 선이 단을 구분하면서도 시선을 뺏지 않습니다.
<!-- Hairline divider, the usual choice for dense text -->
<div class="cw20rem cg4rem crw1px">
<p>Column rule width is measured in the gap, not added to it.</p>
</div>crw2pxcolumn-rule-width: 2px
글자 크기가 큰 레이아웃에서 1px이 너무 가늘어 보일 때 씁니다. 고해상도 화면에서는 2px도 여전히 가는 선으로 읽힙니다.
<!-- Slightly heavier divider for larger type -->
<div class="cw24rem cg4rem crw2px">
<p>A 2px rule still reads as a hairline on high-DPI screens.</p>
</div>crw4pxcolumn-rule-width: 4px
잡지·신문 느낌의 굵은 구분선입니다. 선이 굵을수록 column-gap도 함께 넉넉하게 잡아야 글자가 선에 붙어 보이지 않습니다.
<!-- Editorial divider. Keep the gap comfortably wider than the rule -->
<div class="cw28rem cg4rem crw4px">
<p>A 4px rule needs a generous column-gap to breathe.</p>
</div>실전 예시
column-rule-width는 column-rule-style과 함께 사용해야 선이 보입니다. 축약형 column-rule로 한 번에 지정하는 것이 일반적입니다.
<!-- 1px divider -->
<div class="cw200px crw1px cg2rem">
<p>A 1px divider is displayed between columns.</p>
<p>column-rule-style must also be specified.</p>
</div>
<!-- Thick divider -->
<div class="cw200px crw4px cg2rem">
<p>A 4px thick divider.</p>
<p>Can be used for newspaper-style layouts.</p>
</div>각주나 참고문헌 블록처럼 정보 밀도가 높은 영역에서 굵은 구분선이 특히 잘 어울립니다.
<!-- Newspaper-style footnote block. The gap is wide enough that a
4px rule sits in the middle without crowding either column. -->
<section class="cw24rem cg4rem crw4px maxw96rem mxa">
<h3 class="fs2rem fw700 cFAFAFA mb16px">References</h3>
<p class="fs13px c71717A lh1-8 mb16px">... entry one ...</p>
<p class="fs13px c71717A lh1-8 mb16px">... entry two ...</p>
<p class="fs13px c71717A lh1-8 mb16px">... entry three ...</p>
</section>팁 / 주의사항
column-rule-style 필수
width만 지정하면 구분선이 보이지 않습니다. column-rule-style의 초기값이 none이기 때문이며, Atomic에는 style을 지정하는 클래스가 없으므로 프로젝트 CSS에서 직접 지정해야 합니다.
구분선은 간격을 넓히지 않습니다
구분선은 column-gap 안에 겹쳐 그려질 뿐 자리를 따로 차지하지 않습니다. 따라서 선이 간격보다 굵으면 양쪽 텍스트를 파고듭니다. 항상 gap을 선 두께보다 충분히 크게 잡으세요.
thin, medium, thick 키워드도 있습니다
CSS 규격은 border-width와 같은 키워드를 허용하지만 실제 픽셀 값은 브라우저마다 다릅니다. 예측 가능한 결과를 원한다면 px 값을 쓰세요.
다단이 실제로 만들어져야 보입니다
컨테이너가 좁아 컬럼이 하나만 생기면 구분선도 그려지지 않습니다. cw나 컬럼 개수 설정이 실제로 2단 이상을 만드는지 먼저 확인하세요.