CSS column-fill 속성으로 열 채우기
다단(multi-column) 레이아웃에서 각 열의 내용을 어떤 방식으로 채울지 지정하려면 column-fill 속성을 사용합니다. 이 속성은 column-count로 나눈 여러 개의 열에 텍스트가 배치되는 방식을 결정합니다.
column-fill의 주요 값
- balance: 모든 열의 높이를 최대한 균등하게 맞춰 내용을 분배합니다. 기본값입니다.
- auto: 열을 순서대로 순차적으로 채우며, 마지막 열만 남은 공간에 따라 높이가 달라질 수 있습니다.
예제: balance 값 사용하기
아래 코드는 column-fill 속성에 balance 값을 적용하여 4개의 열에 내용을 균등하게 분배하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-fill: balance;
}
</style>
</head>
<body>
<div class = "demo">
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text. This is demo text. This is demo text.
This is demo text.
</div>
</body>
</html>코드 설명
column-count: 4;— 요소의 내용을 4개의 열로 나눕니다.column-fill: balance;— 각 열의 높이가 비슷해지도록 내용을 고르게 분배합니다.
참고 사항
column-fill 속성은 대부분의 최신 브라우저에서 지원됩니다. 단, auto 값은 요소에 고정된 높이(예: height 설정)가 있을 때 의미 있는 차이를 보입니다. 높이가 지정되지 않으면 브라우저가 자동으로 균형을 잡기 때문에 두 값의 차이가 크지 않을 수 있습니다.