jugug.net ...NAKED

방문자가 내 블로그를 방문할때 블로그의 내용을 프린터를 이용하여 인쇄할 때도 있습니다. 이럴때를 대비해서 대부분 인쇄에 최적화 하기위한 위한 스타일시트를 따로 지정하는데요.

프린트용 스타일 시트를 넣는 방법은 해더부분에 아래와 같이 지정해 주면 됩니다.

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

print.css에는 쓸모없는 부분은 모두 안보이게 처리하고, 인쇄에 최적화하여 글꼴의 종류와 크기를 최적화시킵니다.

이렇게 하면 인쇄를 할때는 print.css파일의 서식을 따라 인쇄가 됩니다. 이것을 응용하여 간단하게 CSS를 이용하면 웹브라우저상으로는 안보이고, 인쇄할때만 보이는 메세지를 넣을 수 있습니다.

먼저 스킨 수정에 들어가서 자신의 블로그 상단이나 메세지를 넣고싶은 부분에 다음과 같이 넣습니다.

<div class="printMSG" style="text-align:center; display:none;">
※이 문서는 jugug.net ( <script type="text/javascript"> document.write(document.URL); </script> )에서 인쇄하였으며, 저작권은 희주에게 있습니다. 
</div>

이렇게 하면 메세지는 웹브라우저상에는 이 메세지는 보이지 않게 됩니다.

<script type="text/javascript">document.write(document.URL);</script>부분은 현재의 문서 주소를 출력해주는 스크립트입니다. 메세지 내용은 여러분의 블로그에 맞게 수정하면 됩니다.

이렇게 한 후 print.css에 다음과 같이 추가합니다.

.printMSG		{ display:block !important;}

방금 블로그 상단에 적은 메세지를 보이게 하는 코드입니다. !important를 붙이면 그 속성은 css처리시 태그안에 inline으로 넣은 style도 무시해버리고 우선순위가 됩니다.

아래는 예제로 저의 블로그에 적용된 print.css의 소스입니다.

@charset "utf-8";

body		{ font:0.8em/1.5 "바탕",serif; }
a			{ color:#000; text-decoration:none;}
hr			{ display:none;}
img			{ border:0;}
h1			{ margin:0; padding:0; font:1em "돋움";} 
h2			{ margin:0; padding:0; font-size:1.4em; font-weight:bold;} 

#header, #sidebar, #footer, 
#bottombar, #recommend, 
#ad1, #ad2, #ad3, #guestWrite,
.entry .admin, .entry .actionTrail, 
.entry .tagTrail, .entry .comment, 
.entry .trackback, .another_category,
.hiddenObj	{ display:none;}


#header			{ text-align:right; padding-bottom:10px; padding-right:10px;}
.printMSG		{ margin:0; padding:0; display:block !important; font:9pt "돋움";}
.paging			{ display:none;}
.entry			{ border:1px solid #ccc; padding:15px; margin:0;}
.titleWrap		{ border-bottom:1px solid #ccc; margin:10px 0; font-family:"맑은 고딕","돋움",sans-serif;}
.titleWrap .date{ font:8pt verdana;}
.article a		{ color:#33c; text-decoration:underline;}


#taglog ul		{ margin:0; text-align:justify;}
#taglog li		{ display:inline; margin-right:15px; padding:0;}
.cloud1			{ font:bold 1.0em/1.5 "맑은 고딕","돋움",sans-serif;}
.cloud2			{ font-size:0.9em/1.5; font-weight:bold; }

이렇게 해서 블로그를 인쇄해보면 아래와 같이 상단에 메세지가 나오는것을 알 수 있습니다.