CSS에서 다단(multi-column) 레이아웃을 사용할 때, 각 컬럼 사이에 표시되는 구분선(rule)의 스타일을 지정하려면 column-rule-style 속성을 사용합니다. 이 속성은 일반 테두리(border)와 마찬가지로 점선, 실선, 이중선 등 다양한 선 스타일을 지원합니다.
column-rule-style 속성의 주요 값
- none – 구분선을 표시하지 않습니다 (기본값)
- hidden – 구분선을 숨깁니다
- dotted – 점선으로 표시합니다
- dashed – 파선(대시) 형태로 표시합니다
- solid – 실선으로 표시합니다
- double – 이중선으로 표시합니다
- groove / ridge / inset / outset – 입체적인 효과가 있는 선으로 표시합니다
예제 코드
아래 예제는 컬럼을 4개로 나누고, 컬럼 사이 간격을 50px로 설정한 뒤, 밤색(maroon)의 파선(dashed) 구분선을 적용하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule-color: maroon;
column-rule-style: dashed;
}
</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-rule 단축 속성을 사용하면 두께(width), 스타일(style), 색상(color)을 한 번에 설정할 수 있습니다. 예를 들어 column-rule: 3px dashed maroon;처럼 작성하면 위 예제와 동일한 결과를 더 간결하게 얻을 수 있습니다.