다단 레이아웃(multi-column layout)에서 열과 열 사이의 간격을 조절하고 싶다면 CSS3의 column-gap 속성을 사용하면 됩니다. 이 속성을 활용하면 텍스트가 여러 열로 나뉴어질 때 각 열 사이의 거리를 픽셀(px) 등 원하는 단위로 자유롭게 지정할 수 있습니다.
column-gap 속성 문법
column-gap 속성에 설정할 수 있는 값은 다음과 같습니다.
column-gap: length | normal | initial | inherit;
- length — px, em, rem 등 단위를 사용해 간격을 직접 지정합니다. 음수 값은 허용되지 않습니다.
- normal — 브라우저 기본 간격을 적용합니다. 일반적으로 1em 정도의 값이 사용됩니다.
- initial — 속성을 기본값으로 되돌립니다.
- inherit — 부모 요소의 값을 상속받습니다.
예제 1: 픽셀 값으로 열 간격 지정하기
아래 예제는 텍스트를 4개의 열로 나누고, 열 사이의 간격을 25px로 설정한 코드입니다. 크로스 브라우징을 위해 Chrome, Safari, Opera용 -webkit- 접두사와 Firefox용 -moz- 접두사도 함께 작성했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
-webkit-column-gap: 25px; /* Chrome, Safari, Opera */
-moz-column-gap: 25px; /* Firefox */
column-gap: 25px;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing.
This is due to the fact that huge computing resources are easily available to the common man.
The developers now take advantage of this in creating new Machine Learning models and to re-train
the existing models for better performance and results. The easy availability of High Performance
Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 텍스트가 4개의 열로 나뉘며, 각 열 사이에 25px의 고정된 간격이 생기는 것을 확인할 수 있습니다.
예제 2: normal 값으로 기본 간격 적용하기
이번에는 간격 값을 normal로 지정한 예제입니다. 텍스트는 2개의 열로 나뉘며, 열 간격은 브라우저의 기본값이 적용됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 2;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
-webkit-column-gap: normal; /* Chrome, Safari, Opera */
-moz-column-gap: normal; /* Firefox */
column-gap: normal;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today's Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>실행 결과
텍스트가 2개의 열로 나뉘며, 열 사이에는 브라우저에서 정한 기본 간격(보통 약 1em)이 자동으로 적용됩니다.
정리
CSS3의 column-gap 속성은 다단 레이아웃에서 열 간격을 세밀하게 제어할 수 있는 유용한 도구입니다. 최신 브라우저 대부분은 표준 column-gap 속성을 지원하지만, 구형 브라우저와의 호환성을 위해 -webkit-, -moz- 같은 벤더 접두사를 함께 사용하는 것이 좋습니다.