seevaa.net

보통(여기서는 주로 티스토리 블로그라고 여기고 말하겠습니다.) 아래와 같이 프린트용 스타일시트를 사용은 하는데 효과적으로 만들지 못하거나 신경쓰지 않는 것 같습니다. 잘 몰라서이기도 하겠지만 웹페이지를 인쇄할 일이 거의 없기 때문이라 생각됩니다.

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

저 또한 잘 모르기도 하고, '이걸 누가 인쇄하겠어?'라는 생각에 프린트용 스타일시트를 형식상 넣어두긴해도 관심 기울리지 못했습니다. 이번에 프린트용 스타일시트를 다시 작성하면서 생각한 '프린트 스타일시트(print.css) 만들 때 고려해야 하는 것들'에 대해 나름 적어봅니다.

1. 보여야 할 것과 보이지 말아야 할 것 정하기

   브라우저상에서 '페이지인쇄'를 할 경우, 보통 스크린상에서 보이는 요소들이 전부 인쇄되어 나오기를 원하지 않을 겁니다. - 스크린상에서 보이는 것과 똑같이 인쇄하기를 원하면 스크린캡쳐를 이용해서 인쇄하면 되니까요.- 내가 써핑 중에 찾은 어떤 웹사이트의 내용(contents)을 프린트한다고 생각해보세요.

   브라우저상에서 '페이지 인쇄'를 했을 경우 웹사이트의 요소 전부가 뒤죽박죽 인쇄되어 나온 경험이 있나요? 해서 자기가 원하는 특정부분만 긁어서 한글이나 워드같은 프로그램으로 옮겨 인쇄한 경험도 있나요? 당장 브라우저에 '인쇄 미리보기'라도 눌러보세요. 내 블로그를 인쇄한다면 어떻게 나오는지? 내 블로그를 찾은 사람들도 똑같이 경험할 수 있습니다.
   

   보여야 할 것과 나머지 필요없다 싶은 것을 정해서 보여야할 것(알맹이 부분)만 인쇄되도록 합니다. 알맹이 부분만 프린트 스타일시트로 설정해 놓으면 다른 프로그램으로 옮겨 정리한 수준은 아니더라도 그나마 깔끔하게 정리되어 보일테니까요.
   

   • 보여야 할 것 : 사이트제목, 글제목, 글내용, 작성자 정보
   • 보이지 말아야 할 것 : 보여야 할 것을 제외한 나머지(블로그메뉴, 사이드바, 입력폼, 위젯, 광고 등)

   위와 같이 정했다면 보이지말아야 할 것에 해당하는 부분을 찾아 아래와 같은 식으로 보이지 않게 설정합니다. 보여야할 부분만 남도록 말이죠~

   #header, 
   #comment, 
   #sidebar, 
   #footer	{ display: none;}

   이렇게 필요없는 부분만 찾아 보이지않게 설정해도 괜찮습니다. 참 쉽죠잉~

2. 보여야 할 부분 설정

   개인적으로, 보여야할 부분(인쇄되는 본문)에 대해서는 특별한 설정(스크린용 스타일시트에서와 같은)을 따로 할 필요는 없다고 생각합니다. 글씨크기, 글꼴, 줄간격 정도만 설정하시면 될 것 같습니다.

   body	{
   	color:#555; 
   	font:9pt "NanumGothic", "Gulim", "AppleGothic", Sans-serif; 
   	line-height:150%;
   }

3. 인쇄시 볼 수 없는 부분 생각하기

   • 대표적으로 링크주소입니다.

     스크린에서 모습이

     어쩌고 저쩌고... 센군의 디자인밴드 ... 어쩌고 저쩌고

     어쩌고 저쩌고... <a href="http://designsen.net/">센군의 디자인밴드</a> ... 어쩌고 저쩌고

     위와 같은 경우 인쇄시 '센군의 디자인밴드'만 인쇄되기 때문에 아래와 같이 링크주소를 따로 표시할 수 있도록 합니다.

     .article p a:after	{
     	content: "("attr(href)") ";
     }

     인쇄시 모습

     

   • 과도하게 큰 이미지 인쇄시 overflow

     이런 경우는 드물겠지만 이미지 사이즈(width)가 인쇄용지에 비해 클 경우를 대비해 아래와 같이 설정해 줍니다.

     .article img	{ max-width:100%;}

   • <pre>가 overflow되는 경우

     pre 엘리멘트의 경우 넓이에 맞게 자동으로 줄바꿈되지 않기때문에 text 길이가 길어 overflow되면 스크린상에서는 스크롤이 생기는 데 비해 인쇄시에는 잘려 전부 볼 수 없는 경우가 생깁니다. 용지크기에 맞게 줄바꿈될 수 있도록 아래와 같이 설정해 줍니다.

     .article pre	{
     	white-space: pre-wrap;
     }

     위 3가지 속성은 브라우저별로 지원을 안할 수 있습니다.(IE6,7?)

제가 잘못 알고있거나 다른 좋은 방법이 있다고 생각하시는 고수님들 알려주시면 고맙겠습니다.