[javascript] 프린트 시에 자바스크립트를 사용하여 웹 페이지의 특정 요소를 강조하기
일반적으로 프린트 스타일은 웹 페이지의 디자인과는 다를 수 있습니다. 따라서, 프린트 시에 특정 요소를 강조하려면 JavaScript를 사용하여 스타일을 변경해야 합니다.
가장 간단한 방법은 프린트 스타일을 지정하고, 해당 스타일을 프린트 시에 적용하는 것입니다. 이를 위해 다음과 같이 @media print
쿼리를 사용하여 프린트 스타일을 정의할 수 있습니다.
@media print {
.highlight {
background-color: yellow;
}
}
그러면 위의 예제에서 .highlight
클래스로 지정된 요소는 프린트 시에 노란색으로 강조될 것입니다.
JavaScript를 사용하여 특정 요소를 강조하는 경우, window.onbeforeprint
및 window.onafterprint
이벤트를 활용할 수 있습니다. 이를 사용하면 프린트 이벤트가 발생할 때 특정 요소의 스타일을 변경할 수 있습니다.
예를 들어, 아래의 JavaScript 코드는 프린트 시에 #highlighted-element
요소의 배경색을 노란색으로 변경합니다.
window.onbeforeprint = function() {
document.getElementById("highlighted-element").style.backgroundColor = "yellow";
}
window.onafterprint = function() {
document.getElementById("highlighted-element").style.backgroundColor = "";
}
이러한 방법을 사용하면 자바스크립트를 활용하여 프린트 시에 특정 요소를 강조할 수 있습니다.