CSS 인쇄화면 설정

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;}