CSS 열 채우기 속성
예시
열을 채우는 방법 지정:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
이 column-fill
속성은 균형이 맞는지 여부에 관계없이 열을 채우는 방법을 지정합니다.
팁: 다중 열 요소에 높이를 추가하면 콘텐츠가 열을 채우는 방식을 제어할 수 있습니다. 내용은 균형을 이루거나 순차적으로 채워질 수 있습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
CSS 구문
column-fill: balance|auto|initial|inherit;
속성 값
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
<div> 요소의 텍스트를 세 개의 열로 나눕니다.
div
{
column-count: 3;
}
예시
열 사이에 40픽셀 간격을 지정합니다.
div
{
column-gap: 40px;
}
예시
열 사이의 규칙 너비, 스타일 및 색상을 지정합니다.
div
{
column-rule: 4px double #ff00ff;
}
관련 페이지
CSS 튜토리얼: CSS 다중 열
HTML DOM 참조: columnFill 속성