현재 진행중이거나 완료된 프로젝트들은 프린트 CSS를 따로 지정해 주었는데...

인쇄용 프린트 CSS가 필요없다고 한다.

인쇄테스트는 아직 안되었다고 하는데....

나라디자인에서 자세히 설명해 주고 있네요.

-------------------------------------------------------------------------

아래 코드는 제가 예전에 줄곧 사용했던 방식 입니다. 공동 작업이나 유지보수의 편의를 위해 파일을 잘게 쪼게 놓는 방법을 사용하고 인쇄를 위한 print.css도 따로 두었습니다. 하지만 최근에 이 방법이 좋지 못한 방법이라는 사실을 알게 되었습니다. 이렇게 파일을 잘게 쪼개 놓으면 http request 가 늘어나서 결국 파일을 로드하는 속도에 좋지 않은 영향을 미친다는 사실을 알게 된 것이죠.





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에서 제대로 인쇄되는지는 테스트 해보지 못했습니다. 혹시 누군가 테스트 해보셨다면 지원 여부를 알려주시기 바랍니다. 감사합니다.

더 자세한 내용은 http://naradesign.net/wp/2007/12/19/133/ 를 참고하세요.

이올린에 북마크하기