JavaScript로 요소 내부 페이지 나누기 동작 설정하기
JavaScript에서는 pageBreakInside 속성을 사용하여 요소 내부에서 페이지가 나뉘는 방식을 제어할 수 있습니다. 이 속성에 auto 값을 지정하면 필요한 경우 요소 내부에서 자동으로 페이지 나누기가 삽입되고, avoid 값을 지정하면 요소 내부에서 페이지가 나뉘는 것을 최대한 방지할 수 있습니다.
참고: 이 속성의 변경 사항은 문서를 인쇄하거나 인쇄 미리보기를 통해 확인할 때만 화면에 반영됩니다.
pageBreakInside 속성의 주요 값
- auto: 기본값으로, 필요에 따라 요소 내부에서 자동으로 페이지를 나눕니다.
- avoid: 가능한 한 요소 내부에서 페이지가 나뉘지 않도록 합니다.
예제
다음 코드를 실행하면 JavaScript로 요소 내부의 페이지 나누기 동작을 설정하는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p id = "myFooter">This if footer text.</p>
<button type = "button" onclick="display()"> Set page-break </button>
<script>
function display() {
document.getElementById("myFooter").style.pageBreakInside = "auto";
}
</script>
</body>
</html>
위 예제에서 버튼을 클릭하면 display() 함수가 실행되어 id가 myFooter인 요소의 pageBreakInside 속성이 auto로 변경됩니다. 인쇄 미리보기에서 해당 요소 내부에 페이지 나누기가 삽입될 수 있는 상태로 설정된 것을 확인할 수 있습니다.