css - print 관련 기본 세팅

프린트를 할 때 CSS에서 하는 설정

@media print{
  nav,aside{display:none;}/* 불필요한거 안보이게 */
  body,section{padding:0;margin:0;width:100%;}

  p{page-break-after:avoid;}/* 텍스트가 잘리지 않도록 */
  img{max-width:100%!important;}/* 이미지가 잘리지 않도록 */

  /* 어떤 부분부터는 새로운 페이지에서 출력(예: article은 새로운 페이지에서 시작) */
  article{page-break-before:always;}

  /* 목록이나 이미지 묶음이 페이지가 넘어가면서 중간에 잘리지 않게 */
  ul,img{page-break-inside:avoid;}

  @page{margin:2cm;}/* 인쇄물에선 padding/margin 무시. 2cm는 여백인가? */
}

/* 
- 배경색, 배경이미지가 중요한 요소일 때.
- webkit browser(chrome, safari)에서만 가능
- 컬러프린터를 염두
 */
@media print and (color){
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}