인쇄할 때 웹페이지 요소를 어떻게 숨길 수 있나요?

웹 페이지 인쇄 중 요소 숨기기

웹 페이지를 인쇄할 때 인쇄물에서 특정 요소를 제외하는 것이 바람직한 경우가 많습니다. 예를 들어, 화면에 보이는 버튼이나 링크가 인쇄된 버전에 나타나서 바람직하지 않은 혼란을 야기할 수 있습니다.

해결책: CSS 미디어 쿼리

CSS 미디어 쿼리 이 문제에 대한 해결책을 제시하십시오. '인쇄' 매체에 대한 미디어 쿼리 내에 특정 스타일 규칙을 적용하면 인쇄 진행 여부에 따라 요소의 가시성을 제어할 수 있습니다.

구현:

1. 인쇄 전용 스타일시트 만들기 규칙:

   스타일시트에 다음 코드를 추가하세요.

   @media print {
       .no-print, .no-print * {
           display: none !important;
       }
   }

   이 규칙은 브라우저가 실행될 때 'no-print' 클래스가 있는 모든 요소가 숨겨지도록 명시합니다. 인쇄 모드입니다.

2. 인쇄 안함 적용 클래스:

   HTML에서 인쇄 중에 숨기려는 요소에 'no-print' 클래스를 추가하세요. 예:

   <a class="no-print" href="#">Print (click Here To Print)</a>

예:

다음 예는 인쇄에 대한 'no-print' 클래스의 효과를 보여줍니다.

"Good Evening"
<a class="no-print" href="#">Print (click Here To Print)</a>

사용자가 "인쇄" 링크를 클릭하면 브라우저에 인쇄 내용만 표시됩니다. "Good Evening"이라는 텍스트가 포함되어 있습니다. "인쇄" 링크 자체는 숨겨집니다.

위 내용은 인쇄할 때 웹페이지 요소를 어떻게 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!