CSS 미디어 유형이란?
CSS의 미디어 유형(Media Type)은 웹 문서가 어떤 종류의 기기에서 표시되는지에 따라 서로 다른 스타일을 적용할 수 있도록 해주는 속성입니다. 예를 들어, 화면으로 볼 때와 인쇄할 때 각각 다른 레이아웃이나 글꼴 크기를 지정할 수 있습니다.
미디어 유형은 주로 @media 규칙과 함께 사용되며, 아래와 같은 형태로 작성합니다.
@media print {
body { font-size: 12pt; }
}CSS 미디어 유형 목록
CSS에서 정의된 미디어 유형은 다음과 같습니다.
| 번호 | 값 및 설명 |
|---|---|
| 1. | all 모든 기기에 공통으로 적용됩니다. |
| 2. | aural 음성 합성기(스크린 리더 등)를 위한 것입니다. |
| 3. | braille 점자 촉각 피드백 장치를 위한 것입니다. |
| 4. | embossed 페이지 단위로 출력하는 점자 프린터를 위한 것입니다. |
| 5. | handheld 휴대용 기기를 위한 것입니다. 일반적으로 작은 화면, 흑백 디스플레이, 제한된 대역폭을 가진 기기가 해당됩니다. |
| 6. | print 인쇄물처럼 페이지가 나뉘는 불투명한 매체와, 화면에서 인쇄 미리보기 모드로 보는 문서를 위한 것입니다. |
| 7. | projection 프로젝터나 투명 필름 출력처럼 투사되는 프레젠테이션을 위한 것입니다. |
| 8. | screen 주로 컬러 컴퓨터 화면을 위한 것입니다. |
| 9. | tty 텔레타이프, 터미널, 디스플레이 성능이 제한적인 휴대용 기기처럼 고정 폭(fixed-pitch) 문자 그리드를 사용하는 매체를 위한 것입니다. |
| 10. | tv 텔레비전과 같은 유형의 기기를 위한 것입니다. |
참고 사항
aural 유형은 CSS 2.1에서 폐지(deprecated)되었으며, 이후 speech 유형으로 대체되었습니다. 또한 handheld, tty, tv 등 일부 유형은 최신 브라우저에서 거의 지원되지 않으므로, 실무에서는 screen, print, all 정도만 널리 사용됩니다.
기기별 세부 조건(화면 너비, 해상도 등)까지 처리하려면 미디어 유형보다 미디어 쿼리(Media Query)를 활용하는 것이 좋습니다.