CSS를 사용하여 웹 페이지를 인쇄할 때 표시되는 요소를 제어하려면 어떻게 해야 합니까?

CSS로 인쇄할 때 선택적 콘텐츠 표시

많은 웹페이지에는 광범위한 데이터, 레이아웃 및 콘텐츠가 포함되어 있습니다. 인쇄를 최적화하기 위해 특정 요소만 표시할 수 있습니다. 인쇄를 위해 별도의 페이지를 만드는 것이 해결책이 될 수 있지만 CSS는 "@media print" 기능을 통해 강력한 대안을 제공합니다.

"@media print"에 대한 브라우저 지원

"@media print" 기능은 최신 브라우저에서 널리 지원됩니다. 페이지가 인쇄될 때 CSS 규칙을 구체적으로 적용할 수 있습니다. "@media print"를 지원하는 브라우저는 다음과 같습니다:

• Chrome
• Firefox
• Safari
• Edge

인쇄 대상 요소

인쇄하려는 요소를 제외한 모든 요소를 ​​숨기려면 "display:none" 속성을 사용할 수 있습니다. 그런 다음 인쇄할 때 표시하려는 요소에 "인쇄 가능" 클래스를 추가하고 "@media print" 블록 내의 이러한 요소에 "display:block"을 적용합니다.

CSS:

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

그러나 인쇄할 때만 요소를 표시하고 브라우저에서 숨기려면 반대 접근 방식을 사용하는 것이 좋습니다.

CSS:

@media print {
    body *:not(.printable *) {
        display: none;
    }
}

이 기술은 인쇄 시 "printable" 클래스가 있는 요소를 제외한 모든 요소를 ​​숨깁니다.

추가 고려 사항

• 다음과 같은 경우 연결된 콘텐츠가 표시되지 않도록 하려면 인쇄하려면 적절한 요소나 링크에 "noPrint" 클래스를 추가하세요.
• 로고, 레터헤드 또는 인쇄할 때만 나타나야 하는 기타 요소를 표시하려면 "onlyPrint" 클래스를 사용하여 섹션을 만드세요.

CSS:

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

HTML:

<div class="noPrint">

이러한 방법을 따르면 가시성을 쉽게 제어할 수 있습니다. 웹 페이지를 인쇄할 때 특정 요소를 사용하여 혼란을 줄이고 인쇄 효율성을 최적화합니다.

위 내용은 CSS를 사용하여 웹 페이지를 인쇄할 때 표시되는 요소를 제어하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!