HTML로 인쇄하는 동안 페이지 나누기

1. page-break-after 속성을 always 내부 @media print로 설정하여 HTML의 페이지 나누기
2. page-break-before 속성을 always 내부 @media print로 설정하여 HTML의 페이지 나누기
3. break-after 속성을 page로 설정하여 HTML의 페이지 나누기

이 문서에서는 HTML 콘텐츠를 인쇄하는 동안 페이지 나누기를 강제하는 몇 가지 방법을 설명합니다.

page-break-after 속성을 always 내부 @media print로 설정하여 HTML의 페이지 나누기

CSS의 @media print 규칙을 사용하면 HTML 콘텐츠를 인쇄하는 동안 규칙을 적용할 수 있습니다. 이 규칙으로 스타일을 변경할 수 있습니다.

JavaScript를 사용하여 지정된 HTML 콘텐츠를 인쇄하는 onclick() 이벤트를 만들 수 있습니다. window.print() 메서드는 현재 창을 인쇄합니다.

onclick() 이벤트를 사용하여 이 메서드를 호출할 수 있습니다.

CSS에서 @media print를 사용하여 page-break-after 속성을 always로 설정하여 HTML 요소가 해당 지점에서 페이지를 나누도록 할 수 있습니다.

예를 들어 h1 태그를 사용하여 두 개의 제목을 만듭니다. 첫 번째 머리글의 이름을 페이지 나누기 전으로 지정하고 다른 머리글의 이름을 페이지 나누기 후로 지정합니다.

첫 번째 제목에 break-page라는 클래스 이름을 지정합니다. 그런 다음 Print 버튼을 만들고 버튼에 onclick 리스너를 추가하고 window.print() 메서드를 호출합니다.

CSS 섹션의 @media print 규칙에서 break-page 클래스를 선택합니다. 다음으로 page-break-after 속성을 always로 설정합니다.

아래 예는 인쇄 버튼을 클릭한 후 페이지 나누기 전 제목이 첫 번째 페이지에 나타나는 반면 두 번째 제목과 버튼은 인쇄하는 동안 두 번째 페이지에 나타납니다. HTML을 인쇄하는 동안 page-break-after 속성을 사용하여 페이지를 나눌 수 있습니다.

예제 코드:

<h1 class="break-page">Before page break </h1>
<h1>After page break</h1>
<button onclick="window.print()">Print</button>

@media print {
    .break-page {
        page-break-after: always;
    }
}

데모

page-break-before 속성을 always 내부 @media print로 설정하여 HTML의 페이지 나누기

이 방법은 이전 방법과 매우 유사합니다. 차이점은 page-break-before 속성을 사용하고 있다는 것입니다.

@media print 규칙에서도 유사하게 사용됩니다. 이 방법은 page-break-before 속성을 사용한 HTML 콘텐츠 앞에서 페이지를 나누도록 합니다.

예를 들어 첫 번째 방법과 마찬가지로 두 개의 제목을 만듭니다. 이번에는 두 번째 제목에 break-page 클래스 이름을 지정합니다.

다음으로 window.print() 메소드를 호출하는 onclick 리스너가 있는 버튼을 만듭니다. CSS 섹션의 @media print 내부에서 break-page 클래스를 선택하고 page-break-before 속성을 always로 설정합니다.

페이지 나누기는 인쇄 버튼을 클릭할 때 페이지 나누기 후라는 두 번째 머리글 앞에 나타납니다.

예제 코드:

<h1>Before page break </h1>
<h1 class="break-page">After page break</h1>
<button onclick="window.print()">Print</button>

@media print {
    .break-page {
        page-break-before: always;
    }
}

break-after 속성을 page로 설정하여 HTML의 페이지 나누기

HTML에서 페이지를 나누기 위해 요소의 break-after 속성을 page로 설정할 수 있습니다. 속성이 사용된 요소 다음에 페이지가 나뉩니다.

그런 다음 위의 방법과 같이 window.print()를 사용하여 HTML 페이지를 인쇄할 수 있습니다. 이 방법은 @media print 규칙을 사용하지 않는다는 점에서 위의 방법과 다릅니다.

예를 들어 평소와 같이 두 개의 제목을 만듭니다. 제목 사이에 빈 div를 만들고 break-page라는 클래스 이름을 지정합니다.

다음으로 window.print() 메서드를 호출하는 onclick 리스너로 클릭 가능한 버튼을 만듭니다.

break-page 클래스를 선택하고 CSS에서 break-after 속성을 page로 설정합니다.

인쇄하는 동안 첫 번째 머리글 다음에 페이지가 나뉩니다. 이런 식으로 break-after 속성을 사용하여 HTML에서 페이지를 나눌 수 있습니다.

예제 코드:

<h1>
Before page break
</h1>
<div class="break-page"></div>
<h1>
After page break
</h1>
<button onclick="window.print();" />Print</button>

.break-page {
    break-after: page;
}