column-rule 속성
column-rule 속성은 다중 열 텍스트에서
열 사이의 경계를 설정합니다.
허용되는 값은
border 속성과
동일합니다.
예시 . solid 타입
이 예시에서 텍스트는 3개의 열로 나뉘며,
열 사이의 경계는 두께 1px의 실선으로 표시됩니다
(열 사이 간격은 column-gap가
normal 값으로 설정되어 자동으로 생성됩니다):
<div id="elem">
some long text
</div>
#elem {
column-rule: 1px solid black;
column-count: 3;
column-gap: normal;
text-align: justify;
}
:
예시 . column-gap의 영향
이 예시에서 텍스트는 3개의 열로 나뉘며,
열 사이 간격은 50px입니다.
경계선은 이 간격의 중앙에 위치합니다
(경계선 좌우에 각각 25px의 공간이 생깁니다):
<div id="elem">
some long text
</div>
#elem {
column-rule: 1px solid black;
column-count: 3;
column-gap: 50px;
text-align: justify;
}
:
함께 보기
-
열 너비를 설정하는 속성
column-width -
열 개수를 설정하는 속성
column-count -
열 사이 간격을 설정하는 속성
column-gap -
요소가 확장되어야 하는 열의 개수를 설정하는 속성
column-span -
다중 열 레이아웃을 위한 단축 속성
columns
