NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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

분류: CSS,웹 표준 | 2007년 12월 19일, 7:59 | 정찬명 | 댓글: 9개 |
트랙백URI - http://naradesign.net/wp/2007/12/19/133/trackback/

9개의 댓글이 있습니다.

  1. 김영찬 댓글:

    IE6에서 테스트 했는데 잘 출력되는데요

    좋은팁 감사합니다.

    IE6 ver 6.0.2900.2180

  2. 정찬명 댓글:

    아, 잘 되는군요. 김영찬님 감사합니다. (__)

  3. JoyFull!! 댓글:

    print.css 파일을 따로 만들 필요가 없습니다….

    아래 코드는 제가 예전에 줄곧 사용했던 방식 입니다. 공동 작업이나 유지보수의 편의를 위해 파일을 잘게 쪼게 놓는 방법을 사용하고 인쇄를 위한 print.css도 따로 두었습니다. 하지만 최근에…

  4. 이태임 댓글:

    트랙백 해갑니다.

  5. freeism 댓글:

    이런 것이 있었군요. = ㅁ=)b
    좋은 정보 정말 감사합니다. ^^

  6. 윤태성 댓글:

    좋은정보 감사합니다.
    담아갈게요

  7. @media Rule…

    대다수의 UI개발자나 웹퍼블리셔들은 CSS작성시 @charset, @import Rule 등은 많이 사용합니다만 @media Rule을 사용한 CSS는 아직까지 많이 보지 못했습니다. 아니 한 번도 못봤습니다; 정찬명님의 나라…

  8. 김지태 댓글:

    여기는 트랙백 된 내용을 어디서 확인할까요?? 흠… 좋은정보 감사합니다.

  9. 정찬명 댓글:

    @김지태
    만약 이 글에 트랙백을 걸어왔는데 이곳에 댓글처럼 표시되지 않는다면 양쪽 사이트 가운데 한쪽이 문제가 있는것으로 봐야 합니다.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님