프린트시 이용되는 IE용 이벤트

IE에 적용가능한 신기한 이벤트를 하나 발견했습니다.

정말로 IE만이 가진 속성, 이벤트, 효과 등을 볼때마다 새롭고 신기하군요.

그리고 어쩜 IE에서만 가능한 이런 함수들을 어렵게 찾아내서 사용하시는지 존경(;;) 스럽습니다.

바로 onbeforeprint, onafterprint 입니다.

이벤트명에서만 봐도 대충 느낌을 알수 있다시피

onbeforeprint는 프린트 전에 실행되는 이벤트이며

onafterprint는 프린트 후에 실행되는 이벤트 입니다.

어떻게 사용되는지 샘플을 한번 보도록 하겠습니다.(실사용되고 있는 소스를 각색했습니다)

window.onbeforeprint = function(){

 document.getElementById("header").style.display = "none";

 document.getElementById("footer").style.display = "none";

};

window.onafterprint = function(){

 document.getElementById("header").style.display = "";

 document.getElementById("footer").style.display = "";

};

이렇게 쓰입니다.

보통 웹페이지를 인쇄할때는 header부분(로고, GNB, 기타 등등)과 footer(주소, 카피라이트, 각종링크) 부분이 필요가 없습니다.

사용자가 웹페이지를 출력하는 이유는 대부분 콘텐츠 내용을 출력하고 싶어서 하는 것이지

header와 footer까지 보고자 출력을 하는 경우는 거의 없지요.(물론 화면 그대로 출력해야하는 경우도 있겠지만요)

그렇기때문에 이부분을 제외하고 프린트를 하는것이 잉크값도 절약하고 사용자에게 더 많은 도움을 줍니다.

제가 만난 사례에서는 onbeforeprint와 onafterprint를 이렇게 사용했더군요.

프린트 전에는 header와 footer의 display를 none으로 설정하여 프린트가 안되도록 하고

프린트가 실행된 후에는 다시 header와 footer의 display를 복원시키는 방법입니다.

사실 이 방법은 전혀 좋은 방법이 아니라는것은 적어도 제 블로그에 종종 방문해주시는 분들이라면 알고 계실 겁니다.

CSS 스펙에서는 media 타입을 명시하고 있습니다.

<LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css" />

link엘리먼트에 media 속성을 사용해서 미디어타입에 따라 적용이 되는 CSS를 선언할수 있고

@media print {

 body { font-size: 10pt }

}

@media screen {

 body { font-size: 12pt }

}

@media screen, print {

 body { line-height: 1.2 }

}

CSS만으로도 media 타입을 명시할수 있습니다.

print용 css를 작성하는 방법으로도 아주 훌륭히 onbeforeprint, onafterprint를 대체할수 있습니다.

그리고 이 방법은 IE6을 포함하여 거의 모든 브라우저에서 가능한 방법입니다.

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

print.css

#header {display:none;}

#footer {display:none;}

이렇게 작성하는 경우 사용자가 웹페이지를 인쇄시에 header와 footer는 제외하고 출력을 하게 됩니다.

또한 이방법을 사용하면 사용자는 인쇄미리보기 기능을 이용해서 출력될 화면을 미리 볼수 있습니다.

media 타입의 종류에는 다음과 같은 것들이 있습니다.

all

모든 장치들에 적당하다.

aural

음성 합성 장치(speech synthesizer)를 위한 의도이다. 세부사항은 소리(aural) 스타일쉬트를 참조하라.

braille

점자(braille) 표현 장치들를 위한 의도이다.

embossed

페이지에 인쇄된 점자(braille)를 위한 의도이다.

handheld

전형적으로 작은 스크린, 단색상, 한정된 대역대(bandwidth)의 손에 들고다니는(handheld) 장치들를 위한 의도이다.

print

불투명한 물질에, 페이지에 표현된 것과 인쇄 모드에서 스크린에 사전 보기를 위한 의도이다. 페이지화된 메디아(paged media)를 특정하는 양식화 문제에 대한 정보는 페이지화된 메디아를 참조하라.

projection

프로젝터 표현들, 예를 들어 프로젝터(projector) 또는 투명한 인쇄를 위한 의도이다. 페이지화된 메디아(paged media)를 특정하는 양식화 문제에 대한 정보는 페이지화된 메디아를 참조하라.

screen

일차적으로 컴퓨터 칼라 스크린을 위한 의도이다.

tty

디스플레이 능력이 한정된, 텔렉스(teletype), 터미날, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도이다. "tty" 메디아 타입에서 제작자는 픽셀(pixel) 단위를 사용하여서는 안된다.

tv

저해상도, 저색상, 스크린의 한정된 스콜링(limited-scrollability), 소리가 있는 테레비젼(television-type) 장치들을 위한 의도이다.

스펙상에는 종류가 상당히 많지만 대부분 screen와 print를 사용합니다.

onbeforeprint, onafterprint 이벤트를 사용하고 계신다면 당장 걷어내시고 표준의 방법을 사용해주세요.