@media print
@media print {
#nav-area {display: none;}
}일반적인 미디어 타입은 아래와 같다.
screen | 컬러 컴퓨터 표시 장치 |
print | 출력 장치 |
projection | 프로젝트 출력 장치 |
all | 그외 모든 미디어 장치(기본 설정) |
| Media Types | Media Groups | |||
|---|---|---|---|---|
| continuous/paged | visual/audio/speech/tactile | grid/bitmap | interactive/static | |
| braille | continuous | tactile | grid | both |
| embossed | paged | tactile | grid | static |
| handheld | both | visual, audio, speech | both | both |
| paged | visual | bitmap | static | |
| projection | paged | visual | bitmap | interactive |
| screen | continuous | visual, audio | bitmap | both |
| speech | continuous | speech | N/A | both |
| tty | continuous | visual | grid | both |
| tv | both | visual, audio | bitmap | both |
출력
CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다
@page 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 @page:left와 @page:right로 각각의 여백을 개별로 설정 할 수 있다.
출력 매체를 위해 사용되는 단위는 인치 (in), 포인트(pt = 1/72 inch), 센티미터(cm)와 밀리미터(mm)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.
Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 page-break-after, page-break-inside속성을 사용할 수 있다.
예제
아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.
@page {margin: 1in;}
아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.
h1 {page-break-before: always;}
좀더 자세히
CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 Paged media를 확인 하라.
CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.
댓글