[CSS] 웹페이지 프린트 설정

프로젝트 진행중, 웹페이지의 어느 부분을 프린트해야했다.

나는 이제까지 웹에서 보여지는 뷰랑 프린트 되는 뷰랑 같다고 생각을 했는데, 그건 내 착각이었다.

 

프린트 전용 css가 있으며, page 여백을 조절할 수도 있었다.

중요한 건 내가 원하는 부분에서 떨어지고 사이즈가 조절되게 사용하는 것이었다.

하지만 프린트 설정 영역까지 내가 컨트롤 할 수는 없었다. 브라우저 고유 영역이기 때문이다.

이번 프로젝트를 정리하면서 알게된 웹페이지 프린트 설정 부분을 정리해본다.

 

 

 

 

 

---

 

* display: block

 

처음에 뷰페이지랑 같은 css를 썼더니 프린트 시 다 깨져서 css를 걷어내고 다시 작업을 했다.

display: flex로 단을 나누던걸 display:inline-block으로 변경

단은 나눠졌지만 page-break-inside: avoid; 가 안먹임

display: inlne-block을 float:left로 변경. 그리고 inline-block도 다 block으로 변경.

 

결론 : page-break-inside: avoid; 는 display:block 환경에서 사용한다.

 

---

 

* page-break-inside : 인쇄시 페이지 분리에 관한 설정을 정의한다.

 

auto : 페이지 분리 시 자동으로 계산하여 설정

avoid : 페이지 분리를 자동으로 하지 않는다.

inherit : 상위요소한데 상속받는다.

 

---

 

* 프린트 시 background 가 사라진다

 

background 이미지나 색상은 프린트시 보여지지 않는다.

 

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

위와 같은 css로 해결이 가능하지만 이는 어디까지는 크롬기반의 브라우저에서만 가능하다.

익스에서는 프린트 설정에서 배경색 및 이미지 인쇄에 체크를 해줘야 한다.

 

---

 

* 머리말, 꼬리말 제어

 

프린트를 하게되면 내가 원하지 않는 페이지 정보가 프린트 된 페이지에 인쇄가 되는데,

그 부분을 머리말, 꼬리말이라고 하겠다. 페이지의 맨 위와 아래에 붙어 나오기 때문이다.

해당 부분을 없애고 싶다면,

 

@page {
  size: auto;
  margin: 0;  /* this affects the margin in the printer settings */
}

 

위와 같이 page에 margin:0 으로 주면 페이지 여백이 사라지면서 자연스럽게 머리말, 꼬리말이 사라진다.

그런데..

이건 크롬에서만 가능한 이야기이고, 

만약에 프린트 설정 자체에 머리말/꼬리말이 보여지게 설정이 되어 있다면 익스에서는page 여백이 먹지 않는다.

 

결론 : 크롬은 가능 / 익스는 불가능

 

---

 

* 결론

 

@page {
  size: auto; // 프린트 사이즈
  margin: 10mm; // 프린트 여백
}


@media print, screen {


  * {
      margin: 0; 
      padding: 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact; // 크롬 배경화면 프린트
  }
  
  .print-wrap {
    display: block;
  }

  .print-wrap .prd-list-tr {
	page-break-inside: avoid; // 해당 엘리먼트의 내부에서 페이지 넘김을 금지
  }
    
}