# PDF에서 머리글, 바닥글 및 페이지 나누기 관리하기
페이지 나누기는 혼란을 야기할 수 있습니다.
`page-break-after` CSS 규칙은 올바르게 적용되면 항상 작동합니다. 그러나, 이 규칙은 스타일 시트가 `display:block`에서 `div`를 변경하면 작동하지 않습니다. 블록 수준의 요소에 `page-break-after` 규칙이 적용되었는지 확인하십시오. 바디 태그의 직접 자식인 `div`가 선호됩니다.
아래 HTML 예시는 다음을 보여줍니다.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>
```
대신 모든 PDF 페이지에서 반복되는 **테이블 헤더와 푸터**가 필요한 경우, 이 기사를 확인하십시오: [HTML PDF에서 페이지 나누기 추가 또는 방지](/how-to/html-to-pdf-page-breaks/)
위의 단계를 수행해도 문제가 해결되지 않으면 다음 단계를 시도해 보세요.
## 1. 문제를 단순화하세요
콘텐츠 길이가 다양하다면, 다양한 길이의 콘텐츠를 테스트하여 올바른 HTML/CSS를 사용하고 있는지 확인하십시오. 이 [도구는](https://www.lipsum.com/) 도움을 주는 데 사용할 수 있습니다.
## 2. HTML과 CSS의 유효성을 검사하세요
[CSS 유효성 검사기는](https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input) 사용된 CSS 스타일을 확인하는 데 사용할 수 있습니다.
[HTML 유효성 검사기는](https://validator.w3.org/#validate_by_input) HTML 입력의 유효성을 검사하는 데 도움을 줄 수 있습니다.
또한 웹 디자이너에게 HTML을 검토해 달라고 요청하고 변경 사항을 추적할 수 있습니다.
반면에, 공개 섹션의 위치는 테이블 구조, `tfoot` 및 여러 요인을 포함한 많은 요소에 의해 영향을 받습니다. 그러므로 HTML 문자열과 구조를 다시 한번 확인하는 것이 분명 도움이 될 것입니다.
## 3. Chrome의 인쇄 미리보기에서 출력물을 확인하세요.
IronPDF IronPDF PDF 렌더링 엔진을 사용하기 때문에 데스크톱 Chrome 웹 브라우저와 동일한 PDF를 출력합니다.
따라서 Chrome의 인쇄 미리보기를 통해 HTML이 어떻게 보이는지 확인하고 필요에 따라 HTML을 수정할 수 있습니다. 시행착오를 거쳐야 할 수도 있지만, 이것이 HTML을 디버깅하는 가장 쉬운 방법입니다.
Chrome 인쇄 미리보기를 통해 HTML을 디버깅하는 방법에 대해 자세히 알아보세요: [픽셀 단위로 완벽한 HTML 서식 지정](/troubleshooting/pixel-perfect-html-formatting/)
Chrome PDF 렌더링 엔진에 대한 자세한 내용은 다음 문서를 참조하세요. [IronPDF의 Chrome 렌더러란 무엇인가요?](/how-to/pixel-perfect-html-to-pdf/)
## 4. Chrome 개발자 도구를 사용하세요
또는 Chrome 개발자 도구의 '검사' 기능을 사용하여 요소에서 계산된 최종 CSS를 찾을 수도 있습니다. 이렇게 하면 문자열에 포함된 각 HTML 요소에 대한 자세한 정보를 얻을 수 있습니다.
## 5. IronPDF 사용하여 HTML을 렌더링합니다.
최종 HTML 문자열 또는 HTML 파일을 IronPDF Chrome Renderer로 보내고 `RenderHtmlAsPdf()` 또는 `RenderHtmlFileAsPdf()` 메서드를 사용하여 PDF 문서를 만드십시오.
출력 PDF와 렌더링 작업을 세밀하게 조정하려면 렌더러에 몇 가지 렌더링 옵션을 지정해야 할 수 있습니다. 더 자세한 내용을 알아보려면 이 [기사를](/how-to/ironpdf-2021-chrome-rendering-engine-eap/) 참조하세요.
page-break-after CSS 규칙은 올바르게 적용되면 항상 작동합니다. 그러나, 이 규칙은 스타일 시트가 display:block에서 div를 변경하면 작동하지 않습니다. 블록 수준의 요소에 page-break-after 규칙이 적용되었는지 확인하십시오. 바디 태그의 직접 자식인 div가 선호됩니다.
아래 HTML 예시는 다음을 보여줍니다.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Print Page Breaks with Header and Footer</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header, footer { position: fixed; width: 100%; text-align: center; background-color: #f1f1f1; padding: 10px 0; } header { top: 0; } footer { bottom: 0; } .content { margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */ } .page-break { page-break-after: always; display: block; /* Ensure it remains a block-level element */ } </style></head><body> <header> <h1>Document Title</h1> <p>Header Content</p> </header> <footer> <p>Footer Content</p> </footer> <div class="content"> <div class="page-break"> <h2>Section 1</h2> <p>This is the first section. After this section, there will be a page break.</p> </div> <div class="page-break"> <h2>Section 2</h2> <p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p> </div> </div></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>
커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.
