CSS3의 column-gap 속성은 다중 컬럼(multi-column) 레이아웃에서 각 열(column) 사이의 간격을 지정하는 데 사용됩니다. 신문이나 잡지처럼 텍스트를 여러 열로 나누어 배치할 때, 열과 열 사이에 적절한 여백을 주어 가독성을 높일 수 있습니다.
column-gap 속성의 기본 개념
다중 컬럼 레이아웃을 구성하려면 먼저 column-count 속성으로 열의 개수를 지정합니다. 이후 column-gap 속성을 사용하면 열 사이의 간격을 픽셀(px) 등 원하는 단위로 자유롭게 조절할 수 있습니다.
또한 column-rule-style 속성을 함께 사용하면 열 사이에 구분선(테두리)을 추가하여 시각적으로 더욱 깔끔한 레이아웃을 만들 수 있습니다.
예제 코드
아래 예제는 4개의 열로 구성된 레이아웃에서 열 사이 간격을 40px로 설정하고, 실선(solid) 스타일의 구분선을 추가하는 코드입니다.
<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;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class of readers who respond
better to online content and prefer to learn new skills at their own pace from the comforts
of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and
elated by the response it generated, we worked our way to adding fresh tutorials to our
repository which now proudly flaunts a wealth of tutorials and allied articles on topics
ranging from programming languages to web designing to academics and much more.
</div>
</body>
</html>코드 설명
- -webkit-column-count / -moz-column-count / column-count: 요소를 4개의 열로 나눕니다. 벤더 접두사(-webkit-, -moz-)를 함께 작성하면 크로스 브라우저 호환성이 향상됩니다.
- -webkit-column-gap / -moz-column-gap / column-gap: 열 사이의 간격을 40px로 설정합니다.
- -webkit-column-rule-style / -moz-column-rule-style / column-rule-style: 열 사이에 실선 형태의 구분선을 표시합니다.
실행 결과
위 코드를 실행하면 텍스트가 4개의 열로 나뉘어 표시되며, 각 열 사이에는 40px의 간격과 실선 구분선이 나타납니다.
마무리
column-gap 속성은 다중 컬럼 레이아웃에서 열 간격을 세밀하게 조절할 수 있는 유용한 도구입니다. column-count, column-rule-style 등 다른 다중 컬럼 관련 속성들과 함께 활용하면 신문·잡지 스타일의 세련된 웹 레이아웃을 손쉽게 구현할 수 있습니다.