[javascript] 프린트 시에 자바스크립트를 사용하여 웹 페이지의 특정 요소를 강조하기

일반적으로 프린트 스타일은 웹 페이지의 디자인과는 다를 수 있습니다. 따라서, 프린트 시에 특정 요소를 강조하려면 JavaScript를 사용하여 스타일을 변경해야 합니다.

가장 간단한 방법은 프린트 스타일을 지정하고, 해당 스타일을 프린트 시에 적용하는 것입니다. 이를 위해 다음과 같이 @media print 쿼리를 사용하여 프린트 스타일을 정의할 수 있습니다.

@media print {
  .highlight {
    background-color: yellow;
  }
}

그러면 위의 예제에서 .highlight 클래스로 지정된 요소는 프린트 시에 노란색으로 강조될 것입니다.

JavaScript를 사용하여 특정 요소를 강조하는 경우, window.onbeforeprintwindow.onafterprint 이벤트를 활용할 수 있습니다. 이를 사용하면 프린트 이벤트가 발생할 때 특정 요소의 스타일을 변경할 수 있습니다.

예를 들어, 아래의 JavaScript 코드는 프린트 시에 #highlighted-element 요소의 배경색을 노란색으로 변경합니다.

window.onbeforeprint = function() {
  document.getElementById("highlighted-element").style.backgroundColor = "yellow";
}

window.onafterprint = function() {
  document.getElementById("highlighted-element").style.backgroundColor = "";
}

이러한 방법을 사용하면 자바스크립트를 활용하여 프린트 시에 특정 요소를 강조할 수 있습니다.