CSS column-gap 속성으로 열 사이 간격 지정하기
CSS의 column-gap 속성은 다단(multi-column) 레이아웃에서 열(column)과 열 사이의 간격을 설정하는 데 사용됩니다. 이 속성에 원하는 값을 지정하면 각 열 사이의 여백을 자유롭게 조절할 수 있어, 가독성 좋은 신문 스타일 레이아웃을 쉽게 만들 수 있습니다.
아래 예제는 column-gap 속성을 50px로 설정하여, 네 개의 단으로 나뉜 텍스트 사이에 일정한 간격을 만드는 코드입니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
}
</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-gap: 50px;— 각 단 사이의 간격을 50px로 지정합니다.
column-gap 속성에 사용할 수 있는 값
- <length>: px, em, rem 등의 길이 단위로 간격을 지정합니다. 음수 값은 허용되지 않습니다.
- normal: 브라우저의 기본 간격(일반적으로 약 1em)이 적용됩니다.
참고로 column-gap 속성은 플렉스박스(flexbox)와 그리드(grid) 레이아웃에서도 동일하게 사용할 수 있어 활용 범위가 넓습니다. 다단 레이아웃의 세로 방향 간격을 조절하고 싶다면 column-rule 속성을 함께 사용해 열 사이에 구분선을 추가하는 것도 좋은 방법입니다.