CSS를 사용하여 특정 HTML 요소만 인쇄하는 방법은 무엇입니까?

특정 HTML 요소만 인쇄하는 방법

div와 같은 특정 HTML 요소만 인쇄하는 작업은 종종 다음에서 발생합니다. 웹 개발. 그러나 다른 페이지 콘텐츠의 가시성을 비활성화하지 않고 이를 달성하는 것은 어려울 수 있습니다.

이 문제를 해결하기 위해 페이지의 나머지 부분을 숨기면서 원하는 요소를 인쇄할 수 있는 CSS 솔루션이 있습니다. 다음 코드를 구현하면 인쇄하려는 div를 제외하고 인쇄 중에 전체 페이지가 표시되지 않도록 지정할 수 있습니다.

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

이 코드에서는 인쇄하려는 div에 ID가 할당됩니다. "섹션별로 인쇄합니다." 브라우저가 인쇄 모드(사용자의 인쇄 명령에 의해 실행됨)에 들어가면 지정된 @media 규칙이 활성화됩니다.

이 규칙은 body 태그의 가시성 속성을 "숨김"으로 설정하여 모든 페이지 요소를 렌더링합니다. 보이지 않는. 그러나 ID가 "section-to-print"인 div의 가시성은 명시적으로 "visible"로 설정되어 있습니다.

또한 적절한 인쇄를 보장하기 위해 div는 절대적으로 배치되고 왼쪽 상단에 배치됩니다. 페이지의. 이렇게 하면 인쇄 중에 원하는 위치에 표시됩니다.

이 방법을 사용하면 추가 대화 상자나 페이지 구조를 조작할 필요 없이 특정 div를 선택적으로 인쇄할 수 있습니다. 특정 HTML 요소를 인쇄해야 하는 상황에 깔끔하고 효과적인 솔루션을 제공합니다.

위 내용은 CSS를 사용하여 특정 HTML 요소만 인쇄하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!