웹 화면과 출력물(프린트)은 목적이 다릅니다.
@media print를 사용하면 인쇄 시에만 적용되는 전용 스타일을 지정해 화면용과 분리해 관리할 수 있어요.
@media print란?
- 미디어 쿼리의 한 종류로, 인쇄/인쇄 미리보기에만 스타일을 적용합니다.
@media print {
/* 인쇄 전용 스타일 */
}기본 패턴(자주 쓰는 룰)
@media print {
/* 불필요한 UI 숨김 */
header, nav, footer, .btn, .ad, .pagination { display: none !important; }
/* 가독성 최적화 */
body { background: white !important; color: black !important; }
* { box-shadow: none !important; text-shadow: none !important; }
/* 표 */
table { width: 100%; border-collapse: collapse; }
table, th, td { border: 1px solid #000; }
/* 페이지 나눔 */
h2 { page-break-before: always; } /* 제목 앞에서 페이지 분리 */
.page-break { page-break-after: always; } /* 해당 구역 뒤에서 분리 */
/* 요소 단위 분리 방지 */
.card, figure, table { break-inside: avoid; page-break-inside: avoid; }
}인쇄 페이지 크기/여백 제어
@page {
size: A4; /* A4, Letter 등 */
margin: 16mm; /* 여백 */
}
/* 브라우저마다 @page 지원/적용이 상이할 수 있음 */참고: Chrome/Edge는 비교적 잘 적용되지만, 브라우저·프린터 설정의 여백/비율 옵션이 우선될 때도 있어요.
“배경색/배경이미지 안 찍힘” 이슈
대부분의 브라우저는 기본적으로 배경 그래픽 인쇄를 끄는 경우가 많습니다.
사용자 쪽 인쇄 대화상자에서 “배경 그래픽(배경 색/이미지) 인쇄” 옵션을 켜야 확실합니다.
추가로 CSS에서 다음을 권장하긴 해요(강제는 아님):
@media print {
* {
-webkit-print-color-adjust: exact; /* Chromium 계열 */
print-color-adjust: exact;
}
}링크 URL 함께 출력하기
@media print {
a[href]:after {
content: " (" attr(href) ")";
font-size: 90%;
}
}DevTools로 프린트 스타일 미리보기
- Chrome: DevTools → Command Palette(CTRL/⌘ + Shift + P) → “Rendering” → Emulate CSS media:
print - 실제 확인은 PDF로 저장해보는 게 가장 정확합니다.
🧪 CodePen 실습 예제
1. 화면/인쇄 전용 UI 분리 + 링크 URL 출력
✅ 화면에서는 헤더·네비·버튼이 보이고, 인쇄 미리보기에서는 본문만 보이며 링크 뒤에 URL이 자동으로 붙습니다.
✅ “페이지 나눔” 버튼으로 테스트용 구역을 만들 수 있어요.
2. 표(테이블) 인쇄 최적화 + 배경/경계선 문제 해결
✅ 화면에서는 줄무늬(지브라) 행, 인쇄에서는 잉크 절약 & 선명한 테이블
✅border-collapse, 명확한border,print-color-adjust처리
3. 긴 문서에서 “제목 기준”으로 페이지 나누기
✅ 큰 섹션이 시작될 때마다
page-break-before: always;
✅ 카드/이미지가 중간에서 끊기지 않게break-inside: avoid적용
실무 체크리스트
- 인쇄에서 불필요한 UI(헤더/네비/버튼/광고) 숨겼는가?
- 텍스트 대비(검정/흰색)와 폰트 크기를 가독성 위주로 조정했는가?
- 표/카드/이미지가 중간에서 잘리지 않도록
break-inside: avoid를 사용했는가? - 링크 URL 출력이 필요한가?
a[href]:after로 처리했는가? - 페이지 크기/여백(@page) 설정이 필요한가? 브라우저/프린터 설정과 충돌하지 않는지 확인했는가?
- 배경 그래픽 인쇄 옵션이 필요하면 사용자에게 안내했는가?
자주 묻는 질문(FAQ)
Q. PDF 저장 시 배경색이 빠집니다.
A. 브라우저 인쇄 설정에서 “배경 그래픽”을 켜세요. CSS의 print-color-adjust: exact는 힌트일 뿐, 사용자 설정이 우선될 수 있습니다.
Q. 요소가 페이지 중간에서 잘립니다.
A. 해당 요소에 break-inside: avoid; page-break-inside: avoid;를 적용하세요. 100% 보장은 아니지만 대부분의 경우 개선됩니다.
Q. @page가 안 먹는 것 같아요.
A. 브라우저/프린터 드라이버/OS에 따라 여백/용지 설정이 강제될 수 있습니다. 인쇄 대화상자에서 여백 설정을 “기본/없음” 등으로 조절해 보세요.
결론
@media print는 화면과 출력물의 목적을 분리하고, 인쇄 경험을 최적화하는 핵심 도구입니다.- 불필요한 요소를 숨기고, 가독성을 높이며, 페이지 나눔과 링크 출력까지 — 작은 손질로 문서 품질을 크게 개선할 수 있어요.
