인쇄용 페이지의 CSS
개인적인 경험에서 비춰 볼 때 HTML 페이지를 인쇄하는 경우 다음 3가지를 고려하는 것이 우선이다.
- 별다른 트릭을 사용하지 않으면 background-color는 모두 사라질 것이다
- 출력하고 싶지 않은 부분은 @media print{ … } 안에서 display:none;을 설정하자
- 흑백으로 출력된다고 가정하자
background-color 문제는 배경색에 해당하는 이미지 파일을 background-image로 지정하는 등의 트릭으로 넘어갈 수 있다. 단 페이지가 흑백으로 출력해도 잘 어울리는지 고민해야 한다.
미디어 쿼리를 이용하면 출력 양식을 다양하게 수정할 수 있다. 예를 들어 로고가 출력되는 대신에 심플한 텍스트만 나오게 한다거나 광고 배너를 지우는 경우, 인쇄물의 폰트를 전반적으로 크게 만드는 경우가 있겠다.
특히 화면으로 볼 때는 이쁜데 잉크젯 프린터로 출력하면서 결과물이 망가지는 경우를 상상해봐야 한다. 멋있는 로고를 출력했는데 해상도 저하에 잉크 범벅이 되서 축축하게 번져가는 결과물을 얻을 수도 있다. 잉크에 푹 젖어서 울퉁불퉁해진 A4를 보기 싫다면 검은 화면에 하얀 글씨 같은 것은 반드시 체크해봐야 한다.