CSS 페이지 매김 제어 개요
인쇄물이나 PDF처럼 페이지가 나뉘어 출력되는 환경에서 문서의 흐름을 제어하려면 page-break-before, page-break-after, page-break-inside 속성을 사용할 수 있습니다.
page-break-before와 page-break-after 속성은 auto, always, avoid, left, right 다섯 가지 키워드 값을 받습니다.
키워드별 동작 방식
- auto: 기본값입니다. 브라우저가 필요한 시점에 자동으로 페이지 나눔을 생성합니다.
- always: 요소 앞이나 뒤에서 무조건 페이지 나눔을 강제합니다.
- avoid: 요소 바로 앞이나 뒤에서 페이지 나눔이 일어나지 않도록 억제합니다.
- left: 하나 또는 두 개의 페이지 나눔을 강제하여 요소가 왼쪽 페이지에 렌더링되도록 합니다.
- right: 하나 또는 두 개의 페이지 나눔을 강제하여 요소가 오른쪽 페이지에 렌더링되도록 합니다.
실전 예제
페이지 매김 속성의 활용은 생각보다 간단합니다. 예를 들어 문서에서 <h1> 태그가 새로운 장(chapter)의 시작을 알리고, <h2> 태그가 절(section)을 나타낸다고 가정해 보겠습니다. 이때 다음과 같은 조건을 만족하고 싶다면:
- 각 장은 반드시 새로운 오른쪽 페이지에서 시작해야 한다.
- 절 제목은 바로 뒤따르는 본문 내용과 페이지 경계로 분리되지 않아야 한다.
다음과 같은 CSS 규칙으로 이를 구현할 수 있습니다.
<style>
<!--
h1 {
page-break-before : right;
}
h2 {
page-break-after : avoid;
}
-->
</style>
위 코드에서 h1 { page-break-before: right; } 규칙은 모든 1단계 제목이 오른쪽 페이지에서 시작하도록 강제하며, h2 { page-break-after: avoid; } 규칙은 2단계 제목 직후에 페이지가 넘어가지 않도록 방지합니다.
참고: 최신 CSS 대체 속성
page-break-* 속성은 CSS 2.1 시절부터 사용된 속성입니다. 최신 CSS 명세에서는 더 범용적인 break-before, break-after, break-inside 속성이 도입되었으며, 인쇄뿐 아니라 멀티 컬럼(multi-column) 레이아웃 등 다양한 단편화(fragmentation) 상황에서도 동작합니다. 새 프로젝트에서는 두 속성을 함께 지정해 호환성을 높이는 것이 좋습니다.