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

인쇄물에서 원하는 지점부터 새 페이지를 시작하려면 해당 지점 앞이나 뒤의 요소에 CSS 페이지 나누기 규칙을 적용한 다음 브라우저의 인쇄 미리보기를 여세요. 요소 뒤에서 나누려면 page-break-after: always, 요소 앞에서 나누려면 page-break-before: always를 사용하고, break-after: page를 대안으로 사용할 수도 있습니다. 페이지 구성은 브라우저, 용지 크기, 인쇄 설정에 따라 달라질 수 있으므로 실제 미리보기에서 확인하세요.

Print 버튼에서 window.print()를 호출하면 브라우저의 인쇄 기능을 열 수 있습니다. 아래 예제는 필요에 맞게 수정할 수 있는 웹 페이지 소스입니다. 자신의 페이지와 설정으로 인쇄 미리보기를 열어 결과를 확인하세요.

다음 JavaScript는 스타일시트에 복사해 사용할 수 있는 CSS 규칙을 출력합니다. 첫 번째 페이지 예제와 같은 선택자와 선언을 사용합니다.

const rule = "@media print {\n  .break-page {\n    page-break-after: always;\n  }\n}";
console.log(rule);

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

page-break-after: always로 인쇄 페이지 나누기 적용

문서를 인쇄할 때만 페이지 나누기 스타일을 적용하려면 @media print를 사용하세요. 페이지 끝에 와야 하는 콘텐츠에 break-page 클래스를 지정합니다. page-break-after: always 선언은 해당 요소 뒤에서 페이지를 나누므로, 다음 제목이 인쇄물의 새 페이지에서 시작합니다.

이 전체 페이지 예제에는 제목 두 개와 인쇄 버튼이 있습니다. HTML 파일로 저장하거나 브라우저 편집기에 붙여 넣은 다음 인쇄 미리보기를 여세요. 첫 번째 제목에 클래스가 지정되어 있어 그 뒤, 즉 두 번째 제목 앞에서 페이지가 나뉩니다. 용지 크기와 인쇄 설정이 페이지 구성에 영향을 주므로 콘텐츠를 조정하고 미리보기에서 확인하세요.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after an element</title>
  <style>
    @media print {
      .break-page {
        page-break-after: always;
      }
    }
  </style>
</head>
<body>
  <h1 class="break-page">Before page break</h1>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

데모

page-break-before: always로 인쇄 페이지 나누기 적용

두 번째 방법도 인쇄에만 적용되는 동일한 래퍼를 사용하지만, 새 페이지에서 시작해야 하는 콘텐츠에 break-page를 지정합니다. page-break-before: always 선언은 해당 요소 앞에 페이지 나누기를 넣습니다. 이 예제에서는 첫 번째 제목이 나누기 앞에 남고 두 번째 제목이 다음 인쇄 페이지에서 시작합니다. 새 페이지를 시작하는 요소에 규칙을 지정하는 편이 더 명확하다면 이 배치를 선택하세요.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break before an element</title>
  <style>
    @media print {
      .break-page {
        page-break-before: always;
      }
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <h1 class="break-page">After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

break-after: page로 인쇄 페이지 나누기 적용

break-after: page 선언도 규칙이 지정된 요소 뒤에서 페이지를 나누는 방법입니다. 이 예제에서는 두 제목 사이의 div에 규칙을 적용하므로 구분 요소 뒤에 오는 두 번째 제목이 다음 인쇄 페이지에서 시작합니다. 앞의 방법과 달리 이 CSS 규칙 예제에는 @media print 래퍼가 없습니다. 인쇄할 때만 스타일을 적용하려면 래퍼를 추가하세요. 여는 태그와 닫는 태그가 짝을 이루는 버튼은 window.print()를 호출해 브라우저의 인쇄 기능을 엽니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Page break after a divider</title>
  <style>
    .break-page {
      break-after: page;
    }
  </style>
</head>
<body>
  <h1>Before page break</h1>
  <div class="break-page"></div>
  <h1>After page break</h1>
  <button type="button" onclick="window.print()">Print</button>
</body>
</html>

CSS 규칙은 페이지를 나눌 위치를 지정하지만 모든 브라우저와 인쇄 구성에서 페이지 배치가 똑같아지는 것은 아닙니다. 규칙을 적용한 뒤 브라우저의 인쇄 미리보기를 열어 콘텐츠가 의도한 위치에서 시작하는지 확인하세요. 페이지가 너무 일찍 또는 늦게 시작하면 클래스를 나누기 뒤에 와야 하는 요소나 앞에 와야 하는 요소로 옮긴 다음 미리보기를 다시 확인하세요.