[CSS] 웹페이지 프린팅

출처  : http://goodthing.me/saucetip/5467

Good Thing - 좋은일, 좋은생각

1. @media print

인쇄 페이지용 미디어 쿼리로, 인쇄 시 변경되는 부분을 명시
@media print { }

1.1. display

페이지에서 숨겨야 하는 부분은 display를 통해 제어
@media print { header, footer, .no-print { display:none } }

1.2. page-break

page-break-before

해당 엘리먼트의 이전 페이지 넘김을 지정
page-break-before: [auto, inherit, always, avoid, left, right]- auto: 자동 - inherit: 부모 값 상속 - always: 해당 엘리먼트의 앞 페이지 넘김 - avoid: 해당 엘리먼트의 앞 페이지 넘김을 금지 - left: 엘리먼트 앞에서 분리된 페이지가 왼쪽 면에 위치 - right: 엘리먼트 앞에서 분리된 페이지가 오른쪽 면에 위치

page-break-after

해당 엘리먼트의 다음 페이지 넘김을 지정
page-break-after: [auto, inherit, always, avoid, left, right]

auto: 자동

inherit: 부모 값 상속

always: 해당 엘리먼트의 뒤의 페이지 넘김

avoid: 해당 엘리먼트의 뒤의 페이지 넘김을 금지

left: 엘리먼트 뒤에서 분리된 페이지가 왼쪽 면에 위치

right: 엘리먼트 뒤에서 분리된 페이지가 오른쪽 면에 위치

page-break-inside

해당 엘리먼트의 내부 페이지 넘김을 지정
page-break-after: [auto, inherit, avoid]

auto: 자동

inherit: 부모 값 상속

avoid: 해당 엘리먼트의 내부에서 페이지 넘김을 금지

1.3. background

인쇄 시, background속성(background-image, background-color)를 강제로 보이게 지정
@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

웹킷 기반 브라우저(Chrome, Safari)에서만 동작

2. @page

@page { size: auto; size: portrait; size: landscape; size: 6in; size: 4in 6in; size: A4; size: B5; size: letter; size: A4 portrait; }

사용가능한 CSS: margin, orphan, widow, page-break

참고: https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

2.1. 머리글/바닥글 제거

@page {margin:0}

Chrome 에서만 동작

2.2. 빈 페이지 제거(extra page/blank page)

이 문제는 개인적으로 IE에서 애를 먹었던 문제.
근본적인 해결 방안이 아니라 꼼수일 수 있음. ????

HTML
<ul class="list__page"> <li class="page"> <img class="content" src="/content-image.jpg" alt="content"> <img class="watermark" src="/watermark-image.svg" alt="content"> <!--watermark가 svg인 경우는, 불투명한 로고를 워터마크 이미지로 사용해야 하는데 png파일은 IE에서 인쇄시 보이지 않는 경우가 있었음. ㅜㅜ --> </li> </ul>
CSS
@page { size:210mm 297mm; /*A4*/ margin:0mm } @media print{ html, body { margin:0; padding:0; page-break-after: avoid; page-break-before: avoid } .body, .page {margin-top:-1px} /*서브픽셀 해결1*/ .page:first-child { page-break-before: auto; page-break-inside: avoid } .page { overflow:hidden; position:relative; width:210mm; height:297mm; /*서브픽셀 해결1 사용시*/ height:calc(297mm - 1px); /*서브픽셀 해결2 - IE는 미지원*/ page-break-before: always } .page > .content { /*img를 .page안에 꽉차게 */ position:absolute; top:0; left:0; right:0; width:100%; height:100% } .page > .watermark { position:absolute; top:45%; left:25%; width:50%; height:10%; z-index:50 } }

서브픽셀: A4의 297mm ???? px로 변경하는 과정에서 1402.34px 같은 서브픽셀이 발생 할 수 있음.
그래서 페이지 전/후로 빈 페이지가 발생할 수 있으므로 서브픽셀 해결법 1, 2를 통해 해결.

아 근데 이것도 저것도 다 안된다? 그럼 그냥... .print{zoom:98%} 요 편법으로 해결해보기로.;;

Memo

A4 사이즈
210 * 297(mm)
72ppi는 595 * 842(px)
300ppi는 2480 * 3508(px)