CSS는 어떻게 인쇄 동작을 제어하여 인쇄 효율성을 향상시킬 수 있습니까?

선택적 인쇄를 위한 CSS

넓은 웹페이지를 인쇄하려면 불필요한 요소를 포함해야 하기 때문에 번거로울 수 있습니다. CSS는 "@media print" 기능을 통해 솔루션을 제공합니다. 작동 방식을 이해하면 인쇄 프로세스를 간소화하는 데 도움이 될 수 있습니다.

브라우저 지원

대부분의 최신 브라우저는 "@media print"를 지원합니다. Chrome, Firefox, Safari 및 Edge와 같은 널리 사용되는 브라우저에서 널리 채택되었습니다. 이 기능은 인쇄 동작 제어를 위한 신뢰할 수 있는 표준이 되었습니다.

특정 요소 표시

인쇄 중에 요소를 선택적으로 표시하려면 다음 두 가지 접근 방식 중 하나를 활용할 수 있습니다.

1. 화이트리스트 접근 방식(표시: block):

   • CSS 클래스(예: "printable")를 만듭니다.
   • 미디어 인쇄 쿼리 내의 모든 요소에 "display: none"을 적용합니다. "인쇄 가능" 클래스입니다.
   • 이렇게 하면 "인쇄 가능" 클래스가 있는 요소만 표시되는 동안 표시됩니다. 인쇄.

2. 블랙리스트 접근 방식(비):

   • 미디어 내의 모든 요소에 "display: none" 적용 인쇄 쿼리.
   • "인쇄 가능" 클래스가 있는 요소를 제외하려면 "not" 선택기를 사용하세요. "display: none" 규칙.
   • 이 접근 방식은 논리적인 것처럼 보이지만 CSS 지원 제한으로 인해 모든 브라우저에서 작동하지 않을 수 있습니다.

예제 코드

화이트리스트 사용 접근 방식:

@media print {
    * {display:none;}
    .printable, .printable > * {display:block;}
}

찾는 동안 요소 숨기기

찾는 동안 특정 요소를 숨기고 인쇄하는 동안 표시하려면 다음 코드를 사용할 수 있습니다.

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

이 코드는 탐색 중에 "noPrint" 클래스가 있는 요소를 숨기고 탐색 중에 "onlyPrint" 클래스가 있는 요소를 표시합니다. 인쇄합니다.

위 내용은 CSS는 어떻게 인쇄 동작을 제어하여 인쇄 효율성을 향상시킬 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!