웹 페이지를 프린트할 때, 출처 정보를 페이지 상단이나 하단에 추가하여 사용자에게 정보를 제공할 수 있습니다. 이를 위해 자바스크립트를 사용하여 프린트 기능을 확장할 수 있습니다.

1. 페이지에 출처 정보 추가

우선, 프린트할 페이지에 출처 정보를 추가해야 합니다. 아래는 페이지 하단에 “출처: example.com”이라는 출처 정보를 추가하는 예시입니다.

<footer>
  출처: example.com
</footer>

2. 자바스크립트로 프린트 시 출처 정보 추가

다음으로, 프린트 기능을 확장하기 위해 자바스크립트를 사용합니다. window.onbeforeprint 이벤트를 사용하여 프린트 시 출처 정보를 추가할 수 있습니다.

window.onbeforeprint = function() {
  // 출처 정보를 담고 있는 요소를 복제하여 추가
  var sourceInfo = document.querySelector('footer').cloneNode(true);
  document.body.appendChild(sourceInfo);
};

위의 예시 코드는 onbeforeprint 이벤트가 발생할 때 페이지 하단의 출처 정보를 복제하여 본문에 추가합니다.

추가 고려 사항

• 출처 정보 스타일링: 추가한 출처 정보의 스타일을 프린트 시에 적합한 형태로 조정합니다.
• 다국어 지원: 다국어 페이지의 경우 출처 정보를 해당 언어로 표시합니다.

프린트 시에 페이지 출처 정보를 추가하는 방법은 페이지의 컨텐츠를 보다 유용하게 만들어줄 뿐만 아니라, 사용자에게 추가 정보를 제공하여 편의를 도모할 수 있습니다.