가격표나 견적 안내 페이지를 고객이 인쇄했더니 상단 메뉴, 메인 배너, 하단 상담 버튼까지 같이 찍혀서 서너 장이 나왔다는 연락을 종종 받습니다.
인쇄용 CSS는 @media print 한 블록만 추가하면 되고, 화면 디자인은 전혀 건드리지 않습니다. 리뉴얼 때 저희가 기본으로 넣는 설정을 정리했습니다.

1. 인쇄에 필요 없는 영역 숨기기

종이에 의미 없는 건 헤더 메뉴, 배너 슬라이드, 플로팅 상담 버튼, 푸터 사이트맵 정도입니다. 본문 폭을 제한하던 값도 풀어 줘야 A4 폭을 제대로 씁니다. 화면용 CSS 맨 아래에 이어 붙이면 됩니다.

@media print {
  /* 종이에 필요 없는 영역 */
  header, nav, footer,
  .main-banner, .float-btn {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
  .content {
    max-width: none;
    margin: 0;
  }
}

2. 표와 제목이 페이지 사이에서 잘리지 않게

가격표가 두 장에 걸쳐 반으로 갈리거나, 제목만 페이지 맨 아래 남고 내용은 다음 장으로 넘어가는 경우가 제일 보기 싫습니다. break-inside와 break-after로 잘리는 위치를 지정하고, @page로 여백도 잡아 둡니다.

@media print {
  table, .price-card {
    break-inside: avoid;
  }
  h2, h3 {
    break-after: avoid;
  }
  thead {
    display: table-header-group;
  }
}
@page {
  size: A4;
  margin: 15mm;
}

thead를 table-header-group으로 두면 표가 길어 다음 장으로 넘어갈 때도 머리글이 반복되어 읽기 편합니다. 다만 표 하나가 한 장보다 길면 break-inside: avoid는 효과가 없으니, 그럴 땐 표를 나누는 편이 낫습니다.

3. 배경색이 사라지는 문제

크롬과 엣지는 인쇄 설정의 '배경 그래픽'이 기본으로 꺼져 있어서, 강조용 배경색이나 표 줄무늬가 전부 빠진 채 나옵니다. 꼭 필요한 부분에만 아래 속성을 주면 색이 유지됩니다. 잉크를 많이 쓰니 넓은 영역에는 쓰지 않는 게 좋습니다.

.price-table th {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

매번 출력할 필요는 없습니다. 크롬 개발자 도구에서 Ctrl+Shift+P를 누르고 'print'를 검색해 인쇄 미디어 에뮬레이션을 켜면, 화면에서 바로 인쇄용 스타일을 확인하며 고칠 수 있습니다.