CSS와 HTML 구성한 웹페이지가 있다. 이 페이지를 프린터로 출력을 하면 내가 보고 있는 페이지 그대로 출력이 될까? 화면 그대로 출력되지 않는다면 얼마나 비슷하게 나올까?

CSS를 이용해서 프린터 친화적인 페이지를 만들어 보자. 출력을 위한 CSS는 다음과 같이 media를 print로 해 주어야 한다.

1. <link type="text/css" rel="stylesheet" media="print" href="/stylesheets/print/coupon.css"/>

화면을 위해서는 media를 screen으로 해 준다.

1. <link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/print/coupon.css"/>

화면에 보이는 그대로 출력을 하고 싶다면 위 두 태그를 모두 사용한다.

페이지를 멋지게 꾸민 후 인쇄하기 버튼을 만들어서 이 버튼을 누르면 인쇄 창이 나오도록 해 주자. 이것은 javascript를 이용해서 할 수 있다.

1. <a onclick="window.print(); return false;" href="#">인쇄하기</a>

페이지를 만들 때 주의해야 할 것은

프린터는 background 프로퍼티를 무시한다. 이 프로퍼티는 사용하지 말자. 그대신 position: absolute 같은 것들은 잘 동작한다. 이들을 이용해서 이미지 위에 다른 element를 위치시킬 수 있다.