프린트 관련 CSS 속성

화면을 개발하다 보면 출력해야 하는 페이지가 꼭 있기 마련이다.

그런데, 통프레임이거나 프레임이 분리되는 경우라도 화면에는 보여야 하지만 출력할 때는 빼고 싶은 내용이 있다.

이거 찾는 데 시간이 걸리긴 했는데, 막상 적용하기는 무척 간단하다.

 

아래의 내용을 HTML의 style 태그 내에 넣거나, include하는 CSS 파일에 넣는다.

@media print
{

  .noprint { display:none; }

}

 

설명 : @media print 는 print되는 결과물에만 적용되는 스타일이라는 뜻이다.

        .noprint { display:none; } 잘 아는 바와 같이 display:none은 영역을 차지하지 않고, 보여주지도 않는다.

        결과적으로 noprint라는 스타일을 적용한 객체는 프린트할 때 제외된다는 뜻이다.

 

이렇게 선언이 되었으니 적용만 하면 된다.

table, tr, td, div, input 등 어떤 객체든 일반 스타일 적용하듯class="noprint"속성만 붙이면 출력할 때 제외된다.

만약에 그 객체에 이미 화면용 스타일이 적용되어 있다면,

적용된 화면용 스타일이 "input_text"라면 그냥 그 옆에 noprint만 추가해 주면 된다.

다음과 같이class="input_text noprint"하면 된다.

그리고, 자바스크립트로 window.print()만 실행하면 noprint 속성이 적용 안 된 내용만 프린터로 출력된다.

이것을 응용하면 @media print 내에 프린트용 폰트나 속성을 적용해서, 화면과 출력물의 모양을 달리 할 수도 있다.

하지만, 이런 귀찮은 작업을 누가 하겠는가? 하라고 하면 짜증날 것 같다. ^^;

 

 

참고로 아래에는 window.print()로 인쇄 다이얼로그가 떴을 때 기본 종이 방향이 가로가 되도록 하는 CSS이다.

화면 내용의 폭이 커서 가로 출력이 필요할 때 유용하다.

(그런데, IE6에선 동작하고, FireFox2에선 동작 안 한다. FireFox는 세로로 해도 알아서 넘어가지 않게 자동축소출력해 주니 문제없다.)

이것도 마찬가지로 HTML의 style 태그 내에나, include하는 CSS 파일 내에 추가시켜 주면 된다.

@page { size: landscape; }