column-span 속성
column-span 속성은 다중 열 텍스트에서 요소가 확장되어야 할 열의 수를 설정합니다.
속성 값은 숫자 1 또는 키워드 all를 사용합니다. 값이 1이면 요소는 하나의 열을 차지하고,
값이 all이면 모든 열을 차지합니다.
구문
선택자 {
column-span: 1 | all;
}
기본값: 1.
예시
이 예시에서 제목은 첫 번째 열 내부에 위치하게 됩니다:
<div id="elem">
<h2>Lorem ipsum dolor sit amet eu metus non</h2>
some long text
</div>
#elem h2 {
column-span: 1;
margin: 0;
}
#elem {
column-count: 3;
text-align: justify;
}
:
예시
이제 제목이 모든 열에 걸쳐 확장됩니다:
<div id="elem">
<h2>Lorem ipsum dolor sit amet eu metus non</h2>
some long text
</div>
#elem h2 {
column-span: all;
margin: 0;
}
#elem {
column-count: 3;
text-align: justify;
}
:
함께 보기
-
열의 수를 설정하는
column-count속성 -
열의 너비를 설정하는
column-width속성 -
열 사이의 간격을 설정하는
column-gap속성 -
열 사이의 경계선을 설정하는
column-rule속성 -
다중 열 레이아웃을 위한 단축 속성인
columns속성
