CSS에서 다단(multi-column) 레이아웃을 사용할 때 열과 열 사이에 표시되는 구분선의 색상을 지정하려면 column-rule-color 속성을 사용합니다. 이 속성을 활용하면 신문이나 잡지처럼 여러 단으로 나뉜 콘텐츠에서 각 단을 시각적으로 구분하는 선의 색상을 자유롭게 꾸밀 수 있습니다.
column-rule-color 속성의 기본 개념
column-rule-color는 열 구분선(rule)의 색상만 담당하는 속성입니다. 다만 색상만 지정해서는 구분선이 화면에 나타나지 않으므로, 반드시 column-rule-style 속성으로 선의 스타일(실선, 점선 등)을 함께 설정해야 합니다.
- column-count: 열의 개수를 지정합니다.
- column-gap: 열 사이의 간격을 지정합니다.
- column-rule-color: 열 구분선의 색상을 지정합니다.
- column-rule-style: 열 구분선의 스타일(solid, dashed, dotted 등)을 지정합니다.
예제 코드
아래 예제는 4개의 열로 텍스트를 나누고, 열 사이 간격을 50px로 설정한 뒤 주황색(orange) 점선(dashed) 구분선을 적용한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule-color: orange;
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.
This is demo text. This is demo text.
</div>
</body>
</html>실행 결과 설명
위 코드를 실행하면 텍스트가 4개의 열로 배치되고, 각 열 사이에는 주황색 점선 구분선이 표시됩니다. column-rule-color 값은 CSS에서 지원하는 모든 색상 표현 방식(색상 이름, HEX 코드, RGB, RGBA, HSL 등)을 사용할 수 있습니다.
축약형 속성 활용하기
색상, 스타일, 두께를 각각 따로 지정하는 대신 column-rule 축약 속성을 사용하면 한 번에 설정할 수도 있습니다.
.demo {
column-count: 4;
column-gap: 50px;
column-rule: 1px dashed orange;
}이처럼 column-rule: 두께 스타일 색상; 형태로 작성하면 코드가 더 간결해지며, 결과는 동일하게 주황색 점선 구분선이 적용됩니다.