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.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (0) 2017.11.16

+ Recent posts