CSS column-rule 약식 속성이란?
다단(multi-column) 레이아웃에서 열과 열 사이의 구분선을 지정할 때 사용하는 column-rule은 대표적인 약식(shorthand) 속성입니다. 이 속성 하나만으로 column-rule-width(구분선 두께), column-rule-style(구분선 스타일), column-rule-color(구분선 색상)라는 세 가지 개별 속성을 한 번에 설정할 수 있습니다.
예를 들어 column-rule: 2px dotted orange;와 같이 작성하면, 구분선의 두께는 2px, 스타일은 점선(dotted), 색상은 주황색(orange)으로 지정됩니다.
사용 예제
아래 코드를 실행하면 텍스트가 네 개의 단으로 나뉘고, 각 단 사이에 50px의 간격과 함께 주황색 점선 구분선이 표시되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
column-count: 4;
column-gap: 50px;
column-rule: 2px dotted orange;
}
</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 속성은 값의 순서가 자유롭지만 일반적으로 두께 → 스타일 → 색상 순으로 작성하는 것이 가독성 면에서 권장됩니다. 또한 스타일 값(style)은 생략할 수 없으며, 생략 시 기본값인 none이 적용되어 구분선이 화면에 나타나지 않으므로 주의해야 합니다.