인터넷에서 페이지를 프린트하면 기본적으로 헤더와 푸터가 출력되지 않는 경우가 많습니다. 하지만 자바스크립트를 사용하여 프린트 시에 페이지 상단 또는 하단에 헤더나 푸터를 추가할 수 있습니다.

프린트 스타일시트 추가

우선, 프린트 시에 표시될 헤더와 푸터 스타일을 추가하기 위해 CSS를 사용할 수 있습니다.

<style type="text/css" media="print">
  @page {
    @top-center {
      content: "내 헤더 내용";
    }
    @bottom-center {
      content: "내 푸터 내용";
    }
  }
</style>

위의 코드는 프린트 스타일시트에서 @page 규칙을 사용하여 페이지의 상단과 하단에 내용을 추가하는 방법을 보여줍니다.

window.print() 호출 시에 스크립트로 헤더와 푸터 추가

또한, 자바스크립트를 사용하여 프린트가 시작될 때 동적으로 헤더와 푸터를 추가할 수 있습니다.

window.onbeforeprint = function() {
  var header = document.createElement('div');
  header.innerText = "내 헤더 내용";
  document.body.insertBefore(header, document.body.firstChild);

  var footer = document.createElement('div');
  footer.innerText = "내 푸터 내용";
  document.body.appendChild(footer);
};

위의 코드는 onbeforeprint 이벤트를 사용하여 프린트가 시작되기 전에 div 요소를 만들고 페이지의 상단과 하단에 삽입하는 방법을 보여줍니다.

요약

자바스크립트를 사용하여 프린트 시에 페이지에 헤더나 푸터를 추가하는 방법에 대해 알아보았습니다. 각각의 방법은 페이지를 프린트할 때 원하는 헤더와 푸터를 추가하는 데 도움이 될 것입니다.

더 많은 헤더와 푸터 스타일 및 자바스크립트 이벤트 관련 정보는 MDN 웹 문서를 참조하세요.