CSS3의 columns 속성을 사용하면 요소의 열 개수(column-count)와 열 너비(column-width)를 한 번에 지정할 수 있습니다. 이 속성은 column-width와 column-count 두 속성을 하나로 묶은 단축(shorthand) 속성이며, 다음과 같이 선언합니다.
columns: auto | column-width column-count | initial | inherit;주요 속성 값
- auto — 브라우저가 기본 방식으로 열을 계산합니다.
- column-width — 각 열의 최소 너비를 지정합니다.
- column-count — 화면에 표시할 열의 개수를 지정합니다.
- initial — 속성을 기본값으로 초기화합니다.
- inherit — 부모 요소의 속성 값을 상속받습니다.
예제 1: 열 개수 자동 설정
다음은 columns 속성으로 열 개수를 설정하는 기본 예제입니다. 구형 브라우저와의 호환성을 위해 벤더 접두사(-webkit-, -moz-)를 함께 작성했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: auto auto; /* Chrome, Safari, Opera */
-moz-columns: auto auto; /* Firefox */
columns: auto auto;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
오늘날 인공지능(AI)은 블록체인이나 양자 컴퓨팅에 대한 과열된 기대를 훨씬 뛰어넘었습니다. 막대한 컴퓨팅 자원을 일반인도 쉽게 이용할 수 있게 되었기 때문입니다. 개발자들은 이러한 환경을 활용해 새로운 머신러닝 모델을 만들고, 기존 모델을 재학습시켜 더 나은 성능과 결과를 얻고 있습니다. 고성능 컴퓨팅(HPC)의 보급은 머신러닝 역량을 갖춘 IT 전문가에 대한 수요를 급격히 증가시켰습니다.
</div>
</body>
</html>실행 결과
auto auto로 지정하면 콘텐츠 양과 컨테이너 너비에 따라 브라우저가 열 배치를 자동으로 결정합니다.
예제 2: 너비와 개수 직접 지정
이번에는 열 너비를 40px, 열 개수를 3개로 명시적으로 지정한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
-webkit-columns: 40px 3; /* Chrome, Safari, Opera */
-moz-columns: 40px 3; /* Firefox */
columns: 40px 3;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
오늘날 인공지능(AI)은 블록체인이나 양자 컴퓨팅에 대한 과열된 기대를 훨씬 뛰어넘었습니다. 막대한 컴퓨팅 자원을 일반인도 쉽게 이용할 수 있게 되었기 때문입니다. 개발자들은 이러한 환경을 활용해 새로운 머신러닝 모델을 만들고, 기존 모델을 재학습시켜 더 나은 성능과 결과를 얻고 있습니다. 고성능 컴퓨팅(HPC)의 보급은 머신러닝 역량을 갖춘 IT 전문가에 대한 수요를 급격히 증가시켰습니다.
</div>
</body>
</html>실행 결과
너비와 개수를 직접 지정하면 의도한 대로 균일한 다단 레이아웃이 만들어집니다.
정리
columns 속성 하나만으로 복잡한 다단(multi-column) 레이아웃을 간편하게 구성할 수 있습니다. 신문이나 잡지처럼 텍스트를 여러 열로 나눠 가독성을 높이고 싶을 때 유용하며, 반응형 디자인에서는 미디어 쿼리와 함께 활용하면 더욱 효과적입니다.