column-span
멀티 컬럼 레이아웃에서 요소가 모든 컬럼을 가로지르도록 설정합니다. 전체 너비 제목이나 구분선을 만들 때 유용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
csa | column-span: all | 모든 컬럼을 가로질러 전체 너비로 표시 |
사용 예시
멀티 컬럼 레이아웃 안에서 특정 요소(제목, 배너 등)를 전체 너비로 표시할 때 사용합니다.
<!-- 컬럼 레이아웃 내 전체 너비 제목 -->
<div class="cw200px cg2rem">
<p>첫 번째 단락은 컬럼 안에 배치됩니다.</p>
<h2 class="csa">이 제목은 모든 컬럼을 가로지릅니다</h2>
<p>이후 단락은 다시 컬럼으로 나뉩니다.</p>
<p>멀티 컬럼 레이아웃이 이어집니다.</p>
</div>팁 & 주의사항
column-span은 all 또는 none만 지원
CSS 스펙상 column-span은 개별 컬럼 수를 지정할 수 없습니다. 모든 컬럼을 가로지르거나(all), 가로지르지 않거나(none) 둘 중 하나입니다.
콘텐츠 흐름이 중단됨
csa 요소 앞뒤로 컬럼 콘텐츠가 나뉘어 배치됩니다. 레이아웃이 예상과 다를 수 있으니 확인하세요.