속성 column-width

속성 column-width는 다단 텍스트의 열 너비를 지정합니다. 속성 값으로는 퍼센트를 제외한 모든 크기 단위, 혹은 키워드 auto (기본값)를 사용합니다. 값이 auto인 경우 브라우저는 column-count 와 column-gap를 기반으로 열 너비를 자동으로 결정합니다.

구문

선택자 {
	column-width: 값;
}

예제 . 지정된 너비

이 예제에서는 열 너비 column-width를 150px로 지정하고, 열 개수 column-count는 auto 값으로 설정했습니다. 결과적으로 열 너비는 150px가 되며, 열 개수와 열 사이 간격은 브라우저가 자동으로 결정합니다:

<div id="elem">
	some long text
</div>

#elem {
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

예제 . auto 값

이 예제에서는 텍스트가 3개의 열로 나뉩니다 (column-count가 3로 설정되어 있기 때문). 열 너비는 자동으로 계산됩니다:

<div id="elem">
	some long text
</div>

#elem {
	column-width: auto;
	column-count: 3;
	text-align: justify;
}

참고 항목

열 개수를 지정하는 속성 column-count
열 사이 간격을 지정하는 속성 column-gap
열 사이 경계선을 지정하는 속성 column-rule
요소가 확장되어야 할 열의 개수를 지정하는 속성 column-span
다단 레이아웃을 위한 단축 속성 columns