CSS3의 column-fill 속성은 다중 열(multi-column) 레이아웃에서 각 열을 어떤 방식으로 채울지 결정하는 데 사용됩니다. 이 속성을 활용하면 텍스트가 모든 열에 균등하게 분배되도록 하거나, 순서대로 차례차례 채워지도록 설정할 수 있습니다.
column-fill 속성의 주요 값
- balance (기본값): 콘텐츠를 모든 열에 최대한 균등하게 분배합니다.
- auto: 열을 순서대로 채우며, 앞선 열이 꽉 찬 후에 다음 열로 넘어갑니다.
예제 코드
아래 코드를 실행하면 column-fill 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html>
<head>
<style>
.multi {
/* 열 개수 지정 */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* 열 사이 간격 지정 */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* 열 구분선 스타일 지정 */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
/* 열 채우기 방식 지정 */
column-fill: auto;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point는 온라인 콘텐츠에 더 잘 반응하고, 자신의 거실에서 편안하게
자신만의 속도로 새로운 기술을 배우고자 하는 독자층이 존재한다는 아이디어에서
출발했습니다. 2006년 HTML 단 하나의 튜토리얼로 여정이 시작되었고, 그에 대한
뜨거운 반응에 힘입어 프로그래밍 언어부터 웹 디자인, 학술 분야에 이르기까지
다양한 주제의 튜토리얼과 관련 글을 지속적으로 추가해 왔습니다.
</div>
</body>
</html>실행 결과
위 예제에서 column-fill: auto;를 적용하면 텍스트가 첫 번째 열부터 순차적으로 채워집니다. 만약 값을 balance로 변경하면, 콘텐츠가 네 개의 열 전체에 고르게 분산되어 나타나는 것을 확인할 수 있습니다.
참고 사항
column-fill 속성은 대부분의 최신 브라우저에서 지원되지만, 구버전 브라우저와의 호환성을 위해 위 예제처럼 -webkit-, -moz- 접두사를 함께 사용하는 것이 좋습니다. 또한 열 개수가 고정된 상태에서 콘텐츠 양이 부족하면 balance 값과 auto 값의 차이가 더욱 뚜렷하게 드러납니다.