PDF 문서 생성 시 데이터가 페이지를 넘어가거나 잘리는 문제는 빈번하게 발생합니다. 특히 CSS를 활용하여 PDF를 생성할 때 페이지 분리가 적절히 처리되지 않으면 문서의 가독성과 품질이 저하될 수 있습니다. 이 글에서는 PDF 페이지 분리와 관련된 주요 CSS 기법과 최적화 방법에 대해서 테스트 해보며 알아본 내용에 대해서 정리합니다.
1. 기본 초기화: Margin과 Padding 초기화
PDF 스타일링에서 레이아웃이 예기치 않게 흐트러지는 문제를 방지하려면 모든 요소의 기본 margin과 padding을 초기화하는 것이 중요합니다.
* {
margin: 0;
padding: 0;
}- 일부 라이브러리는 margin과 padding을 강제로 변경하기 때문에, 초기화 설정을 통해 이후 발생할 이슈를 사전에 방지할 수 있습니다.
2. 페이지 분리(page break) 처리
CSS를 사용한 페이지 분리에는 구버전 방식과 현재 방식 두 가지가 있습니다.
2-1. 구버전 CSS 방식
- page-break-inside
- page-break-before
- page-break-after
2-2. 현재 CSS 방식
- break-inside
- break-before
- break-after
현재 방식은 최신 브라우저와 라이브러리에서 권장되며, 이전 방식과의 호환성을 유지하면서 더 유연한 옵션을 제공합니다.
3. Page Break 적용 시 주의 사항
3-1. 지원되는 요소
page break는 block, inline-block 요소에만 적용됩니다. flex 레이아웃에서는 페이지 브레이크가 적용되지 않으므로 주의해야 합니다.
4. 데이터 표시 연속성 및 잘림 방지
4-1. 연속성 유지
요소 간 연속성을 유지하려면 break-inside: auto를 사용합니다.
div {
break-inside: auto;
}- 이 설정은 페이지가 넘어가더라도 요소가 자동으로 다음 페이지에 이어지도록 처리합니다.
4-2. 데이터 잘림 방지
데이터가 잘리는 문제를 방지하려면 자식 요소에 break-inside: avoid를 설정합니다.
li {
break-inside: avoid;
}- 이 설정은 데이터가 페이지를 넘어갈 경우 전체 요소가 다음 페이지로 이동하도록 만듭니다.
5. 글자가 잘리는 문제 해결
글자가 잘린 상태로 페이지가 넘어가는 문제를 해결하려면 after: page를 활용합니다. 특정 요소가 다음 페이지에 걸쳐 있을 경우 해당 요소를 강제로 다음 페이지로 넘길 수 있습니다.
p::after {
content: "";
page-break-after: always;
}6. Before, After, Inside 우선순위
before, after, inside를 조합하여 페이지 브레이크를 설정할 때 우선순위를 이해해야 합니다:
- 한 요소 내에서 before, after, inside가 모두 선언된 경우, 마지막으로 선언된 avoid 설정이 적용됩니다.
7. 페이지 브레이크 설정 예제
아래는 div, ul, li 요소를 포함한 페이지 브레이크 설정 예제입니다:
<div>
<p>title</p> <!-- break-after: page -->
<ul> <!-- break-inside: auto; break-before: avoid -->
<li>content1</li> <!-- break-inside: avoid -->
<li>content2</li> <!-- break-inside: avoid -->
</ul>
</div>적용 CSS
p {
break-after: page;
}
ul {
break-inside: auto;
break-before: avoid;
}
li {
break-inside: avoid;
}8. 결론
PDF 생성 시 CSS를 활용한 페이지 브레이크 처리는 문서의 품질과 사용자 경험에 큰 영향을 미칩니다.
- 초기화(margin: 0; padding: 0)를 통해 기본 스타일을 정리하고,
- 적절한 break 속성을 사용하여 데이터의 연속성과 페이지 분리를 최적화하며,
- 잘림 문제를 방지하는 방식으로 문서를 구성해야 합니다.
위의 내용을 기반으로 페이지 분리를 설정하면 PDF 문서의 안정성과 가독성을 높일 수 있습니다.