프린트 스타일을 지정하는건 그리 어렵지 않습니다 (너무 쉽다고 생각했는지 이야기 한적이 없군요 ㅠㅠ). 아시다시피 타겟으로 media=”print” 를 지정해 주면 어렵지 않게 인쇄 시에 출력될 프레젠테이션에 스타일을 바꿀수 있습니다. print.css 경로를 제대로 잡아주시는것 아주 중요합니다.

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

<!-- 혹은 -->
<style type="text/css" media="print">
   @import "print.css";
</style>

<!-- 혹은 -->
@media print {
   /*직접코드 입력 */
}

display:none;

프린트 스타일시트 제작시에는 Law of Elimination, 즉 불필요한 정보 제거 작업부터 시작 하시는 것이 좋습니다. 불필요한 요소들을 먼저 살펴보시고 {display:none;} 에다가 하나씩 더해갑니다. 보편적으로 메뉴부분, 사이드바 부분, 인풋 박스, 광고 등이 해당되겠습니다. 일모리네를 예로 들자면 사이드바, 메뉴, 코멘트부분 알림 해더 등등을 지워버렸습니다.

#sidebar, #menu, #header_special, 
.permlink, .ttag, .ad, 
#commentinputs, #commentwrap h2, 
.comment {display:none;}

배경과 폰트 지정

대충 지우신 후에 기본적인 배경과 폰트지정 으로 넘어갑니다. 폰트 사이즈는 프린트를 위한 pt (point) 단위로 잡으시고 9에서 12 사이로 잡아주시면 되겠습니다. 저는 9pt 로 잡았습니다. 그리고 배경은 transparent 이 default 이지만 혹시나 어딘가에 껴 들어가는것을 미리 방지하는 차원에서 transparent으로 잡아주면 좋겠죠. body의 배경을 흰색으로 잡아주면 마무리 되겠습니다. 또한 브라우저에게 해더 사이즈를 맡겨 놓으면 상당히 크고 낭비가 심하니 직접 h1, h2, h3 사이즈를 잡아주는 것도 좋은 방법입니다. 아시다시피 해더들은 기본적으로 굵게 bold 출력됩니다.

body {font: 9pt/1.5 sans-serif;background: white; color: black;}
/* 참고로 9pt/1.5 는 9pt 폰트사이즈에 line-height 
   줄간격을 1.5배로 하라는 것이 되겠습니다. */

h1 {font-size: 18pt;}
h2 {font-size: 15pt;}
h3 {font-size: 11pt;}

#content {background: transprent;}

글을 글답게 세밀하게

위의 부분만 하셔도 어느정도 문서 분위기가 나겠지만 (ie6 포함) 약간만 더 손을 본다면 더할 나위 없는 프린트 지정이 될수 있습니다. 먼저 링크 부분을 손보겠습니다. 기본색인 파란색도 좋지만 흑백 프린트시에는 별 효과가 없으니 밑줄을 주어 링크를 표기할수 있습니다. 간단히 a {color: black; text-decoration: underline;} 을 주면 되겠습니다. 하지만 밑줄이 혼란스럽다면 밑줄 대신 링크뒤에 주소를 삽입하는 방법을 택하셔도 됩니다. 오래전에 Eric Meyer 가 나누었던 방법입니다.

#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }

브라우저가 지원만 한다면 (사파리가 아주 잘보이는 군요) #content 안에 있는 링크 뒤에 주소를 출력 하도록 하게 합니다. 하지만 #content 안의 글 제목에도 링크가 붙게되니 글 자체의 블록엘리먼트를 지정해 주어서 글 안의 링크에만 출력되도럭 하는 것이 좋은 방법이겠습니다. 일모리네는 .writing 부분이겠네요. 이러한 방법으로 링크를 지정해 주면 인쇄물이지만 웹주소를 찾아갈수 있는 장점이 있겠습니다.

링크에 스타일을 주었으니 문단에도 스타일을 지정해 보겠습니다. 문단 시작시에 들어짜기, 움푹 들어간 부분의 indentation 을 주어 문단 시작을 표현할수 있습니다. text-indent: 값; 의 형식을 사용하면 되겠네요. 또한 인쇄는 페이지라는 테두리가 있기에 문단이 페이지의 마지막 부분일때에 한줄만 출력되고 다음 페이지로 넘어가는 경우가 있을수 있습니다. 이 때에 orphans를 지정해 주면 orphans 에 지정된 값 데로 문단의 최소 출력이 지정됩니다.
orphans

p {text-indent: 13pt; orphans: 3;}

마지막으로 전체적인 여백의 문제나 간격등을 조절해 주면 되겠습니다. content에 margin 값을 준다거나 문단간의 간격 조절등이 되겠네요.

일모리네 print.css 입니다.

body {font: 9pt/1.5 sans-serif;background: white; color: black;}

.left {float:left;}
.picL{float:left;}
.right {float:right;}
.border1 {border: 1px solid #000;}

a {color: black; text-decoration:none;}

h1 {font-size: 18pt;}
h2 {font-size: 15pt;}
h3 {font-size: 11pt;}
p {text-indent: 15pt; orphans: 3;}

#sidebar, #menu, #header_special, .permlink, .ttag, .ad, 
#commentinputs, #commentwrap h2, .comment {display:none;}

#content {width: auto;}
.posttitle {float:left;}
.postdate {float:right;}
.writing {clear:both;}
.writing a {text-decoration: underline;}
h1 a:link:after, h1 a:visited:after, 
.writing a:link:after, .writing a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;
   }
#commentwrap p {text-indent:0;}

즐거운 한주를 보내고 계신가요!? 얼뚱, 쌩뚱. 광복절이라고 태극기 달아봤습니다. 참 어색합니다. 364일 놀다가 하루를… 그래도 하루만이래도 좋은 날로 기념해야겠네요.

P.S. 조용히 진행되고 있는 HTML5 의 인쇄버전을 PDF 로 출력했습니다.

tags: , , , , , ,