CSS를 사용하여 웹 페이지의 특정 Div만 인쇄하려면 어떻게 해야 합니까?

웹 페이지의 특정 콘텐츠 인쇄

다른 콘텐츠에 영향을 주지 않고 웹 페이지의 특정 div만 인쇄하는 것은 어려운 작업일 수 있습니다. 이 문제를 해결하기 위해 CSS를 활용하는 한 가지 효과적인 접근 방식이 아래에 제시되어 있습니다.

CSS 솔루션:

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

설명:

이 CSS 코드는 @media 인쇄 규칙을 사용하여 인쇄 미리보기에 스타일을 구체적으로 적용합니다. 작동 방식은 다음과 같습니다.

1. 가시성을 숨김으로 설정하여 페이지 본문 전체(인쇄할 div 제외)를 숨깁니다.
2. 대상 div의 가시성 설정( #section-to-print)를 표시합니다.
3. 대상 div를 페이지 왼쪽 상단(왼쪽: 0; 위쪽: 0;)에 절대적으로 배치합니다. 올바르게 인쇄되는지 확인하세요.

대체 접근 방식:

디스플레이를 사용하여 콘텐츠를 숨기는 것이 옵션처럼 보일 수 있지만, display:none은 하위 항목도 숨깁니다. 상당한 페이지 재구성이 필요할 수 있습니다.

이 솔루션의 이점:

이 CSS 전용 솔루션:

• 선택적으로 인쇄할 수 있습니다. 다른 페이지 요소를 비활성화하지 않고 원하는 div만.
• 새 페이지 생성을 방지합니다. 창을 통해 원활한 인쇄 경험을 보장합니다.
• 적용된 스타일이 웹 표시용인 경우에도 인쇄를 위해 대상 div의 시각적 스타일을 유지합니다.

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