1. 인쇄화면 전용 css 적용


화면에 표시되는 불필요한 영역을 숨긴 뒤에 인쇄하고 싶을 때, 인쇄 전용 css를 사용해야 할 때 아래와 같은 방법을 쓰면 된다.


(1) print.css 프린트 전용 css 파일을 사용할 때

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

(2) 미디어 쿼리 사용

<style>

      @media print {

         /* 내용입력 */

   .print-area .classname{display:none;}

      }

</style>


2. background(color/image)


브라우저 인쇄 디폴트 설정은 배경이미지를 포함하지 않고 인쇄된다.

출력옵션으로 배경이미지 포함하여 인쇄 할 수 있지만 css로 배경이미지를 표시되게 하려면 아래와 같은 방법을 쓰면 된다.


body{-webkit-print-color-adjust:exact;}



3. 인쇄 페이지 영역 분할


원하는 영역을 선택하여 인쇄 할 페이지를 나누고 싶을때 아래와 같은 방법을 쓰면 된다.



(1) 나눌 영역을 div던, section이던, acrticle이던... 태그로 나누어 영역을 잡고,

<div class="classname">1 페이지</div>

<div class="classname">2 페이지</div>

<div class="classname">3 페이지</div>

.....


(2) print.css 에 css 구문 추가

.classname{page-break-before:always;}


' > HTML&CSS' 카테고리의 다른 글

페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (1) 2017.11.16

+ Recent posts