Media queries/Printing

김동현·2026년 3월 21일
CSSdocs

mdn 학습 번역 - CSS

목록 보기
129/190

안녕하세요! 프론트엔드 강사입니다. 오늘은 웹페이지를 종이나 PDF로 인쇄할 때 어떻게 스타일을 제어하는지 MDN 공식 문서를 통해 배워보겠습니다. 그냥 번역만 하면 딱딱하니까, 제가 실무에서 겪었던 경험과 꿀팁들을 팍팍 넣어서 설명해 드릴게요!

자, 그럼 시작해 볼까요?

인쇄 (Printing)

웹사이트나 애플리케이션을 만들다 보면, 사용자가 콘텐츠를 인쇄할 때의 경험(UX)을 개선하고 싶을 때가 종종 생깁니다. 보통 다음과 같은 상황들이 있죠.

  • 종이의 크기와 모양에 맞춰서 레이아웃을 다르게 조정하고 싶을 때
  • 종이에 인쇄되었을 때 콘텐츠가 더 잘 보이도록 시각적인 스타일을 다르게 주고 싶을 때
  • 인쇄 시 더 깔끔하게 나오도록 고해상도 이미지를 사용하고 싶을 때
  • 인쇄가 시작되기 전에 인쇄 전용으로 특별히 포맷팅된 화면을 보여주는 등, 인쇄와 관련된 전반적인 사용자 경험을 조정하고 싶을 때

이 외에도 인쇄 프로세스를 직접 관리하고 싶은 다양한 경우가 있겠지만, 방금 말씀드린 것들이 가장 흔한 시나리오예요. 이 문서에서는 웹 콘텐츠가 더 예쁘게 인쇄될 수 있도록 돕는 팁과 기술들을 제공합니다.

👨‍🏫 강사님의 꿀팁 & 보충설명:
실무에서는 쇼핑몰의 영수증, 비행기 예약 바우처, 또는 수료증 같은 페이지를 만들 때 이 기능이 필수적이에요! 웹 화면에서는 화려한 내비게이션 바나 광고 배너가 필요하지만, 막상 프린터로 뽑을 때는 잉크만 낭비하고 지저분해지잖아요? 그래서 인쇄할 때는 오직 '핵심 콘텐츠'만 깔끔하게 나오도록 처리해 주는 것이 프론트엔드 개발자의 센스랍니다.

이 문서의 목차

인쇄용 스타일 시트 사용하기 (Using a print style sheet)

여러분 프로젝트의 <head> 태그 안에 다음 코드를 추가해 보세요.

<link href="/path/to/print.css" media="print" rel="stylesheet" />

👨‍🏫 강사님의 꿀팁 & 보충설명:
위 코드에서 핵심은 media="print" 속성입니다! 브라우저에게 "이 CSS 파일은 화면에 그릴 때는 무시하고, 사용자가 인쇄(Ctrl+P / Cmd+P)를 누를 때만 적용해!"라고 알려주는 역할을 해요.
이렇게 인쇄용 CSS 파일을 따로 분리하면 코드를 관리하기도 편하고, 평소 웹페이지를 로딩할 때 불필요한 렌더링 블로킹을 줄일 수 있어서 성능 최적화에도 아주 좋습니다.

미디어 쿼리와 @page를 사용하여 인쇄된 콘텐츠 제어하기 (Using media queries and @page to control printed content)

별도의 파일을 만들지 않고도, CSS의 @media 규칙을 사용하면 화면에 보여질 때와 종이/PDF로 인쇄될 때의 스타일을 다르게 설정할 수 있어요. print 미디어 타입은 인쇄 매체를 위한 스타일을 지정해주는데, 여기에 작성된 스타일은 오직 인쇄될 때만 쏙 적용된답니다.

여러분의 기존 스타일시트 맨 끝에 아래 코드를 추가해 보세요. 참고로 CSS의 명시도(specificity)와 우선순위 규칙은 여기서도 똑같이 적용된다는 점 잊지 마시고요!

@media print {
  /* 모든 인쇄용 스타일은 여기에 작성합니다 */
  #header,
  #footer,
  #nav {
    display: none !important;
  }
}

👨‍🏫 강사님의 꿀팁 & 보충설명:
바로 이거예요! 제일 많이 쓰는 패턴입니다. 보통 상단 헤더(#header), 하단 푸터(#footer), 사이드바 내비게이션(#nav) 같은 것들을 display: none으로 숨겨주는 작업을 여기서 다 합니다. 명시도 때문에 가끔 스타일이 씹히는(?) 경우가 있어서 예제처럼 !important를 써서 확실하게 가려주는 방식을 실무에서도 종종 사용해요.

또한, @page 규칙을 사용하면 인쇄되는 페이지의 크기(dimensions), 방향(가로/세로 방향), 여백(margins) 등 인쇄물 자체의 물리적인 특징도 수정할 수 있습니다. 이 @page 규칙은 출력되는 전체 페이지에 한 번에 적용할 수도 있고, 첫 페이지나 짝수/홀수 페이지 등 특정 페이지만 골라서 적용할 수도 있어요.

👨‍🏫 강사님의 보충설명:
예를 들어 @page { size: A4 landscape; margin: 2cm; } 라고 적어주면 A4 용지를 가로 방향으로 눕히고, 상하좌우 여백을 2cm씩 딱 맞춰서 인쇄할 수 있습니다. 표가 길어서 중간에 어정쩡하게 잘리는 걸 막고 싶을 때는 page-break-inside: avoid; 같은 속성과 함께 조합해서 쓰면 정말 유용하답니다!

인쇄 요청 감지하기 (Detecting print requests)

브라우저는 사용자가 언제 인쇄를 시작하고 마쳤는지 알 수 있도록 beforeprint 이벤트와 afterprint 이벤트를 보내줍니다. 이 기능들을 활용하면 인쇄하는 도중에 화면에 보여지는 UI를 자유롭게 조정할 수 있어요. (예를 들면, 인쇄가 진행되는 동안에는 화면에 특정 요소를 숨기거나 안내 메시지를 띄워주는 식이죠).

👨‍🏫 강사님의 꿀팁 & 보충설명:
자바스크립트로 인쇄 시점을 가로채서 뭔가 동작을 해야 할 때 아주 유용해요! 예를 들어 화면에 복잡한 애니메이션 차트가 있는데, 이걸 그대로 인쇄하면 엉망으로 나올 수 있잖아요? 그럴 때 beforeprint 이벤트가 발생하면 차트를 정적인 이미지로 싹 바꿔치기 해두고, 인쇄가 끝나서 afterprint 이벤트가 발생하면 다시 원래 차트로 복구시키는 고급 기술을 구현할 수 있습니다.

예제 (Examples)

실무에서 자주 쓰이는 유용한 예제들을 살펴볼게요.

완료 시 자동으로 창 닫기 (Automatically close the window when finished)

다음 예제는 사용자가 인쇄를 완료(또는 취소)하고 나면 열려있던 창을 자동으로 스르륵 닫아주는 코드입니다.

window.addEventListener("afterprint", () => self.close);

👨‍🏫 강사님의 꿀팁 & 보충설명:
결제 완료 후에 "영수증 인쇄하기" 버튼을 눌렀을 때 팝업창이 뜨는 경우 많이 보셨죠? 영수증 출력이 다 끝났는데 팝업창이 덩그러니 남아있으면 사용자가 직접 'X'를 눌러 닫아야 해서 귀찮습니다. 위 코드를 한 줄 넣어주면 출력 후 팝업이 깔끔하게 알아서 닫히기 때문에 센스 있는 프론트엔드 개발자라는 소리를 들을 수 있어요!

외부 페이지를 열지 않고 인쇄하기 (Print an external page without opening it)

만약 현재 페이지를 벗어나거나 새 창을 띄우지 않고 어딘가에 있는 '외부 페이지'를 몰래 불러와서 인쇄만 딱 하고 싶다면, 눈에 보이지 않게 숨겨진 <iframe>을 활용하면 됩니다. (HTMLIFrameElement 참고). 사용자가 내용물을 다 인쇄하고 나면 만들어뒀던 iframe을 스윽 삭제해 주는 거죠.

아래는 external-page.html이라는 외부 파일을 불러와 인쇄하는 기발한 예제 코드입니다.

HTML

<button id="print_external">Print external page!</button>

JavaScript

function setPrint() {
  const closePrint = () => {
    document.body.removeChild(this);
  };
  this.contentWindow.onbeforeunload = closePrint;
  this.contentWindow.onafterprint = closePrint;
  this.contentWindow.print();
}

document.getElementById("print_external").addEventListener("click", () => {
  const hideFrame = document.createElement("iframe");
  hideFrame.onload = setPrint;
  hideFrame.style.display = "none"; // iframe을 화면에서 숨깁니다
  hideFrame.src = "external-page.html";
  document.body.appendChild(hideFrame);
});

👨‍🏫 강사님의 꿀팁 & 보충설명:
정말 훌륭한 테크닉입니다. 버튼을 누르면 안 보이는 iframe을 몰래 DOM에 끼워 넣고, 그 안의 문서가 다 로딩(onload)되면 강제로 인쇄 창을 띄웁니다(print()). 그리고 인쇄가 완료되면 iframe 자체를 DOM에서 깨끗하게 지워버리는 거죠.

주의할 점: 이 방식은 동일 출처 정책(CORS)의 영향을 받습니다. 완전히 다른 도메인(예: google.com)을 iframe으로 불러와서 몰래 인쇄하는 것은 보안상 브라우저가 막아버려요. 보통 여러분의 프로젝트 내부 서버에 있는 경로(예: /receipt/1234.html)를 불러올 때 사용해야 제대로 작동합니다.

같이 보기 (See also)

더 깊이 공부하고 싶으신 분들은 아래 링크들도 꼭 한 번씩 들어가서 읽어보세요!

MDN 개선에 도움을 주세요 (Help improve MDN)

이 페이지가 도움이 되었나요? (Was this page helpful to you?)

이 페이지는 MDN 기여자들에 의해 2025년 11월 7일에 마지막으로 수정되었습니다.

어떠신가요? 이제 CSS를 활용해서 인쇄 화면도 자유자재로 다루실 수 있을 거예요. 실무에서 바로 적용해 보시고 더 궁금한 점이 생기면 언제든 질문 남겨주세요!

profile
김동현
프론트에_가까운_풀스택_개발자
이전 포스트

Media queries/Testing

다음 포스트

Nesting/Nesting at-rules

0개의 댓글