JavaScript에서 pageBreakAfter 속성을 사용하면 특정 요소 뒤의 페이지 나누기 동작을 설정할 수 있습니다. 요소 뒤에서 항상 새 페이지가 시작되도록 하려면 always 값을 사용하면 됩니다.
참고: 이 속성으로 설정한 변경 사항은 문서를 실제로 인쇄하거나 인쇄 미리보기를 통해 확인할 때만 화면에 나타납니다.
pageBreakAfter 속성의 주요 값
- auto – 필요한 경우에만 자동으로 페이지를 나눕니다(기본값).
- always – 요소 뒤에서 항상 페이지를 나눕니다.
- avoid – 요소 뒤에서 페이지 나누기를 피합니다.
- left / right – 다음 페이지가 왼쪽 또는 오른쪽 페이지가 되도록 페이지를 나눕니다.
예제
다음 코드를 실행하면 버튼 클릭 시 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.pageBreakAfter = "always";
}
</script>
</body>
</html>위 예제에서 'Set page-break' 버튼을 클릭하면 display() 함수가 실행되어 myFooter 요소의 pageBreakAfter 스타일이 always로 지정됩니다. 이후 인쇄 미리보기를 열면 해당 요소 뒤에서 항상 새 페이지가 시작되는 것을 확인할 수 있습니다.