프린트 스타일시트: 웹 페이지를 종이와 PDF에서도 쓸 수 있게 만들기

목표

인쇄하거나 PDF로 저장했을 때 콘텐츠만 담고 그 외에는 아무것도 없으며, 글자를 읽을 수 있고, 표가 온전하며, 링크 대상이 보이고, 페이지 나눔이 적절한 위치에서 일어나는 페이지를 만듭니다.

전제 조건

시맨틱 마크업(프린트 규칙은 nav, header, footer, aside, main을 다룹니다), 테스트용 브라우저 인쇄 미리보기, 그리고 MDN의 인쇄 가이드가 설명하는 메커니즘에 대한 지식: 인쇄 전용 규칙을 위한 @media print, 페이지 크기·방향·여백을 위한 @page 규칙, 인쇄 요청 전후로 문서를 조정하기 위한 beforeprint/afterprint 이벤트, 대화상자를 여는 window.print().

단계

1. 스타일시트 끝에 @media print 블록을 추가합니다(우선순위 규칙은 그대로 적용됩니다). 크롬 요소를 숨깁니다: nav, header, footer, aside, .toolbar, button { display: none }. 고정(fixed)이나 스티키(sticky) 위치 지정도 제거하는데, 그대로 두면 페이지마다 반복해서 나타나기 때문입니다.
2. 페이지를 초기화합니다: 흰 배경, 검은 글자, 세리프체나 종이에 맞는 크기로 조정한 본문 글꼴, 콘텐츠 열이 페이지 너비를 온전히 쓰도록 max-width: none.
3. 화면에서는 숨겨져 있던 것을 펼칩니다: details 요소를 열고, 모든 탭 패널과 아코디언 본문을 표시하고, 잘려 있던 텍스트를 전체 출력합니다. CSS로 손댈 수 없는 곳(보이는 행만 렌더링하는 가상화된 목록 등)은 beforeprint 이벤트를 사용합니다.
4. 링크 대상을 표시합니다: a[href^="http"]::after { content: " (" attr(href) ")" }. 단, 내부 앵커와 텍스트 자체가 이미 URL인 링크는 제외합니다. 의미가 있다면 abbr의 title도 같은 방식으로 표시합니다.
5. 페이지 나눔을 제어합니다: 표, 그림, 코드 블록, 카드 형태의 그룹에는 break-inside: avoid를 적용합니다. 제목이 페이지 하단에 고아처럼 남지 않도록 break-after: avoid를 적용합니다. 적절한 경우 주요 섹션 앞에 break-before: page를 적용합니다. thead는 기본값인 display: table-header-group을 그대로 둡니다(재정의하지 않습니다). 인쇄 엔진이 표가 걸쳐 있는 각 페이지마다 헤더 행을 반복해 줄 수 있기 때문입니다.
6. @page { size: A4; margin: 2cm }(또는 letter)를 설정하고, 첫 페이지 여백을 다르게 하려면 @page :first도 검토합니다.
7. 색상: 브라우저는 인쇄 시 배경색과 이미지를 흔히 생략합니다. 배경이 의미를 담고 있는 곳(상태 칩, 문법 강조 표시)에는 해당 요소에만 print-color-adjust: exact를 설정하고, 나머지는 테두리나 텍스트 라벨로 대신 표시합니다.
8. 브라우저 두 종류에서, 세로와 가로 방향 모두, 그리고 "PDF로 저장"으로도 한 번 인쇄 미리보기를 테스트합니다. 페이지 수를 확인하고, 지나치게 광범위한 선택자 때문에 중요한 내용이 숨겨지지 않았는지 확인합니다.

기대 결과

인쇄하면 모든 콘텐츠를 담은 간결한 문서가 나오고, 내비게이션은 없으며, 코드와 표를 읽을 수 있고, 독자가 종이를 보고 직접 입력할 수 있는 URL이 표시됩니다.

한계와 검증 근거

동작 방식은 인용된 MDN 문서를 따릅니다. 페이지 나눔 지원과 @page 기능은 엔진마다 다르며, 헤드리스 PDF 생성기는 저마다 다른 기본값을 가집니다. 대화형 콘텐츠(지도, 캔버스로 그린 차트)는 별도로 정적인 대체 이미지를 제공해야 합니다.

사이트의 크롬 요소만 숨기고, 모든 header를 숨기지 않기

header, footer, aside는 가장 가까운 섹션을 기준으로 범위가 정해지므로, header { display: none }만 단독으로 쓰면 게시물의 제목 블록이나 섹션의 각주, 인용문의 출처 표기까지 함께 사라집니다. 대신 위치나 클래스를 기준으로 페이지 수준의 크롬 요소만 대상으로 지정합니다:

@media print {
  body > header, body > footer, body > nav,
  .site-sidebar, .toolbar { display: none; }
  article header, article footer { display: block; }
}

상태를 나타내는 버튼(눌린 토글, 선택된 탭)은 남겨 두고, 인쇄에 아무 의미가 없는 컨트롤만 숨깁니다. 그런 다음 질문을 뒤집어 8단계를 다시 수행합니다. 무엇이 빠졌는지 찾는 대신, 인쇄 화면에 담겨야 할 항목의 목록을 만들고 각 항목이 실제로 있는지 확인합니다.