웹페이지는 기본적으로 모니터상에 출력되는 것을 기본으로 하기에 인쇄시에는 만족할만한 결과물을 얻기가 힘듭니다. 그래서 현재까지 나와있는 대안으로서는 CSS를 이용하여 인쇄페이지를 좀더 개선하는 방법입니다.

기본적인 개념은 "인쇄를 위한 CSS를 따로 만든 후 media 속성을 사용하여 인쇄시에만 적용되도록 한다"는 겁니다.

CSS를 이용하여 인쇄 페이지를 좀더 효과적으로 개선하기 위해서는 아래와 같은 부분이 고려되어야 합니다.

• 색상을 흑백으로 변경 : 보통 흑백 프린트를 이용하여 인쇄하죠?
• 링크는 밑줄로 변경 : 흑백으로 인쇄하는 경우 이 부분이 링크인지 표시할 길이 없습니다. 그래서 링크에는 밑줄을 그어주는 것이 좋습니다.
• 불필요한 부분은 제거 : 메뉴와 광고는 같이 인쇄될 필요가 없겠죠? 그리고 플래쉬나 불필요한 이미지 역시 제거해 주면 좀더 깔끔한 인쇄물을 얻을 수 있습니다.

색상을 흑백으로 변경

글자색은 검은색으로 배경은 흰색으로, 그리고 가능하면 글자체와 글자크기도 지정해 주면 좋습니다.

body {color : #000000; background : #FFFFFF; font-family : 굴림,"Times New Roman"; font-size : 12pt;}

링크는 밑줄로 변경

a {text-decoration : underline;}

불필요한 부분은 제거

이는 아이디(ID)를 사용하여 광고와 네비게이션을 구분해 줍니다. 아이디 사용이 불편한 경우에는 클래스(class)를 사용하여 인쇄시 나오지 않는 부분에 클래스를 지정해주어도 됩니다.

#menu, #advertising {display : none;}

CSS 파일 제작

위의 3가지 부분을 반영해서 아래와 같은 CSS 파일을 만듭니다. print.css와 같은 이름으로 저장하면 되겠죠?

body {color : #000000; background : #FFFFFF; font-family : 굴림,"Times New Roman"; font-size : 12pt;} a {text-decoration : underline;} #menu, #advertising {display : none;}

인쇄시만 적용되도록 설정

HTML 문서내에 아래와 같은 구문을 추가합니다.

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

HTML 문서에서 인쇄시 제거할 부분에는 DIV 태그로 구분합니다.

<div id="menu">메뉴</div> <div id="advertising">광고</div>