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)