>웹 프론트엔드 >JS 튜토리얼 >CSS 미디어 쿼리를 사용하여 특정 Div만 인쇄하려면 어떻게 해야 합니까?

CSS 미디어 쿼리를 사용하여 특정 Div만 인쇄하려면 어떻게 해야 합니까?

Patricia Arquette
Patricia Arquette원래의
2024-12-23 08:12:23430검색

How Can I Print Only a Specific Div Using CSS Media Queries?

CSS 미디어 쿼리를 사용하여 특정 콘텐츠 인쇄

웹 페이지에서 특정 div만 인쇄하라는 요청은 보존하려고 할 때 어려운 문제입니다. 모양을 확인하고 원하지 않는 요소를 제외합니다. 이 문제는 CSS 미디어 쿼리를 사용하여 효과적으로 해결할 수 있습니다.

다음 CSS 코드 조각은 페이지의 다른 콘텐츠에 영향을 주지 않고 지정된 div를 인쇄할 수 있는 솔루션을 제공합니다.

@media print {
  body {
    visibility: hidden;
  }
  #section-to-print {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

이 CSS 코드에서:

  • @media print {} 블록은 인쇄 관련 스타일을 정의합니다.
  • 본문 요소에 가시성이 할당됨: 페이지의 다른 모든 요소를 ​​숨기려면 Hidden.
  • 원하는 콘텐츠가 포함된 #section-to-print div에 가시성이 할당됨: visible은 인쇄 시 표시되도록 지정됩니다.
  • 위치: 절대, 왼쪽: 0 및 위쪽: 0과 함께 div가 인쇄 가능한 영역에 올바르게 배치되었는지 확인하세요.

이 방법을 활용하면 새로운 인쇄 미리보기 대화상자를 실행하거나 원본 페이지 레이아웃을 변경하지 않고도 원하는 div를 인쇄할 수 있습니다.

위 내용은 CSS 미디어 쿼리를 사용하여 특정 Div만 인쇄하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.