- 인쇄용 CSS 제작2009. 02. 05
-
웹 사이트의 인쇄는 각 브라우저 별로 인쇄를 지원하는 옵션이 조금씩 틀려 각 각 대응하여 테스트하며 진행되었다. 어떤 브라우저에서는 인쇄시 플래시 콘텐츠는 지원되지 않는 경우도 있었고, 배경색과 이미지의 인쇄 설정 방법도 조금씩 차이가 났다.
일단 사이트를 인쇄할 때 메인 내비게이션과 좌측 메뉴 등과 같이 불필요한 부분을 제외하고 해당 페이지의 내용과 Copyright만을 인쇄할 수 있게 현재 사이트의 Layout.css에 아래와 같이 추가하였다.
@media print { #accessibility,#header,#topmenu,#sub,#quick,#Tim,#footer ul,#footer address,#sube {display:none;} body,body #wrapper #Contents,#footerW {background:none;} #wrapper {margin:0;} #Contents {float:none; left:0; padding:0 0 30px 0; margin:0 0 0 -200px;} #location {position:relative; top:0; right:0; margin:0;} #footerW {text-align:left; width:100%; border-top:1px solid #CCC;} #footer p.copyright {float:none; margin:0; text-align:left;} }처음에는 단순하게
display:none속성을 이용해 콘텐츠를 제어하려고 하였더니, IE6.0 같은 경우는 페이지 인쇄 비율을 조절할 수 있어서 100%가 되면 우측으로 밀려 내용이 짤리는 현상이 생겨, 콘텐츠 위치 제어위한 css가 추가가 되었다. 테스트한 브라우저의 세부 버전은 아래와 같다.- Internet Explorer 6.0.29
- Internet Explorer 7.0.57
- Firefox 3.0.6
- Opera 9.64
- Safari 3.1.2
- Google 크롬 1.0.15
Internet Explorer에서 배경색과 이미지를 인쇄하기 위해서는 도구 메뉴의 인터넷 옵션(O)을 클릭하면,
고급 탭의 설정 항목 중에 인쇄에서 배경색 및 이미지 인쇄에 체크를 하면 된다.
Internet Explorer 6.0의 경우에는 li에 적용 된 배경이미지가 제대로 출력되지 않음.IE의 경우 콘텐츠 사이즈를 용지에 맞춤, 70%, 100%, 150% 식으로 선택을 지원함.
Firefox3.x에서 배경인쇄는 파일(F) 메뉴의 페이지 설정(U)에서 지정할 수 있음.
Opera 9.x는 페이지의 배경인쇄는 파일(F) 메뉴의 페이지 설정(T)에서 지정할 수 있음.
인쇄 미리보기(T)에서는 배경이 보이지만 실제 인쇄에서는 h태그에 적용 된 배경이미지만 출력이 되고,
나머지는 출력되지 않음.
Safari 3.x의 경우 배경인쇄 옵션을 찾을 수 없어 배경이 전부 인쇄 되지 않으며, 특이하게 흰색 글씨는
회색으로 출력 됨.(좌)
크롬에서는 인쇄 미리보기 기능이 없으며, 배경이 인쇄되지 않음(우)
