이 기술 블로그 게시물에서는 HTML 문서의 인쇄 시에 JavaScript를 사용하여 페이지 번호를 추가하는 방법에 대해 알아볼 것입니다.

1. HTML 문서에 CSS 스타일 시트 추가하기

먼저 HTML 문서에 CSS 스타일 시트를 추가하여 페이지 번호를 표시할 위치를 설정합니다.

<style>
  @media print {
    .page-number:after {
      content: counter(page);
    }
  }
</style>

위의 코드는 페이지 인쇄 시에 .page-number 클래스 요소 뒤에 페이지 번호를 추가하는 CSS 미디어 쿼리를 정의합니다.

2. JavaScript를 사용하여 페이지 번호 적용하기

다음으로 JavaScript를 사용하여 페이지 번호를 적용합니다.

<script>
  window.onload = function() {
    var pageCount = 1;
    var pageNumbers = document.getElementsByClassName('page-number');
    for (var i = 0; i < pageNumbers.length; i++) {
      pageNumbers[i].setAttribute('data-page-number', pageCount);
      pageCount++;
    }
  };
</script>

위의 JavaScript 코드는 문서가 로드될 때 실행되어 .page-number 클래스를 가진 요소들에 순차적으로 페이지 번호를 추가합니다.

3. 페이지에 페이지 번호 추가하기

마지막 단계로 페이지에 페이지 번호를 표시할 위치에 .page-number 클래스를 추가합니다.

<div class="page-number"></div>

위 코드에서는 페이지 번호를 표시할 위치에 .page-number 클래스를 추가합니다.

이제 HTML 문서를 인쇄할 때 JavaScript를 사용하여 페이지 번호를 추가할 수 있습니다.

이렇게하면 JavaScript를 사용하여 HTML 문서의 프린트에 페이지 번호를 추가하는 방법에 대해 알아보았습니다. 페이지 번호를 추가하여 문서를 조직적으로 관리하고 사용자가 쉽게 참조할 수 있도록 도울 수 있습니다.