CSS3 column-rule-color 속성이란?
CSS3의 다중 열(multi-column) 레이아웃에서 column-rule-color 속성은 열과 열 사이에 표시되는 구분선(열 규칙선)의 색상을 지정하는 데 사용됩니다.
이 속성은 단독으로 사용할 수 없으며, 반드시 column-rule-style 속성과 함께 사용해야 합니다. 스타일이 지정되지 않으면 구분선 자체가 화면에 나타나지 않기 때문입니다.
column-rule-color 속성의 주요 특징
- 색상 값은 이름(red, blue 등), HEX 코드(#ff00ff), RGB/RGBA 값 등 CSS에서 지원하는 모든 색상 표기법을 사용할 수 있습니다.
- 초기값(default)은 요소의 글자 색상(color 속성 값)입니다.
- 구분선의 두께는
column-rule-width, 선의 종류는column-rule-style로 각각 제어합니다.
예제 코드
아래 예제는 4개의 열로 텍스트를 배치하고, 열 사이 간격을 40px로 설정한 후, 핑크 계열(#ff00ff)의 실선(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;
/* 열 구분선 스타일 및 색상 설정 */
column-rule-style: solid;
column-rule-color: #ff00ff;
}
</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>실행 결과
위 코드를 실행하면 텍스트가 4개의 열로 나뉘고, 각 열 사이에 보라빛 핑크(#ff00ff) 색상의 세로 실선이 표시되는 것을 확인할 수 있습니다.
참고: 단축 속성 활용하기
구분선 관련 속성을 하나씩 작성하는 대신, column-rule 단축 속성을 사용하면 더 간결하게 코드를 작성할 수 있습니다.
.multi {
column-rule: 2px solid #ff00ff;
}위 코드는 두께 2px, 실선(solid), 색상 #ff00ff를 한 번에 지정하는 것으로, 아래와 같습니다.
.multi {
column-rule-width: 2px;
column-rule-style: solid;
column-rule-color: #ff00ff;
}브라우저 호환성
현재 대부분의 최신 브라우저는 표준 column-rule-color 속성을 지원합니다. 다만 구형 브라우저와의 호환성을 위해 -webkit-(Chrome, Safari), -moz-(Firefox) 접두사를 함께 사용하는 것이 좋습니다.