HTML onafterprint 이벤트 속성은 페이지의 인쇄가 시작되었거나, HTML 문서에서 인쇄 대화 상자가 닫혔을 때 실행되는 이벤트 핸들러입니다. 사용자가 브라우저의 인쇄 기능(Ctrl + P)을 호출하거나 인쇄 창을 닫는 순간 지정된 자바스크립트 코드를 실행할 수 있어, 인쇄 전후로 페이지 스타일이나 콘텐츠를 동적으로 변경하는 데 유용합니다.
onafterprint 이벤트 속성 문법
onafterprint 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onafterprint="script"></tagname>
- tagname: 이벤트를 적용할 HTML 요소 (주로 <body> 태그에 사용)
- script: 인쇄 관련 이벤트 발생 시 실행될 자바스크립트 코드
HTML onafterprint 이벤트 속성 예제
다음은 onafterprint 이벤트 속성을 활용한 실제 예제입니다. 사용자가 문서를 인쇄하면 배경색이 하늘색으로 변경되도록 구현했습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
p {
font-size: 1.1rem;
}
</style>
</head>
<body onafterprint="get()">
<h1>HTML onafterprint Event Attribute Demo</h1>
<p>I'm a paragraph HTML element with some dummy text.</p>
<p style="color:#db133a;">Now try to print this document.</p>
<div class="show"></div>
<script>
function get() {
document.body.style.background = "lightblue";
}
</script>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 화면이 나타납니다.
이제 Ctrl + P 키를 눌러 문서를 인쇄해 보세요. 인쇄 대화 상자가 닫히는 순간 onafterprint 이벤트가 트리거되어 get() 함수가 실행되고, 페이지 배경색이 하늘색(lightblue)으로 변경되는 것을 확인할 수 있습니다.
정리
onafterprint 이벤트 속성은 인쇄 작업과 연동된 사용자 경험을 만들 때 활용할 수 있습니다. 참고로 짝을 이루는 onbeforeprint 이벤트 속성은 인쇄 대화 상자가 열리기 직전에 실행되므로, 두 이벤트를 함께 사용하면 인쇄 전에 특정 요소를 숨기고 인쇄 후에 원래 상태로 복원하는 등의 처리도 가능합니다.