Print Differently Using CSS

CSS 2.01 버전부터 추가된 기능을 사용해서 동일한 컨텐츠를 미디어 형태별로 CSS 를 적용할수 있습니다.

Style sheet를 적용하기 위한 방법

A안.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print,projection">

B안.

@import url(print.css) print,projection;

C안.

<STYLE type="text/css">

@media print {

   BODY {font-size: 10pt; line-height: 120%; background: white;}

}

@media screen {

   BODY {font-size:12pt; line-height: 1em; background: silver;}

}

</STYLE>

셋중에 하나를 사용할수 있습니다.

Style sheet를 CSS 파일로 작성하기

/* screen.css : screen display styles */

BODY {color: silver; background: black;}

A:link {color: yellow; background: #333333; text-decoration: none;}

A:visited {color: white; background: #333333; text-decoration: none;}

A:active {color: black; background: white; text-decoration: none;}

H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;

    border-bottom: 1px solid gray;}

/* print.css : print styles */

BODY {color: black; background: white;}

A:link, A:visited {background: white; color: black; text-decoration: underline;

   font-weight: bold;}

H1, H2, H3 {background: white; color: black; padding-bottom: 1px;

   border-bottom: 1px solid gray;}

DIV.adbanner {display: none;}

CSS 파일을 HTML 문서에서 링크걸기

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">

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