웹페이지를 인쇄할때 인쇄된걸 보면 모니터와 다르게 출력될때가 있습니다.
그럴때는 print 용 css를 따로 만드셔서 작업을 하셔야합니다.
프린트용 css 적용 방법은 크게 3가지 이며 다음과 같습니다.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!-- 혹은 -->
<style type="text/css" media="print">
@import "print.css";
</style>
<!-- 혹은 -->
@media print {
/*직접코드 입력 */
}
참고 사이트 : http://ilmol.com/wp/2007/08/15/341/
팁의 출처 : 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;}
