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 |
사용 예시
column-rule-width는 column-rule-style과 함께 사용해야 선이 보입니다. 축약형 column-rule로 한 번에 지정하는 것이 일반적입니다.
<!-- 1px 구분선 -->
<div class="cw200px crw1px cg2rem">
<p>컬럼 사이에 1px 구분선이 표시됩니다.</p>
<p>column-rule-style이 함께 지정되어야 합니다.</p>
</div>
<!-- 두꺼운 구분선 -->
<div class="cw200px crw4px cg2rem">
<p>4px 두께의 구분선입니다.</p>
<p>신문 스타일 레이아웃에 활용할 수 있습니다.</p>
</div>팁 & 주의사항
column-rule-style 필수
width만 지정하면 구분선이 보이지 않습니다. column-rule-style(solid, dashed 등)이 함께 설정되어야 합니다.