HTML을 PDF로 변환 시 페이지 나누기 추가 및 제거 방법 (C#)
PDF 문서에서 페이지 구분을 제어하려면 HTML 요소에 page-break-after: always;을(를) 추가하거나, IronPDF를 사용하여 C#에서 HTML을 PDF로 변환할 때 page-break-inside: avoid;을(를) 사용하여 구문을 방지합니다.
IronPDF PDF 문서 내에서 페이지 나누기를 지원합니다. PDF 문서와 HTML 문서의 주요 차이점 중 하나는 HTML 문서는 스크롤해야 하는 반면 PDF는 여러 페이지로 구성되어 인쇄가 가능하다는 점입니다. HTML 문자열을 PDF로 변환할 때 개발자는 전문적인 문서 품질을 보장하기 위해 페이지 나누기 위치를 정확하게 제어해야 하는 경우가 많습니다.
빠른 시작: HTML을 PDF로 변환할 때 페이지 나누기 구현
IronPDF 사용하여 페이지 나누기를 포함하여 HTML을 PDF로 변환합니다. 이 예제는 특정 HTML 콘텐츠 뒤에 페이지 나누기를 삽입하여 올바른 페이지네이션을 구현하는 방법을 보여줍니다. 개발자는 page-break-after: always; 스타일을 추가하여 페이지 구분이 발생하는 위치를 제어함으로써 결과 PDF 문서의 가독성과 조직을 향상시킵니다.
-
NuGet 패키지 관리자를 사용하여 https://www.nuget.org/packages/IronPdf 설치하기
PM > Install-Package IronPdf -
다음 코드 조각을 복사하여 실행하세요.
new IronPdf.ChromePdfRenderer() .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>") .SaveAs("pageWithBreaks.pdf"); -
실제 운영 환경에서 테스트할 수 있도록 배포하세요.
무료 체험판으로 오늘 프로젝트에서 IronPDF 사용 시작하기
최소 워크플로우(5단계)
- PDF에서 페이지 나누기를 사용하려면 C# 라이브러리를 다운로드하세요.
- HTML 문자열에 페이지 나누기를 적용하고 PDF로 변환합니다.
- 이미지에 페이지 나누기가 발생하지 않도록 하려면 `page-break-inside` 속성에 **`avoid`를** 설정하세요.
- 표에 페이지 나누기가 발생하지 않도록 표에도 동일한 작업을 수행하십시오.
- CSS 레벨에서 스타일을 설정하세요
HTML에서 PDF로 페이지 나누기를 추가하는 방법은 무엇인가요?
HTML에서 페이지 나누기를 만들려면 HTML 코드에 다음을 사용하세요.
<div style="page-break-after: always;"></div><div style="page-break-after: always;"></div>page-break-after CSS 속성은 HTML을 PDF로 렌더링할 때 페이지 나누기를 제어하는 가장 신뢰할 수 있는 방법입니다. 이 속성은 PDF 렌더러에게 이 스타일이 포함된 요소 바로 뒤에 페이지 나누기를 삽입하도록 지시합니다. 사용자 지정 여백 이나 특정 페이지 레이아웃을 사용할 때 페이지 나누기를 통해 콘텐츠가 의도한 위치에 정확하게 표시되도록 할 수 있습니다.
페이지 나누기 후 삽입이 다른 방법보다 더 효과적인 이유는 무엇일까요?
이 예시에서는 HTML에 다음과 같은 표와 이미지가 있는데, 표 뒤에 페이지 나누기를 추가하여 두 개의 별도 페이지에 표시하고 싶습니다. page-break-after 속성은 page-break-before 또는 수동 간격과 같은 대안에 비해 다양한 렌더링 엔진에서 보다 일관된 결과를 제공합니다. 복잡한 레이아웃을 가진 새 PDF를 만들 때 이 방법을 사용하면 예측 가능한 페이지 매김이 보장됩니다.
페이지 나누기에 어떤 요소를 사용해야 할까요?
페이지 구분은 <div>, <section> 및 <article> 같은 블록 수준 요소와 효과적으로 작동합니다. 여러 HTML 요소에 페이지 나누기 스타일을 적용할 수 있지만, 전용 <div>으로 콘텐츠를 감싸는 것이 가장 신뢰할 수 있는 결과를 제공합니다. 이는 특히 페이지 전체에서 일관된 형태로 표시되어야 하는 머리글과 바닥글을 다룰 때 매우 중요합니다.
테이블
<table style="border: 1px solid #000000">
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table><table style="border: 1px solid #000000">
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>영상
<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" /><img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />C# 코드에서 페이지 나누기를 구현하는 방법은 무엇인가요?
:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-page-breaks-page-break.csusing IronPdf;
const string html = @"
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");Imports IronPdf
Private Const html As String = "
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"
Private renderer = New ChromePdfRenderer()
Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")위 코드는 표가 첫 번째 페이지에, 이미지가 두 번째 페이지에 포함된 2페이지짜리 PDF 파일을 생성합니다.
이미지에서 페이지 나누기를 방지하려면 어떻게 해야 하나요?
이미지나 테이블 내의 페이지 나누기를 피하려면, 감싸는 DIV 요소에 적용된 CSS page-break-inside 속성을 사용하세요. 이 기술은 Chrome을 사용하여 HTML을 디버깅할 때 시각적 무결성을 유지하는 데 필수적이며, 이를 통해 PDF가 의도한 대로 정확하게 렌더링되도록 보장합니다.
<div style="page-break-inside: avoid">
<img src="no-break-me.png" />
</div><div style="page-break-inside: avoid">
<img src="no-break-me.png" />
</div>이미지를 DIV 요소로 감싸야 하는 이유는 무엇일까요?
이미지를 DIV 요소로 감싸면 페이지 나누기 동작을 더 효과적으로 제어할 수 있습니다. page-break-inside: avoid 속성은 블록 수준 요소에서 가장 신뢰할 수 있게 작동합니다. 이미지는 기본적으로 인라인 요소이므로, 이미지를 래핑하면 스타일이 제대로 적용됩니다. 이 접근 방식은 PDF 형식에서도 구조를 유지해야 하는 반응형 CSS 레이아웃을 다룰 때 특히 유용합니다.
이미지 페이지 나누기에서 흔히 발생하는 문제는 무엇인가요?
일반적인 문제로는 이미지가 여러 페이지에 걸쳐 분할되거나, 페이지 경계에서 부분적으로만 렌더링되거나, 캡션 또는 관련 텍스트가 손실되는 경우가 있습니다. 이러한 문제는 이미지가 페이지 하단에 있을 때 자주 발생합니다. page-break-inside: avoid 래퍼를 사용하면 이미지를 모두 포함한 컨테이너가 단위로 다음 페이지로 이동하도록 하여 이러한 문제를 방지합니다.
using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");Imports IronPdf
' Example showing how to prevent image breaks in a more complex layout
Const htmlWithProtectedImage As String = "
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>"
Dim renderer As New ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage)
pdf.SaveAs("ProductGallery.pdf")표에서 페이지 나누기를 피하려면 어떻게 해야 하나요?
위에서 설명한 바와 같이 테이블 내의 페이지 나누기는 CSS page-break-inside: avoid을 사용하여 방지할 수 있습니다. 이것은 스타일이 블록 수준 HTML 노드에 적용되도록 하기 위해 테이블 자체보다 감싸는 DIV에 적용하는 것이 더 좋습니다. 포괄적인 HTML을 PDF로 변환하는 튜토리얼을 제작할 때, 가독성을 위해 표 형식을 제대로 지정하는 것이 매우 중요합니다.
테이블 헤더에 thead를 언제 사용해야 할까요?
여러 PDF 페이지에 걸쳐 있는 대형 HTML 테이블의 각 페이지에 테이블 해더와 풋터를 복제하려면 테이블 내에 <thead> 그룹을 사용하십시오:
<thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead><thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead>이 <thead> 요소는 테이블이 여러 페이지에 걸쳐 있을 때 테이블 해더가 각 페이지마다 반복되도록 보장합니다. 이는 특히 재무 보고서, 데이터 목록 및 모든 페이지에서 맥락이 필요한 모든 문서에 유용합니다. 초기 설정 및 설치 개요를 위해 IronPDF 이러한 HTML 표준을 자동으로 처리합니다.
테이블을 DIV로 감싸는 것이 왜 중요할까요?
페이지 나누기 컨트롤이 있는 DIV 요소로 테이블을 감싸면 다음과 같은 몇 가지 이점이 있습니다.
- 필요한 경우 표 전체가 하나의 단위로 다음 페이지로 이동하도록 합니다.
- 헤더와 데이터 행이 분리되는 것을 방지합니다.
- 추가적인 스타일링 및 간격 조절이 가능합니다.
- 표에 캡션이나 설명을 쉽게 추가할 수 있으며, 추가된 캡션은 표와 함께 유지됩니다.
CSS3 고급 설정에서 페이지 나누기를 제어하는 방법은 무엇인가요?
더 많은 제어를 위해 thead 그룹과 함께 CSS3을 사용하십시오:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style><style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>복잡한 레이아웃에 가장 적합한 CSS 속성은 무엇일까요?
복잡한 레이아웃의 경우 여러 CSS 속성을 조합하세요.
page-break-inside: avoid- 요소가 분리되는 것을 방지합니다page-break-after: always- 요소 다음에 구문을 강제합니다page-break-before: always- 요소 전에 구문을 강제합니다orphans및widows- 페이지 나누시 최소 줄 수를 제어합니다break-inside,break-after,break-before- 현대적인 CSS3 대안
이러한 속성들이 함께 작용하여 적절한 흐름과 가독성을 갖춘 전문가 수준의 PDF 파일을 생성합니다.
페이지 나누기 문제를 어떻게 해결하나요?
페이지 나누기가 예상대로 작동하지 않을 때:
- HTML 구조가 유효한지 확인하세요
- 스타일이 블록 레벨 요소에 적용되었는지 확인합니다.
- 먼저 간단한 예제로 테스트한 다음, 복잡성을 추가하세요.
- 브라우저 개발자 도구를 사용하여 계산된 스타일을 검사합니다.
- 추가적인 제어를 위해 IronPDF의 렌더링 옵션을 활용하는 것을 고려해 보세요.
PDF 렌더링 프로그램에 따라 페이지 나누기를 처리하는 방식이 약간씩 다를 수 있으므로, 모든 시나리오에서 일관된 결과를 얻으려면 특정 사용 사례에 맞춰 테스트하는 것이 중요합니다.
자주 묻는 질문
C#에서 HTML을 PDF로 변환할 때 페이지 나누기를 추가하려면 어떻게 해야 하나요?
IronPDF를 사용하여 페이지 나누기를 추가하려면 `를 삽입하세요.
HTML 코드에서 줄 바꿈이 발생하길 원하는 위치에 `` 태그를 추가하세요. IronPDF의 ChromePdfRenderer는 이 CSS 속성을 인식하여 PDF 문서의 해당 지점에 새 페이지를 생성합니다.
PDF 변환 시 페이지 나누기를 제어하는 데 가장 신뢰할 수 있는 CSS 속성은 무엇입니까?
IronPDF를 사용할 때 가장 안정적인 방법은 `page-break-after: always;` CSS 속성을 사용하는 것입니다. 이 속성은 다양한 렌더링 엔진에서 일관된 결과를 제공하며 변환된 PDF 문서에서 예측 가능한 페이지 매김을 보장합니다.
표나 이미지 안에서 페이지 나누기를 방지하려면 어떻게 해야 할까요?
표나 이미지 내에서 원치 않는 페이지 나누기를 방지하려면 `page-break-inside: avoid;` CSS 속성을 사용하세요. IronPDF를 사용하여 HTML을 PDF로 변환할 때 이 스타일을 적용하면 표와 이미지가 여러 페이지로 나뉘지 않고 한 페이지에 그대로 유지됩니다.
페이지 나누기 스타일과 가장 잘 어울리는 HTML 요소는 무엇일까요?
페이지 나누기는 `와 같은 블록 수준 요소에서 가장 효과적으로 작동합니다.
무료로 시작하세요
무료로 시작하세요
무료 라이브 데모 예약하기
신용카드나 계정 생성은 필요하지 않습니다.
