2008/01/10 15:22
인쇄용 스타일
1. media 속성 사용 (컴퓨터 화면에만 적용하는 스타일시트)
<link rel=“stylesheer” type=“text/css” media=“screen” href=“screenstyles.css” />
: 오직 컴퓨터 화면에 적용하기 위한 screenstyle.css 파일을 지정하는 방법
2. @media 혹은 @import
<style type=“text/css”>
@import url(“screenstyles.css”) screen;
@media print { 인쇄를 위한 스타일 시트 규칙을 정의합니다 }
</style>
@media 규칙을 이용해 인쇄를 위한 스타일을 지정할 수 있다.
3. 여러값 지정
①
<link rel=“stylesheer” type=“text/css” media=“screen, print” href=“screenstyles.css” />
화면과 인쇄 모두에 적용
②
<style type=“text/css”>
@import url(“screenstyles.css”) screen, print;
@media print { 인쇄를 위한 스타일 시트 규칙을 정의합니다 }
</style>
screenstyles.css 는 화면과 인쇄용 모두에 적용이 되고, @media 뒤에 나오는 규칙들은
인쇄에만 적용된다.
4. 화면 스타일과 인쇄 스타일 분리하기
<link rel=“stylesheer” type=“text/css” media=“screen” href=“screenstyles.css” />
<link rel=“stylesheer” type=“text/css” media=“print” href=“print.css” />
1. media 속성 사용 (컴퓨터 화면에만 적용하는 스타일시트)
<link rel=“stylesheer” type=“text/css” media=“screen” href=“screenstyles.css” />
: 오직 컴퓨터 화면에 적용하기 위한 screenstyle.css 파일을 지정하는 방법
2. @media 혹은 @import
<style type=“text/css”>
@import url(“screenstyles.css”) screen;
@media print { 인쇄를 위한 스타일 시트 규칙을 정의합니다 }
</style>
@media 규칙을 이용해 인쇄를 위한 스타일을 지정할 수 있다.
예제
<style type=“text/css”>
@import url(“screenstyles.css”) screen;
@media print { body {color:black; background:none;} }
</style>
<style type=“text/css”>
@import url(“screenstyles.css”) screen;
@media print { body {color:black; background:none;} }
</style>
3. 여러값 지정
①
<link rel=“stylesheer” type=“text/css” media=“screen, print” href=“screenstyles.css” />
화면과 인쇄 모두에 적용
②
<style type=“text/css”>
@import url(“screenstyles.css”) screen, print;
@media print { 인쇄를 위한 스타일 시트 규칙을 정의합니다 }
</style>
screenstyles.css 는 화면과 인쇄용 모두에 적용이 되고, @media 뒤에 나오는 규칙들은
인쇄에만 적용된다.
4. 화면 스타일과 인쇄 스타일 분리하기
<link rel=“stylesheer” type=“text/css” media=“screen” href=“screenstyles.css” />
<link rel=“stylesheer” type=“text/css” media=“print” href=“print.css” />
예제 – print.css
body {font-family:serif; font-size:12pt; background:none;}
#nav, #sidebar, #advertising, #search {
display:none;}
인쇄용 스타일 시트에서 display:none으로 지정한 항목들은 인쇄 시 표시되지 않는다.
배경도 나오지 않게 정의
body {font-family:serif; font-size:12pt; background:none;}
#nav, #sidebar, #advertising, #search {
display:none;}
인쇄용 스타일 시트에서 display:none으로 지정한 항목들은 인쇄 시 표시되지 않는다.
배경도 나오지 않게 정의
Trackback Address :: http://marie1114.tistory.com/trackback/28
