PDF에서 머리글, 바닥글 및 페이지 나누기 관리하기

업데이트됨:9월 10, 2025

Translated

View the article in English

페이지 나누기는 혼란을 야기할 수 있습니다.

page-break-after CSS 규칙은 올바르게 적용하면 항상 작동합니다. 하지만 스타일시트에서 div를 display:block로 변경하는 경우에는 이 규칙이 적용되지 않습니다. page-break-after 규칙이 블록 수준 요소, 가급적이면 body 태그의 바로 아래 자식 요소인 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>

HTML

PDF 페이지마다 표 머리글과 바닥글이 반복되도록 하려면 다음 문서를 참조하세요. HTML PDF에서 페이지 나누기 추가 또는 제거

위의 단계를 수행해도 문제가 해결되지 않으면 다음 단계를 시도해 보세요.

1. 문제를 단순화하세요

콘텐츠 길이가 다양하다면, 다양한 길이의 콘텐츠를 테스트하여 올바른 HTML/CSS를 사용하고 있는지 확인하십시오. 이 도구는 도움을 주는 데 사용할 수 있습니다.

2. HTML과 CSS의 유효성을 검사하세요

CSS 유효성 검사기는 사용된 CSS 스타일을 확인하는 데 사용할 수 있습니다.

HTML 유효성 검사기는 HTML 입력의 유효성을 검사하는 데 도움을 줄 수 있습니다.

또한 웹 디자이너에게 HTML을 검토해 달라고 요청하고 변경 사항을 추적할 수 있습니다.

반면에 공개 섹션의 위치는 표 구조, tfoot 등 여러 요인의 영향을 받습니다. 그러므로 HTML 문자열과 구조를 다시 한번 확인하는 것이 분명 도움이 될 것입니다.

3. 크롬의 인쇄 미리보기에서 출력물을 확인하세요.

IronPDF는 Chrome PDF 렌더링 엔진을 사용하기 때문에 데스크톱 Chrome 웹 브라우저에서 보는 것과 동일한 PDF 파일을 출력합니다.

따라서 크롬의 인쇄 미리보기를 통해 HTML이 어떻게 보이는지 확인하고 필요에 따라 HTML을 수정할 수 있습니다. 시행착오를 거쳐야 할 수도 있지만, 이것이 HTML을 디버깅하는 가장 쉬운 방법입니다.

Chrome 인쇄 미리보기를 통해 HTML을 디버깅하는 방법에 대해 자세히 알아보세요: 픽셀 단위로 완벽한 HTML 서식 지정

Chrome PDF 렌더링 엔진에 대한 자세한 내용은 다음 문서를 참조하세요. IronPDF의 Chrome 렌더러란 무엇인가요?

4. 크롬 개발자 도구를 사용하세요

또는 Chrome 개발자 도구의 '검사' 기능을 사용하여 요소에서 계산된 최종 CSS를 찾을 수도 있습니다. 이렇게 하면 문자열에 포함된 각 HTML 요소에 대한 자세한 정보를 얻을 수 있습니다.

5. IronPDF를 사용하여 HTML을 렌더링합니다.

최종 HTML 문자열 또는 HTML 파일을 IronPDF Chrome Renderer로 보내고 RenderHtmlAsPdf() 또는 RenderHtmlFileAsPdf() 메서드를 사용하여 PDF 문서를 생성하세요.

출력 PDF와 렌더링 작업을 세밀하게 조정하려면 렌더러에 몇 가지 렌더링 옵션을 지정해야 할 수 있습니다. 더 자세한 내용을 알아보려면 이 기사를 참조하세요.

커티스 차우

지금 바로 엔지니어링 팀과 채팅하세요

기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

시작할 준비 되셨나요?

Nuget 다운로드 17,527,568 | 버전: 2026.2 방금 출시되었습니다