버튼 클릭으로 특정 HTML 콘텐츠를 인쇄하는 방법

버튼 클릭 시 특정 HTML 콘텐츠를 인쇄하려는 경우, 전체 웹페이지. 포괄적인 접근 방식은 다음과 같습니다.

미디어 쿼리 활용

CSS에서 인쇄용 미디어 쿼리를 강조하는 것이 깔끔한 솔루션입니다.

@media print {
  .noPrint {
    display: none;
  }
}

인쇄할 때 "noPrint" 클래스가 있는 요소를 숨깁니다.

CSS 선택기 적용

특정 CSS로 인쇄하려는 요소를 지정합니다. 다음과 같은 선택기:

  print me


  no print

버튼 클릭 이벤트 구현

버튼에 클릭 이벤트를 연결하여 인쇄를 시작합니다.

  Print Me

이점

이 방법은 인쇄 중에 관련 없는 요소를 효과적으로 숨겨 선명도를 유지하고 복잡함을 방지합니다. 또한 화면 보기를 위한 웹사이트의 모습을 유지하여 사용자 경험을 향상시킵니다.