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

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

1. 인쇄 스타일 추가

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

코드 복사 코드는 다음과 같습니다.

인쇄용 CSS:

코드 복사 코드는 다음과 같습니다.

3. 화면 표시 스타일과 인쇄 스타일을 CSS 파일에 직접 작성:

코드 복사


코드는 다음과 같습니다. 다음:

@media print {}{

h1 {
색상: 검정색;

} h2 {}{ 색상: 회색; } }

@media print의 내용은 인쇄된 내용에만 유효하며, 그 외의 내용은 화면 표시 스타일입니다.

기타:
미디어 유형을 지정하지 않는(또는 media="all"을 활용하는) 스타일시트를 만드는 것이 유용한 경우가 많습니다.
인쇄에 대해 특별히 몇 가지 규칙을 정의할 준비가 되면 인쇄 시 보기 좋지 않은 스타일을 무효화하는 별도의 스타일시트를 만들 수 있습니다.
이 접근 방식을 사용할 때의 한 가지 문제점은 프린터 스타일이 실제로 기본 스타일시트를 재정의하는지 확인해야 한다는 것입니다. 이제 사용할 준비가 되었습니다! 중요합니다.

2. 인쇄 스타일에 대한 참고사항:

1. 브라우저는 기본적으로 배경 내용을 인쇄할 수 없으므로 인쇄 스타일에 배경을 사용하지 않는 것이 좋습니다. 브라우저가 배경을 인쇄하도록 설정된 경우에만 배경을 인쇄할 수 있습니다. (선택 과목).

배경이 인쇄되더라도 그 위에 겹쳐진 텍스트가 압도될 수 있습니다. 이는 특히 컬러 배경의 모니터에서는 강하게 대비되는 텍스트의 경우에 해당되지만 흑백 프린터로 인쇄하면 이 배경과 혼합됩니다.

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

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

2. 인쇄된 콘텐츠에 사진이 필요하면 HTML 코드에 추가하세요.

3. 인쇄 설정은 물리적 단위를 사용하므로 크기는 픽셀(px)을 사용하지 않는 것이 가장 좋습니다.

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

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

float: none;과 같이 인쇄된 스타일시트에 블록을 띄우지 마세요.

예를 들어, 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):

코드 복사 코드는 다음과 같습니다.

a[href^="http:/ /"] :after {content: " (" attr(href) ") ";}

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

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

코드 복사 코드는 다음과 같습니다. :

.break_before { 페이지 나누기 전: 항상; }
.break_after { 페이지 나누기 후: 항상 }

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

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