웹 페이지에서 텍스트를 여러 개의 열로 나누어 배치할 때, 각 열에 내용이 어떻게 채워지는지를 제어하려면 columnFill 속성을 사용합니다. JavaScript를 이용하면 이 속성을 동적으로 설정할 수 있어 사용자의 동작에 따라 레이아웃을 유연하게 변경할 수 있습니다.
columnFill 속성의 주요 값
- auto: 내용을 순차적으로 채웁니다. 첫 번째 열이 가득 찬 후에 다음 열로 넘어갑니다.
- balance: 내용을 모든 열에 균등하게 분배하여 각 열의 높이가 비슷해지도록 맞춥니다.
JavaScript로 columnFill 설정하기
아래 예제 코드를 실행해 보세요. 버튼을 클릭하면 지정된 텍스트 영역이 4개의 열로 나뉘고, balance 값으로 인해 내용이 각 열에 고르게 분배됩니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하여 4개의 열을 만들어 보세요</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.columnCount = "4";
document.getElementById("myID").style.columnFill = "balance";
}
</script>
</body>
</html>코드 설명
위 코드에서 핵심 부분은 다음과 같습니다.
style.columnCount = "4": 해당 요소의 텍스트를 4개의 열로 나눕니다.style.columnFill = "balance": 내용을 4개의 열에 균등하게 분배합니다.
만약 내용을 순차적으로 채우고 싶다면 columnFill 값을 auto로 변경하면 됩니다. 이 경우 첫 번째 열부터 차례대로 채워지며, 마지막 열에는 남은 내용만 표시됩니다.