블로그 인쇄용 스타일시트(CSS)에 관하여

블로그에는 여러 내용외에도 인쇄하기에는 군더더기가 많이 딸려옵니다. 이런 군더더기 군살을 빼봅시다.

사용법

브라우저 --> 인쇄미리보기

DOM

<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />

너무 쉬워서 굳이 설명이 필요없지만 media에 print를 지정하면 인쇄용 이란 의미가 되죠. media에 관하여 가장 많은 종류를 지원하는 것은 오페라인데 프로젝터, TV 미디어등도 지원이 됩니다. 일일이 지정하지 않으려면 media="all"로도 충분합니다. 여기서는 인쇄용을 특화시키므로 media="print"로 지정합니다. href="filename"은 파일명(경로포함)이 됩니다. 티스토리의 특성상 images의 폴더 아래에 업로드되기 때문에 경로가 조금우습게 보입니다.

CSS

/*"print.css"를 사용(일부 예)*/
#sidebar, #footer {display:none}
#header .blogMenu {display:none }
#guestWrite, #guestList {display:none}
.tagText, actionTrail, .trackback, .comment, .commentWrite,
#paging, .another_category   { display:none}

이것도 너무 단순해서 굳이 설명이 사족이 되겠지만 비표시하고자 하는 요소의 스타일정의를 {display:none}로 정의하여 표시되지 않도록 바꾸는 것입니다.

인쇄용 스타일이 필요하다

웹에서 여행하다가 좋은 글이다 싶으면 저는 인쇄를 해두고자 하는 습관이 있습니다. 그런데, 홈페이지의 대부분은 여러가지 색깔과 다양한 기교가 많이 들어가 있어서 인쇄하기가 여간 까다로운 것이 아닙니다. 인쇄해 놓고 보아도 백그라운드 이미지는 대개 반쯤 깨져나옵니다. 스타일시트로 구현된 백그라운드 이미지는 2010년 현재 시점에서 가장 앞서가는 오페라 브라우저에서도 올바로 인쇄가 되지 않고, 뒤를 바짝 쫓는 사파리에서도 인쇄가 멋있게 되지 않습니다. 그나마 나은 것은 파이어폭스인데 어중간하기는 마찬가지 입니다.

 그래서 이번 기회에 저는 아예 인쇄용 스타일시트를 사용하여 기사를 인쇄하는 손님을 위하여 준비했습니다. 인쇄를 위하여 미리보기를 해보면 어떤 효과가 있는지 아실겁니다.(확인을 위해서라면 굳이 인쇄할 필요가 없습니다) 즉 최근 사파리5에서 선보인 "읽기도구"를 이용하면 광고나 다른 레이아웃을 안보고 기사만 보여 주는 기능이 있죠. 이런 식으로 기사내용만 인쇄되도록 만든 스타일시트입니다. 스킨다운 스킨입니다.

웹서핑 여행중에 검은색 배경을 많이 쓰는 페이지를 보면 잊지 않고 인쇄미리보기를 확인해 봅니다. 그리고 인쇄용 레이아웃이 깨져있으면 아무리 웹페이지를 화려하게 꾸몄더라도 좋은 인상을 받지 못합니다.

인쇄 아이디어

• 화면의 폭을 인쇄용지에 맞춘다.
  즉 고정폭(width) 지정을 풀어서 브라우저가 맞추도록 제한을 없앤다.
• 백그라운드 이미지 사용을 자제한다.
  이것은 브라우저의 지원이 아직 인쇄 수준에 미치지 못하기 때문에 울며 겨자 먹기로 제한하는 내용입니다.
• 사이드바, 메뉴, 댓글란 등의 블로그 글과 무관한 내용을 비표시로 변경한다.
  인쇄하려는 사람은 글을 보관하고 싶어서 인쇄하는 것이다.

다음 기회에는 스타일시트를 활용하여 사파리5의 읽기도구를 오페라 브라우저에서 비슷하게 구현해 보도록 해보겠습니다. 인쇄용 스타일시트를 그대로 재활용하는 방법입니다. 아시는 분은 벌써 구현 방식에 짐작이 가시겠군요.

관련된 내 블로그:

[일상을 논함] - 오페라 브라우저의 활용 팁(IV) CSS로 읽기도구를 구현하다
[일상을 논함] - 내가 사파리(Safari) 웹브라우저를 쓰는 이유
[일상을 논함] - 내가 오페라(Opera) 인터넷 브라우저를 쓰는 이유
[일상을 논함] - 광고 없는 인터넷에 서핑하고 싶다
[일상을 논함] - 웹브라우저에는 아직도 혁신이 무궁무진하구나
[우리집 도서관] - Eric A. Meyer, CSS 완전 가이드