JavaScript에서는 pageBreakBefore 속성을 사용하여 특정 요소 앞의 페이지 나누기(page-break) 동작을 설정할 수 있습니다. 이 속성 값을 always로 지정하면 해당 요소 앞에 항상 페이지 나누기가 삽입됩니다.
참고: 이 속성의 변경 사항은 실제로 문서를 인쇄하거나 브라우저의 인쇄 미리보기 화면에서만 확인할 수 있습니다. 일반 화면에서는 시각적으로 변화가 없습니다.
예제
아래 예제 코드를 실행해 보세요. 버튼을 클릭하면 myFooter 요소 앞에 페이지 나누기가 설정됩니다. 이후 인쇄 미리보기를 열면 푸터 텍스트가 새 페이지에서 시작되는 것을 확인할 수 있습니다.
<!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.pageBreakBefore = "always";
}
</script>
</body>
</html>pageBreakBefore 속성의 주요 값
- auto: 기본값으로, 필요한 경우에만 자동으로 페이지를 나눕니다.
- always: 항상 해당 요소 앞에서 페이지를 나눕니다.
- avoid: 가능한 한 해당 요소 앞에서 페이지 나누기를 피합니다.
- inherit: 부모 요소의 pageBreakBefore 값을 상속받습니다.