특정영역 인쇄하는 것을 자바스크립트로 하다가 먼가 깔끔하지 못한거 같아서 새로운 방법을 찾던중
이번에는 CSS (스타일시트) 로 인쇄영역을 구분하는 방법에 대해 할게 되었다.
이 방법은 media에 따라 스타일을 다르게 주는 방법으로,
이를 이용하면 화면에 보이는 스타일과 인쇄되는 스타일을 다르게 설정할 수 있다.
즉, 단순히 보이지 않는 것을 떠나서 색을 바꾼다던지 배경그림을 넣는 것, 폰트를 변경하는 것도 가능하다.
항상 장점이 있으면, 단점도 있는 법!!
이런 장점만큼이나 안타까운 단점이 있다.
자바스크립트로 구현할 때는 내가 인쇄하기를 원하는 부분만을 묶으면 되지만,
이는 반대로 인쇄를 하지 않을 부분을 묶어야 한다는 것이다.
이 방법이 때로는 장점이 될수도 있는 것이지만, 특정 페이지에서만 인쇄를 하고 홈페이지를 노프레임형태로 Server Side Include (PHP, ASP, Apache 등 서버단에서 Include 하는 것)을 사용한다면 변경해야될 파일이 많아진다.
하지만 모든 페이지에서 인쇄를 해야하고, 항상 특정부분을 제외해야 한다면 장점도 될수 있을 것이다.
이를 사용하는 방법은 아주 간단하다.
핵심코드는 아래 몇줄안되는 코드가 전부다.
<style type="text/css" media="print">
.noprint { display:none; }
</style>
<style type="text/css" media="screen">
.onlyprint { display:none; }
</style>
이렇게 media="print"를 하면 인쇄할 때만 적용되고, media="screen"은 화면에 출력할 때만 적용이 된다.
위의 코드는 class="noprint" 가 지정되어 있는 영역은 프린트가 되지 않게 만들고,
반대로 class="onlyprint"가 지정되어 있는 영역은 화면에 출력되지 않게 한다.
그렇게 어려운 내용이 아니므로 아래 예제를 보면 충분히 이해할 수 있을 것이다.
