JavaScript에서 columnRuleColor 속성을 사용하면 다단(multi-column) 레이아웃에서 열과 열 사이에 표시되는 구분선(rule)의 색상을 동적으로 변경할 수 있습니다.
CSS의 column-rule 속성으로 기본 스타일을 지정한 뒤, JavaScript에서 style.columnRuleColor 값을 수정하면 버튼 클릭 같은 사용자 이벤트에 반응해 구분선 색상을 자유롭게 바꿀 수 있습니다.
아래 예제 코드를 실행하면 버튼을 클릭할 때 열 사이 구분선의 색상이 노란색에서 빨간색으로 변경됩니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
#myID {
column-count: 4;
column-rule: 4px outset 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.columnRuleColor = "red";
}
</script>
</body>
</html>코드 설명
1. CSS 부분
column-count: 4;— 해당 요소의 텍스트를 4개의 단(열)으로 나눕니다.column-rule: 4px outset yellow;— 열 사이에 두께 4px의 노란색 입체(outset) 스타일 구분선을 생성합니다.
2. JavaScript 부분
- 버튼을 클릭하면
display()함수가 호출됩니다. document.getElementById("myID").style.columnRuleColor = "red";코드가 실행되어 구분선 색상이 빨간색으로 즉시 변경됩니다.
참고 사항
columnRuleColor 속성에는 red, #ff0000, rgb(255, 0, 0) 등 다양한 형식의 색상 값을 사용할 수 있습니다. 또한 구분선의 두께와 스타일을 함께 변경하고 싶다면 columnRuleWidth, columnRuleStyle 속성을 함께 활용하면 됩니다.