[CSS]로 인쇄스타일을 다르게 지정하는 방법

http://www.w3.org/TR/css-print/

웹페이지를 바로 인쇄할 경우, 화면에 보여지는 것과 인쇄로 나와야 할 것이 달라야 할 경우가 많다. 대개 다음의 것들이 해당된다.

• 메인메뉴, 광고, 검색상자 등 제거
• 배경 색 및 이미지를 흰색으로
• 인쇄시 가독성이 좋은 폰트, 및 텍스트 크기, 자간, 장평, 라인간격 (e.g. to a serifed font, leading)
• [URL] 링크를 드러내기
• 링크의 text attribute 제거 (밑줄 등)

방법은, CSS에 media속성을 지정한다.

<link rel="stylesheet" type="text/css" media="print" href="print.css">
or
<style type="text/css">
    @import url("screen.css") screen;
    @import url("print.css") print;
</style>

대개, content만 프린트하고 싶어하므로,

body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
}
#nav, #sidebar, #search {
    display: none;
}
#content a:link:after, #content a:visited:after {
    content: " (" attr(href) ") ";
}

인쇄 페이지별 header 나 footer를 지정하는 방법은 (참고)

1. "@page" 를 이용 : 현재, FireFox, IE 모두 지원되지 않음

2. "@media print" 를 이용 : FireFox에만 지원됨