HTML DOM의 Style pageBreakBefore 속성은 HTML 문서 내 특정 요소 앞에서 발생하는 페이지 나눔(page break) 동작을 가져오거나 수정하는 데 사용됩니다. 이 속성은 주로 인쇄(print) 또는 인쇄 미리보기(print preview) 환경에서 문서가 어떻게 페이지로 분할될지 제어할 때 활용됩니다.
문법(Syntax)
pageBreakBefore 속성의 기본 문법은 다음과 같습니다.
1. 속성 값 반환하기
object.pageBreakBefore
2. 속성 값 설정하기
object.pageBreakBefore = "value";
여기서 value에 지정할 수 있는 값은 아래 표와 같습니다.
| 값(Value) | 설명(Explanation) |
|---|---|
| initial | 해당 속성 값을 기본(default) 값으로 되돌립니다. |
| inherit | 부모 요소로부터 해당 속성 값을 상속받습니다. |
| auto | 필요한 경우에만 요소 앞에 페이지 나눔을 자동으로 삽입합니다. |
| always | 항상 요소 앞에 페이지 나눔을 강제로 삽입합니다. |
| avoid | 요소 앞에 페이지 나눔이 발생하지 않도록 방지합니다. |
| left | 요소 앞에 한 번 또는 두 번의 페이지 나눔이 삽질될 때, 다음 페이지를 왼쪽(left) 페이지로 간주합니다. |
| right | 요소 앞에 한 번 또는 두 번의 페이지 나눔이 삽입될 때, 다음 페이지를 오른쪽(right) 페이지로 간주합니다. |
| 빈 문자열("") | 요소 앞에 페이지 나눔을 삽입하지 않습니다. |
그럼 실제 예제를 통해 HTML DOM Style pageBreakBefore 속성이 어떻게 작동하는지 살펴보겠습니다.
예제(Example)
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
p {
text-align: center;
}
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakBefore Property Demo</h1>
<p>
Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text.
</p>
<p class="page-break">
Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text.
</p>
<button onclick="set()" class="btn">Break Page Here</button>
<p>
Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text.
</p>
<script>
function set() {
document.querySelector(".page-break").style.pageBreakBefore = "always";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 그라데이션 배경 위에 제목, 세 개의 단락 그리고 빨간색 버튼이 표시된 웹 페이지를 확인할 수 있습니다. 먼저 브라우저에서 인쇄 미리보기를 열어 현재 HTML 페이지가 어떻게 출력되는지 관찰해 보세요.
이제 웹 페이지에 있는 빨간색 버튼(Break Page Here)을 클릭합니다. 이 버튼을 누르면 JavaScript의 set() 함수가 실행되어 두 번째 단락 요소의 pageBreakBefore 속성이 "always"로 설정됩니다.
버튼 클릭 후 다시 인쇄 미리보기를 열어 결과를 확인해 보세요. 아래 이미지에서 볼 수 있듯이, 웹 페이지가 명확하게 두 개의 페이지로 분할된 것을 확인할 수 있습니다.
정리
pageBreakBefore 속성은 화면상에는 영향을 주지 않지만, 문서를 인쇄하거나 PDF로 저장할 때 콘텐츠 흐름을 세밀하게 제어할 수 있게 해주는 유용한 도구입니다. 보고서나 공식 문서처럼 인쇄 레이아웃이 중요한 웹 페이지를 제작할 때 적극적으로 활용해 보세요.