일반적으로 신문을 보면 텍스트 단(column)이 여러 개로 나누어져 있습니다. 웹 문서에서도 이렇게 다단으로 편집할 수 있습니다. column과 관련된 여러 속성으로 쉽게 다단을 편집할 수 있습니다.
columns-width - 단의 너비 고정하고 다단을 구성하기
단의 너비 고정하고 다단을 구성하려면 colimn-width 속성을 이용합니다.
column-width : value | auto;
- value : 단 너비를 정합니다.
- auto : 단의 너비가 자동 계산됩니다.
예제
각 단의 너비를 120px로 고정한 예제입니다.
.multi {
-webkit-column-width: 120px;
-moz-column-width: 120px;
-o-column-width: 120px;
column-width: 120px;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
단의 너비가 고정되기 때문에 화면의 너비가 달라지면 단의 개수도 달라집니다.
column-count - 단의 개수를 고정하고 다단을 구성하기
브라우저 창의 너비와 상관 없이 단의 개수를 고정하고 다단을 구성하려면 column-count 속성을 사용합니다.
column-count : value | auto;
- value : 단의 개수를 정합니다.
- auto : 다른 속성에 따라 단의 너비가 자동 계산됩니다.
예제
단의 개수를 3개로 고정해놓은 예제입니다.
.multi {
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
column-width: 3;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
column-gap - 단과 단 사이 여백 지정하기
columns-gap 속성은 단과 단 사이에 여백을 지정하는 속성입니다.
column-gap : value | normal;
- value : 단 여백의 크기 정합니다.
- normal : 여백을 자동으로 정합니다.
예를 들어 여백의 크기를 20px로 하려면 다음과 같이 합니다.
.multi {
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
}
column-rule - 구분선의 색상, 스타일, 너비 지정하기
단과 단 사이의 여백에 수직선을 넣기도 합니다. 이때 column-rule 속성을 이용해 선의 스타일을 지정합니다.
column-rule : width | style | color;
- width : 구분선의 너비를 정합니다.
- style : 구분선의 형태를 정합니다. 사용 가능한 속성은 여기를 참고해주세요.
- color : 구분선의 색상을 정합니다.
예를 들어 단과 단 사이에 너비가 1px인 회색 점선의 구분선을 추가하려면 다음과 같이합니다.
column-rule-color : #ccc;
column-rule-style : dotted;
column-rule-width : 1px;
또는 다음과 같이 줄여서 표현할 수도 있습니다.
column-rule : 1px dotted #ccc;
예제
.multi {
-webkit-column-rule: 2px dotted #000;
-moz-column-rule: 2px dotted #000;
-o-column-rule: 2px dotted #000;
column-rule: 2px dotted #000;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
break-after - 다단의 위치 지정하기
break-after 속성은 다단을 어디서 부터 시작할지 지정하는 속성입니다.
break-before : column | avoid-column;
break-after : column | avoid-column;
break-inside : column | avoid-column;
| 속성 | 단 나눌 위치 | 동작 | |
|---|---|---|---|
| 단 나눔 | 단 나누지 않음 | ||
| break-before | 요소 앞 | column | avoid-column |
| break-after | 요소 뒤 | ||
| break-inside | 요소 안 | ||
특정 요소의 앞부분에서 단을 나누려면 break-before:column, 특정
요소의 뒤에서 단을 나누려면 break-after:column을 사용합니다.
반대로 특정 요소의 앞에서 강제로 단을 나누지 않게 하려면
break-before:avoid-column이나
break-after:avoid-column을 사용합니다. 또한
break-inside:avoid-column은 해당 요소 안에서 강제로 단을 나누거나
나뉘지 않게 하는 속성입니다.
예제
다음 예제는 제목( <h3> ) 바로 앞에서 다단이 나뉘도록 지정한
것입니다.
.multi h3 {
break-before: column;
}
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
column-span - 여러 단을 하나로 합치기
column-span 속성으로 단을 합칠 수 있습니다.
column-span : 1 | all;
- 1 : 기본 값으로 단을 합치지 않습니다.
- all : 전체 단을 합칩니다. 단의 일부만 합칠 수 없습니다.
예제
다음 예제는 3개의 단으로 표시하다가 .no-col이라는 선택자가 적용된
곳에 3개 단을 하나로 합친 것입니다.
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
다단 관련 속성은 브라우저별 접두사를 붙여 사용해야 합니다. 브라우저별 접두사(prefix) 란 브라우저 별로 CSS3 속성이 다르게 지원되기 때문에 구별할 수 있도록 CSS 속성 앞에 붙이는 접두사를 말합니다. 자세한 내용은 여기를 참고해주세요.