인쇄 - CSS를 이용한 인쇄화면 개선

웹페이지는 기본적으로 모니터상에 출력되는 것을 기본으로 하기에 인쇄시에는 만족할만한 결과물을 얻기가 힘듭니다. 그래서 현재까지 나와있는 대안으로서는 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>

※출처 : http://www.homejjang.com/