웹 페이지를 화면에서 볼 때와 종이로 인쇄할 때 각각 최적화된 글꼴을 사용하고 싶다면, CSS의 @media 규칙을 활용하면 됩니다. 이 방법을 사용하면 하나의 스타일시트 안에서 출력 매체별로 다른 글꼴 모음(font-family)을 손쉽게 지정할 수 있습니다.
기본 원리
CSS의 미디어 쿼리는 콘텐츠가 표시되는 매체(디바이스)에 따라 서로 다른 스타일을 적용할 수 있게 해주는 기능입니다. 대표적으로 다음 두 가지 매체 유형이 자주 사용됩니다.
- screen — 컴퓨터 모니터, 태블릿, 스마트폰 등 화면 출력용
- print — 프린터로 문서를 인쇄하거나 PDF로 저장할 때 적용
또한 여러 매체를 쉼표(,)로 나열하여 하나의 규칙으로 묶으면, 해당 매체들에 공통으로 적용되는 스타일을 한 번에 정의할 수 있습니다.
예제 코드
아래 예제는 화면에는 산세리프 계열의 글꼴(verdana, arial)을, 인쇄에는 세리프 계열의 글꼴(georgia, times)을 지정합니다. 그리고 글자 크기는 화면과 인쇄 양쪽 모두 동일하게 10pt로 설정했습니다.
<style>
<!--
@media screen {
p.bodyText {font-family:verdana, arial, sans-serif;}
}
@media print {
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print {
p.bodyText {font-size:10pt}
}
-->
</style>코드 설명
1. 화면 전용 스타일 (@media screen)
p.bodyText {font-family:verdana, arial, sans-serif;} — 브라우저 화면에서는 가독성이 좋은 verdana와 arial 같은 산세리프(sans-serif) 글꼴이 적용됩니다. 지정한 글꼴이 없을 경우를 대비해 마지막에 일반 sans-serif 계열을 폴백(fallback)으로 함께 명시하는 것이 좋습니다.
2. 인쇄 전용 스타일 (@media print)
p.bodyText {font-family:georgia, times, serif;} — 인쇄물에서는 georgia나 times 같은 세리프(serif) 글꼴이 적용됩니다. 세리프 글꼴은 종이 위에서 긴 텍스트를 읽기에 편안하다는 장점이 있어 인쇄 문서에 널리 사용됩니다.
3. 공통 스타일 (@media screen, print)
p.bodyText {font-size:10pt} — 쉼표로 구분된 @media screen, print 규칙은 화면과 인쇄 양쪽 모두에 적용됩니다. 이처럼 여러 매체를 한 번에 지정하면 중복 코드를 줄일 수 있습니다.
참고 사항
- HTML 주석(
<!-- -->)은 구형 브라우저에서 CSS 코드가 그대로 노출되는 것을 막기 위해 사용되었으며, 현대 브라우저에서는 생략해도 무방합니다. - 인쇄 시에는 pt 단위가 실제 물리적 크기와 연동되므로, 글자 크기를 pt로 지정하면 인쇄 결과물의 크기를 더 정확하게 예측할 수 있습니다.
- 미디어 쿼리는 글꼴뿐 아니라 색상, 여백, 레이아웃 등 모든 CSS 속성에 적용할 수 있으므로, 인쇄용 스타일시트를 따로 분리하는 대신 이 방식으로 통합 관리하는 것이 효율적입니다.