다단(multi-column) 레이아웃에서 열과 열 사이를 구분하는 선을 '컬럼 룰(column rule)'이라고 합니다. JavaScript에서는 columnRuleStyle 속성을 사용하여 이 구분선의 스타일을 동적으로 변경할 수 있습니다.
아래 예제 코드를 실행한 후 버튼을 클릭하면, 열 사이의 구분선 스타일이 기존의 점선(dotted)에서 inset 스타일로 바뀌는 것을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
column-count: 4;
column-rule: 4px dotted yellow;
}
</style>
</head>
<body>
<p>아래 버튼을 클릭하면 스타일이 변경됩니다</p>
<button onclick="display()">열 사이 스타일 변경하기</button>
<div id="myID">
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>
<script>
function display() {
document.getElementById("myID").style.columnRuleStyle = "inset";
}
</script>
</body>
</html>
핵심 정리
위 예제의 작동 원리를 단계별로 살펴보면 다음과 같습니다.
- CSS에서
#myID요소에column-count: 4;를 적용해 텍스트를 4개의 열로 나누고,column-rule: 4px dotted yellow;로 노란색 점선 구분선을 미리 지정합니다. - 버튼을 클릭하면
display()함수가 실행되어document.getElementById("myID").style.columnRuleStyle = "inset";코드를 통해 구분선 스타일이inset으로 즉시 변경됩니다.
columnRuleStyle에 사용할 수 있는 값
columnRuleStyle 속성에는 CSS border-style과 동일한 값을 사용할 수 있습니다.
- none / hidden — 구분선을 표시하지 않음
- dotted — 점선
- dashed — 파선(대시)
- solid — 실선
- double — 이중선
- groove / ridge — 입체적인 홈/융기 효과
- inset / outset — 안쪽/바깥쪽 음영 효과
참고로 구분선의 두께는 columnRuleWidth, 색상은 columnRuleColor 속성으로 각각 제어할 수 있으며, 이 세 가지 속성을 조합하면 다양한 스타일의 컬럼 룰을 자유롭게 구현할 수 있습니다.