HTML의 onbeforeprint 이벤트 속성은 페이지가 인쇄되기 직전, 즉 브라우저에서 인쇄 대화상자가 나타나기 전에 지정된 스크립트를 실행하는 이벤트 핸들러입니다. 이 속성을 활용하면 문서가 인쇄되기 전에 특정 스타일을 적용하거나 알림 메시지를 표시하는 등 다양한 작업을 수행할 수 있습니다.
문법(Syntax)
onbeforeprint 이벤트 속성의 기본 문법은 다음과 같습니다.
<tagname onbeforeprint="script"></tagname>
그럼 실제 예제를 통해 HTML onbeforeprint 이벤트 속성이 어떻게 동작하는지 살펴보겠습니다.
예제(Example)
아래 코드는 body 요소에 onbeforeprint 이벤트 속성을 적용하여, 사용자가 문서를 인쇄하려고 할 때 배경색이 자동으로 변경되는 예제입니다.
<!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 onbeforeprint="get()">
<h1>HTML onbeforeprint 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>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
이제 키보드에서 Ctrl + P를 눌러 문서를 인쇄해 보세요. 인쇄 대화상자가 열리기 직전에 onbeforeprint 이벤트가 발생하여 get() 함수가 호출되고, body의 배경색이 연한 파란색(lightblue)으로 변경되는 것을 확인할 수 있습니다.
정리
onbeforeprint 이벤트 속성은 주로 <body> 태그에 적용되며, 인쇄 전용 스타일을 동적으로 설정하거나 사용자에게 인쇄 관련 안내를 제공할 때 유용하게 사용됩니다. 참고로 반대 기능을 하는 onafterprint 이벤트 속성도 함께 활용하면, 인쇄 후 원래 상태로 되돌리는 처리도 가능합니다.