댓글에 가끔 인쇄 버튼 만들어 달라고 하는 분들이 계시더라고요. 인쇄버튼을 어떻게 만드는 지 모르거니와 검색해보면 자바스트립트를 이용한 팁들이 있는데, 좀 어렵더라고요.

그래서 그냥 브라우저 메뉴의 파일 - 인쇄를 사용하시라고 했죠. 대신 인쇄할 때는 본문만 필요하니까 광고, 사이드바, 댓글 등은 인쇄되지 않는 인쇄 페이지를 만들어 사용하고 있어요.

CSS를 이용하기때문에 어려운 자바스크립트를 알 필요도 없고, 인쇄할 페이지를 제가 직접 디자인할 수 있기때문에 장점이 많은 방법이기도 합니다.

CSS로 인쇄 페이지 만들기

CSS의 media type을 이용하는 방법이에요. CSS는 페이지를 디자인하기 위한 언어인데, 웹에서 보이는 화면이나 인쇄할 때 프리젠테이션할 때 등 다양한 환경에 따라 다르게 적용할 수 있어요. 이 중에서 프린터를 사용할 때 보여주는 화면을 CSS로 설정해서 인쇄 페이지를 꾸미는 거예요.

관리자의 HTML/CSS 편집에서 style.css에 @media print{ }을 적고 { } 사이에 인쇄 페이지에서 사용할 CSS를 넣기만 하면 됩니다. CSS는 스킨 편집을 자주 하시는 분이라면 어렵지 않게 하실거라 생각해요.

이 방법을 사용할 때는 숨기고 싶은 모든 항목에 선택자인 class나 id가 지정되어 있어야 해요. 선택자가 없다면 직접 지정해주시면 됩니다.

CSS 속성중에 화면에 표시하지 않도록 하는 display:none을 이용해서 인쇄할 페이지에 광고나 사이드바, 댓글 들을 보이지 않도록 할 꺼니까요.

사이드바를 숨기고 싶다면 #sidebar {display:none} 하면 돼요. 인쇄할 필요가 없는 모든 선택자들을 죽 쓰고 마지막에 {display:none}을 사용하면 되죠.

이 외에도 CSS인 건 마찬가지니까 다른 글자 크기나 여백 등의 다른 CSS 설정들도 사용할 수 있어요.

아래는 인쇄 페이지를 만든 css 보기에요.

@media print {
 body {
   background:transparent;
   font-size:13px;
   width:auto
 }

 #container {
   background:transparent;
   margin:20px;
   padding:0;
   width:auto
 }

 #content {
   background:transparent;
   margin:10px;
   padding:0;
   width:95%
 }

 #ttDesk_AdminDiv,#ttDesk_alert,#header,#sidebar,#footer,.another_category,.trackback,.navigation,.comment,.blogger-news-widget,.tagTrail {
   display:none
 }
}

 아래는 실제 적용된 인쇄 페이지입니다. 광고와 사이드바 없이 본문만 깔끔하게 인쇄되겠죠?

css 인쇄 페이지 설정 - 인쇄 페이지 미리보기 1

css 인쇄 페이지 설정 - 인쇄 페이지 미리보기 2

 

실제로 티스토리에서는 본문 외에 여러가지 항목들이 있어서 이 걸 다 적어줘야하는 불편함이 있어요. 또 선택자가 없는 경우는 선택자를 입력도 해줘야하고요.

자바스크립트를 이용해서 인쇄 버튼을 만드는 것보다는 불편한 방법이긴 하지만 인쇄할 페이지를 꾸밀 수 있다는 장점이 있으니 사이트를 잘 알릴 수 있도록 한 번 꾸며보세요.

함께 보면 좋은 글

블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
W3C CSS 유효성 검사, CSS Validation Service
블로그 속도 측정 - Google PageSpeed Insights
애드센스 최적화 배치 도움되는 곳