JQuery가 CSS를 인쇄 스타일과 결합하는 방법_jquery

이 섹션의 내용:
JQuery 및 CSS 작업 인쇄 스타일.

1. 인쇄 스타일 추가

1. 아래와 같이 각각 화면 표시용 CSS 파일과 인쇄용 CSS 파일을 준비합니다.
화면 표시용 CSS 파일:

인쇄용 CSS:

h1 {
색상: 검정색;

배경: 없음 배경 이미지와 색상을 제거합니다.

background-color 속성을 사용하여 다음과 같이 배경색을 흰색으로 설정할 수 있습니다: background-color: white.
배경 단축키인 background:white를 사용해도 동일한 효과를 얻을 수 있습니다. 따라서 background: white;
와 같은 명령문은 배경색을 흰색으로 설정할 뿐만 아니라 배경 이미지도 제거합니다. 배경 바로가기 속성을 사용하면 아주 적은 코드로 흰색 배경 설정과 이미지 제거라는 두 가지 목적을 달성할 수 있습니다.

4. 불필요하거나 보조적인 콘텐츠를 숨깁니다. 디스플레이: 없음

5. 콘텐츠가 떠다니지 않도록 하세요. 일부 브라우저에서는 플로팅 div를 인쇄할 때 문제가 발생하므로 특별한 주의가 필요합니다.

예를 들어, Gecko 기반 브라우저(예: Netscap 6)를 사용하여 인쇄 페이지를 탐색하면 부동 요소의 콘텐츠가 잘립니다.
콘텐츠가 프린터로 전송되지 않으며 다음 페이지에 흔적도 남지 않고 사라집니다.

6. HTML 코드에서 중요한 내용에 우선순위를 두어 인쇄 스타일에 많은 수고를 덜도록 하세요.

7. 인쇄는 웹 페이지와 다릅니다. 인쇄 시 흰색 테두리를 남겨야 하며 단위는 인치(in)입니다.

8. 페이지의 모든 텍스트가 검은색으로 인쇄되도록 하려면 와일드카드 선택기(54페이지 참조)와 !important를 사용하여 각 태그의 형식을 검은색 텍스트로 지정하는 단일 스타일을 만듭니다.

코드 복사

*{ color: ##000# ! 중요 }

9. 인쇄 시 링크 URL 정보 표시:
고급 선택기: after와 고급 CSS 속성인 content를 사용하여 스타일 요소 끝에 화면에 표시되지 않는 텍스트를 인쇄합니다.

기존 문제:
Internet Explorer 6 이하(IE 7도 아님)에서는 이후 선택기와 콘텐츠 속성 트릭이 작동하지 않습니다.
그러나 Firefox와 Safari에서는 작동하므로 방문자가 브라우저를 사용할 수 있도록 최소한 URL이 명확하게 명시되어 있습니다.

이렇게 하려면 각 링크 뒤에 URL을 인쇄하는 인쇄 스타일시트에 스타일을 추가하세요. 더 보기 좋게 만들기 위해 괄호와 같은 다른 텍스트 항목을 추가할 수도 있습니다.
a:after {content: " (" attr(href) ") ";}
그러나 이 CSS는 외부 또는 내부를 구분하지 않습니다. 링크를 사용하여 동일한 사이트의 다른 페이지에 대한 쓸모 없는 상대 문서 링크도 인쇄합니다: "홈 페이지 방문(../../index.html)." 약간의 CSS 3 마법을 사용하면 이 스타일을 강제로 절대 인쇄만 할 수 있습니다. 다음과 같은 URL(예: http://로 시작하는 URL):

10. 인쇄에 페이지 나누기 추가: 널리 알려진 두 가지 속성은 페이지 나누기 전과 페이지 나누기 후입니다.
page-break-before는 웹 브라우저가 지정된 스타일 앞에 페이지 나누기를 삽입하도록 지시합니다. 새 페이지에 이미지를 인쇄하고 전체 페이지에 맞추려면 page-break-before 속성을 사용하십시오.
요소가 인쇄된 페이지의 마지막 항목으로 나타나도록 하려면 해당 요소의 스타일에
page-break-after: Always를 추가하세요.

다음과 같이 .break_after 및 .break_before와 같은 두 가지 클래스 스타일을 만듭니다.

그런 다음 페이지 상단이나 하단에 인쇄해야 하는 요소에 이러한 스타일을 선택적으로 적용할 수 있습니다.

3. 인쇄 스타일 테스트
일반적으로 프린터를 사용하여 테스트하는 것은 불가능합니다. IE 브라우저의 "파일" 메뉴 표시줄에 "인쇄 미리보기"가 있으며, 이 인쇄 미리보기를 사용할 수 있습니다. 테스트합니다.