rand(life)

본문 내용만 인쇄하기 본문

컴퓨터

본문 내용만 인쇄하기

flogsta 2009. 9. 18. 14:49
블로그의 좌우 사이드바나 구글광고등이 인쇄할때 따라나오면 보기가 싫다.

01234


위에서 보이는 것과 같이, 본문 내용만으로는 2페이지면 충분할 것이, 인쇄하면 5페이지나 된다. 그것도 첫번째 페이지에서 보는 것처럼 카테고리나 블로그이미지등이 제대로 정렬되지 않아서 불필요한 공간이 생기게 되고, 결과적으로 종이가 낭비된다.

그래서, 화면상에서는 보이는 것들 중에서 본문내용만 남기고 다른 것들은 인쇄할때 보이지 않게 하는 방법을 찾아 헤매었는데, 찾긴 찾았다.

위의 블로그에서는 세 가지 방법을 제시하고 있는데, 티스토리는 별개의 스타일시트를 올리기가 번거로워서, skin.html을 수정하는 방법을 사용했다.

<style media="print">
#leftnav, #bottomNav {
display: none;
    }   
</style>


<head> 밑에 이렇게 넣으면 된다는데, 잘 되었을까? 아니나 다를까 실패.

곰곰히 생각해보니,

#leftnav, #bottomNav

이 부분은 출력하지 않는부분의 이름을 열거하는 것 같다. style.css에 #표시가 붙어 있는 이름들을 여기에 추가해 보았다.

<style media="print">
#sidebarL, #sidebarR, #blogMenu, #header, #bottomNav, #mainTop, #paging  {
display: none;
}
</style>


이런식으로 추가하니 왼쪽과 오른쪽의 사이드바 뿐만 아니라 카테고리나 맨 아래의 페이지 넘버까지 안나오게 되었다.


그런데 문제는 구글광고. 위에 그림에서처럼 본문 상단에 떡하니 자리잡고 있어서 본문이 뒤로 밀려서 보기 싫다.

구글 광고가 안나오게 하려고 여러 번 삽질을 반복한 끝에 방법을 찾았다.

잘 보니, #sidebarL, #sidebarR, #blogMenu,같은 이름들은 해당 부분을 skin.html에서 다음과 같은 명령으로 정의를 내려주고 있다.

예를 들어, 왼쪽 사이드바 같은 경우,

<div id="sidebarL">
........
</div>


그래서 <div id="sidebarL">와 </div>사이에 왼쪽 사이드바에 들어가는 내용이 표시된다.

따라서, 구글광고가 나오는 부분을 저렇게 이름정의 해두고, 인쇄하지 않는 이름들에 해당부분을 넣으면 되지 않을까는 생각이 들었다.

Skin.html에서 구글 광고가 나오는 부분을 찾아 파란 글씨 부분을 삽입하였다.

<div id="google">
<!-- google adsense -->
…(생략)…
</tr>
</table>
</div>


 그리고 처음에 언급했던, 프린트 안되게 설정해 주는 부분에 다음과 같이 google을 추가하였다.

<style media="print">       
#sidebarL, #sidebarR, #blogMenu, #header, #bottomNav, #mainTop, #paging, #google {
    display: none
    }       
</style>


드디어 성공이다!
이제 구글광고도 안 나온다. 인쇄하면 깔끔하게 본문만 출력된다.


Html에 대한 이해가 부족한 상태에서 주먹구구식으로 블로그 디자인을 하다보니 이런 일이 생긴다. 제대로 공부를 하던지 해야지….
저작자표시 비영리 동일조건
'컴퓨터' Related Articles more