[CSS]css로 원하는 부분만 인쇄하기

팁의 출처 : http://forum.standardmag.org/viewtopic.php?id=569

보통 인쇄을 고려할 때 글로벌 네비게이션, 로컬 네비게이션, 비주얼 영역은 출력을 원치 않게 됩니다.
따라서 필요한 영역만 출력하기 위하여 예전에는 자바스크립트를 사용했었습니다.

하지만 한줄짜리 CSS 코드와 한줄짜리 CSS 링크 명령 만으로 이 문제를 간단하게 해결할 수 있습니다.

물론 이것이 가능 하려면 DIV+CSS 형식의 표준 마크업이어야 하고 Table 을 이용하여 레이아웃 설정한 경우라면 이 팁을 적용하기 매우 어렵습니다.

1. 인쇄를 위한 print.css 만들기. 단 한줄이면 족합니다.

#header, #visual, #local, #footer { display:none} /*출력을 원치 않는 영역을 모두 숨김*/

2. 인쇄를 위한 print.css 링크하기. 역시 단 한줄.

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

3. 출력결과.

#contents 라는 ID를 지닌 영역만 출력 됩니다.

4. 예제보기.

http://www.engit.com/open_content/compa … vision.php
상기 페이지에 접속하여 '파일>인쇄미리보기' 명령을 실행해 봅니다. 불필요한 영역은 제거된 상태로 콘텐츠 영역만 출력될 것입니다.

ps. 잉크를 아끼기 위해 해당 소스를 추가합니다. * {background:none;}