문서를 인쇄하거나 PDF로 변환할 때 콘텐츠가 어색하게 잘리는 경험을 해본 적이 있으신가요? CSS의 page-break 관련 속성을 사용하면 페이지가 나뉘는 위치를 세밀하게 제어할 수 있습니다. 이 글에서는 page-break-before, page-break-after, page-break-inside 속성의 사용법과 실전 예제를 소개합니다.
page-break-before와 page-break-after 활용 예제
예를 들어 문서에 수준 1 제목(h1)으로 새로운 장(chapter)이 시작되고, 수준 2 제목(h2)으로 섹션(section)을 구분한다고 가정해 보겠습니다. 각 장이 항상 새로운 오른쪽 페이지에서 시작되기를 원하지만, 섹션 제목은 뒤따르는 내용과 함께 페이지 경계에서 분리되지 않길 원한다면 다음과 같은 규칙을 작성할 수 있습니다.
<style>
<!--
h1 { page-break-before : right }
h2 { page-break-after : avoid }
-->
</style>위 코드에서 page-break-before : right는 h1 요소 앞에서 강제로 페이지를 나누어 새 장이 오른쪽 페이지(홀수 페이지)에서 시작되도록 합니다. 그리고 page-break-after : avoid는 h2 제목 바로 뒤에서 페이지가 나뉘는 것을 방지하여, 제목과 본문 내용이 서로 다른 페이지로 분리되지 않게 합니다.
page-break-inside로 표 분리 방지하기
page-break-inside 속성에는 auto와 avoid 값만 사용하는 것이 좋습니다. 만약 표(table)가 가능한 한 여러 페이지에 걸쳐 나뉘지 않기를 원한다면 다음과 같이 작성하면 됩니다.
<style>
<!--
table { page-break-inside : avoid }
-->
</style>이렇게 하면 표 전체가 하나의 페이지 안에 배치되도록 브라우저가 노력하며, 인쇄 시 표가 중간에 잘려 가독성이 떨어지는 문제를 예방할 수 있습니다.
주요 속성값 정리
- auto: 기본값으로, 페이지 나눔을 자동으로 처리합니다.
- always: 해당 위치에서 항상 페이지를 나눕니다.
- avoid: 해당 위치에서 페이지 나눔을 피합니다.
- left / right: 다음 페이지가 왼쪽 또는 오른쪽 페이지가 되도록 페이지 나눔을 강제합니다.
참고 사항
현재 CSS 표준에서는 이러한 속성들이 break-before, break-after, break-inside로 대체되는 추세입니다. 최신 브라우저 호환성을 고려한다면 두 속성을 함께 지정해 두는 것이 안전합니다. 특히 보고서, 전자책, 인쇄용 문서 등 페이지 기반 출력물을 다룰 때 이 속성들은 매우 유용하게 활용됩니다.