두리미 Just Do IT :: CSS 를 이용한 인쇄기법

'Print'에 해당되는 글 1건

2008/03/05 CSS 를 이용한 인쇄기법

2008/03/05 19:40

My Job/Web Tip

CSS 를 이용한 인쇄기법

페이지마다 인쇄버튼을 뒤늦게 발견하고 인쇄맞춤형 페이지를 따로 만들어야 하는..
어짜피 디자이너들이 css 코딩에 익숙해 졌겠다 아래 문서를 슬쩍 넘기며
프린트용 css를 하나 더 만들어달라고...

1. 인쇄시 고려해야 할 부분

칼라는 흑백으로 변경한다.
폰트는 인쇄에 적당한 폰트로 변경한다.
링크는 밑줄로 변경한다.
불필요한 이미지는 제거한다.
내비게이션은 제거한다.
광고는 제거한다.
플래쉬, 움직이는 이미지는 제거한다.

2. CSS 에 적용

칼라 및 폰트

body { color : #000000; background : #ffffff; font-family : 굴림,"Times New Roman", Times, serif; font-size : 12pt; }
링크를 밑줄로 변경

a { text-decoration : underline; color : #0000ff; }
불필요한 이미지,광고,내비게이션 등 제거

아래와 같이 <div> 태그를 활용한다.

<div id="navigation" name="navigation">
<div id="advertising" name="advertising">
<div id="content" name="content">
<div id="other" name="other">

#navigation, #advertising, #other { display : none; }

3. css 및 이용

print.css

body { 
  color : #000000; 
  background : #ffffff; 
  font-family : "Times New Roman", Times, serif;
  font-size : 12pt; 
}
a { 
  text-decoration : underline; 
  color : #0000ff; 
}
#navigation, #advertising, #other { 
  display : none; 
}

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

'My Job > Web Tip' 카테고리의 다른 글

Web2.0 OPEN API List (0)	2008/04/24
ajax에 쓰이는 아이콘을 쉽게 만들어보자. (0)	2008/03/10
IP 추적은 어디에서 할까? (0)	2008/03/05
서울 일기예보 날씨 XML (0)	2008/03/05
윈도우 미디어 플레이어 오브젝트 속성들.. (0)	2008/03/05
CSS 를 이용한 인쇄기법 (0)	2008/03/05