문단을 다단으로 만드는 방법 - columns
일반적으로 신문을 보면 텍스트 단(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;
}data-editable="true"
data-preview="true"
data-height="540"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="zYoWZqo"
style="height: 540px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 문단을 다단으로 만드는 방법 column-width 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
단의 너비가 고정되기 때문에 화면의 너비가 달라지면 단의 개수도 달라집니다.
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;
}data-editable="true"
data-preview="true"
data-height="540"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="xxRWqEr"
style="height: 540px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 문단을 다단으로 만드는 방법 column-count 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
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;
예를 들어 단과 단 사이에 너비가 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;
}data-editable="true"
data-preview="true"
data-height="610"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="ZEBxKEX"
style="height: 610px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 문단을 다단으로 만드는 방법 column-gap column-rule 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
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;
}data-editable="true"
data-preview="true"
data-height="720"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="mdOxwPW"
style="height: 720px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 문단을 다단으로 만드는 방법 break-after 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
column-span - 여러 단을 하나로 합치기
column-span 속성으로 단을 합칠 수 있습니다.
column-span : 1 | all;- 1 : 기본 값으로 단을 합치지 않습니다.
- all : 전체 단을 합칩니다. 단의 일부만 합칠 수 없습니다.
예제
다음 예제는 3개의 단으로 표시하다가 .no-col이라는 선택자가 적용된
곳에 3개 단을 하나로 합친 것입니다.
data-editable="true"
data-preview="true"
data-height="740"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="VwmXWMP"
style="height: 740px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="CSS 문단을 다단으로 만드는 방법 column-span 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
다단 관련 속성은 브라우저별 접두사를 붙여 사용해야 합니다. 브라우저별
접두사(prefix) 란 브라우저 별로 CSS3 속성이 다르게 지원되기 때문에 구별할 수
있도록 CSS 속성 앞에 붙이는 접두사를 말합니다. 자세한 내용은
>여기 >를 참고해주세요.