print.css 파일을 따로 만들 필요가 없습니다.
아래 코드는 제가 예전에 줄곧 사용했던 방식 입니다. 공동 작업이나 유지보수의 편의를 위해 파일을 잘게 쪼게 놓는 방법을 사용하고 인쇄를 위한 print.css도 따로 두었습니다. 하지만 최근에 이 방법이 좋지 못한 방법이라는 사실을 알게 되었습니다. 이렇게 파일을 잘게 쪼개 놓으면 http request 가 늘어나서 결국 파일을 로드하는 속도에 좋지 않은 영향을 미친다는 사실을 알게 된 것이죠.
<link rel="text/css" src="default.css">
<link rel="text/css" src="layout.css">
<link rel="text/css" src="navigation.css">
<link rel="text/css" src="content.css">
<link rel="text/css" src="print.css" media="print">
결국 CSS 파일은 하나로 합치는 것이 좋습니다. 개발 과정에서 파일을 분리하는 것이 효과적이라면 default.css 파일에서 다른 파일을 @import 하는 방식으로 개발기간 동안만 처리한 다음 실제 서비스에 반영할 때에는 합치는 방법을 사용할 수 있으니 개발 이슈는 일단 해결이 가능 합니다. 하지만 print.css 파일에 있는 코드까지 하나의 파일에 합치려면 별도의 media type 을 지정해야 하는 문제에 봉착 합니다. 파일이 분리된 경우에는 link 요소에 media 속성을 사용하면 가능했는데 print를 위한 CSS 코드를 하나의 파일에 어떻게 넣을 수 있을까요? 익히 잘 알려진 문법이긴 한데 모르시는 분들이 많은것 같아서 적어봅니다.
/* For Screen */
* { … }
#header { … }
#container { … }
#content { … }
#aside { … }
#footer { … }
/* For Print */
@media print {
#aside { display:none; }
}
@media print { … } 안쪽에 print를 위한 코드를 넣으면 됩니다. 무척 간단하죠? 참조 : http://trio.co.kr/webrefer/css2/media.html
FF, Opera, Safari, IE7 브라우저에서 인쇄 미리보기 페이지가 정상적으로 출력되는 것을 확인하였지만 실제로 인쇄하는 경우 IE6~7에서 제대로 인쇄되는지는 테스트 해보지 못했습니다. 혹시 누군가 테스트 해보셨다면 지원 여부를 알려주시기 바랍니다. 감사합니다.
