C#에서 반응형 PDF를 구현하기 위해 HTML과 CSS를 함께 사용하는 방법

올바른 CSS 미디어 유형을 선택하는 것이 왜 중요할까요?

IronPDF는 C#으로 HTML에서 PDF를 생성하며, 기본적으로 화면 스타일시트를 PDF로 렌더링할 수 있습니다. 이는 인쇄용 스타일시트가 화면용 스타일시트에 비해 문서화가 덜 되어 있거나, 사용 빈도가 낮거나, 개발이 덜 된 경우가 많기 때문에 편리합니다. 하지만 이러한 미디어 유형 간의 차이점을 이해하는 것은 전문가 수준의 PDF를 제작하는 데 매우 중요합니다.

IronPDF에서 CSS(스크린 및 인쇄)를 사용할 때 화면 및 인쇄 매체 유형 중 어떤 것을 선택하느냐에 따라 최종 PDF 출력 결과가 크게 달라집니다. 화면 매체는 상호작용 요소와 풍부한 시각적 디자인을 보존하는 반면, 인쇄 매체는 가독성과 종이 기반 소비에 맞춰 콘텐츠를 최적화합니다.

CSS3는 특정 CSS 스타일을 인쇄 문서에서만 표시되도록 하고, 다른 스타일은 웹 브라우저용으로 표시되도록 합니다. IronPDF는 HTML과 PDF 모두와 호환되므로 HTML 콘텐츠가 PDF로 렌더링되는 방식을 완벽하게 제어할 수 있습니다. 이러한 유연성을 통해 디지털 보고서, 인쇄 가능한 송장 또는 혼합 문서를 생성하든 관계없이 PDF가 의도된 사용 사례의 특정 요구 사항을 충족하도록 보장할 수 있습니다.

CSS 미디어 유형에서 'print'와 'screen'은 언제 사용해야 할까요?

HTML에 인쇄용 스타일시트를 만들고 적용하는 방법: 완벽한 인쇄용 스타일시트를 만들고 적용하는 방법을 알아보세요.

각 CSS 미디어 유형은 서로 다른 사용 사례를 대상으로 합니다. 각각 사용해보고 요구 사항에 맞는 것을 찾아보세요. 다음 지침을 고려하십시오.

다음과 같은 경우에 Print CSS 미디어 유형을 사용하십시오.

• 실물 인쇄용 문서 제작
• 송장, 보고서 또는 공식 문서 생성
• 페이지 전체에 걸쳐 테이블 헤더가 반복되어야 합니다.
• 잉크 절약은 최우선 과제입니다
• 맞춤형 용지 크기 요구 사항 처리

화면 CSS 미디어 유형을 다음과 같은 경우에 사용하십시오.

• 풍부한 시각적 요소를 포함한 인터랙티브 PDF 제작
• PDF에서도 웹 디자인의 미적 요소를 유지하기
• 배경 이미지 및 색상 포함
• 이 PDF 파일은 주로 화면에서 볼 수 있습니다.
• 반응형 HTML을 PDF로 변환하는 작업

화면 모드와 인쇄 모드 간의 시각적 차이점은 무엇인가요?

위 예시들은 동일한 HTML 콘텐츠가 CSS 미디어 유형 선택에 따라 어떻게 다르게 렌더링되는지를 보여줍니다. 인쇄용 버전은 장식 이미지와 아이콘을 제거하여 더 깔끔하고 인쇄하기 쉬운 문서를 만드는 반면, 화면용 버전은 디지털 보기를 위해 모든 시각적 요소를 유지하는 것을 알 수 있습니다.

테이블 헤더가 화면 모드에서 한 번만 나타나는 이유는 무엇입니까?

여러 페이지에 걸쳐 있는 HTML 테이블을 다룰 때는 CssMediaType 속성을 PdfCssMediaType.Print 로 설정하십시오. 이렇게 하면 테이블 헤더가 확장된 각 페이지 상단에 반복됩니다. 반면, PdfCssMediaType.Screen 는 Chrome에게 헤더를 한 번만 출력하도록 지시합니다. 이러한 동작은 특히 데이터 테이블이 긴 PDF 보고서를 생성할 때 중요합니다.

인쇄 매체 유형은 브라우저가 페이지네이션에 사용하는 특정 CSS 규칙을 활성화하며, 여기에는 헤더 반복을 가능하게 하는 thead {display: table-header-group;} 속성이 포함됩니다. 이 기능은 독자가 여러 페이지로 구성된 문서를 넘겨볼 때 맥락을 유지하는 데 필수적입니다.

반복되는 헤더에 필요한 HTML 구조는 무엇인가요?

Chrome에서 테이블 헤더를 제대로 인식하도록 하려면 헤더를 <thead> 태그로 묶으세요. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect.

다음은 권장되는 HTML 구조입니다.

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

<table>
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

C#에서 테이블 헤더 반복을 구현하는 방법은 무엇인가요?

:path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs

using IronPdf;
using IronPdf.Rendering;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Change the paper size to small
renderer.RenderingOptions.SetCustomPaperSizeinPixelsOrPoints(600, 400);

// Choose screen or print CSS media
renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print;

// Render HTML to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("tableHeader.html");

pdf.SaveAs("tableHeader.pdf");

더욱 고급스러운 표 서식 옵션을 사용하려면 표 주변 간격을 조절하는 사용자 지정 여백을 살펴보거나, 필요에 따라 표가 새 페이지에서 시작되도록 페이지 나누기를 구현해 보세요.

최종 PDF 출력물은 어떤 모습인가요?