Media Query

CSS는 HTML에서 표현을 위한 부분을 분리하기 위한 스펙이다. 일단 이렇게 내용에서 표현이 분리되고 나면 같은 내용을 환경에 맞춰 다르게 표현하고 싶어진다. 이런 용도로 처음 나온 것이 CSS2에서 추가된 media type이다.

예를 들어 HTML을 화면과 종이 출력 양쪽에 사용한다면, font-size 속성은 양쪽 모두에 동일하게 적용하지만, text-color 속성은 종이가 흑백임을 가정해서 다르게 주고 싶을 수 있다.

media type은 @media, @import, HTML link의 media 속성으로 줄 수 있다.

@import url("fancyfonts.css") screen;
@media print { /* style sheet for print goes here */ }

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

media type에는 다음과 같은것이 있다.

• all - 모든 장치
• braille - 점자 장치
• embossed - 페이지로 나뉜 점자 프린터(점자책)
• handheld - 손안의 장치(작은 화면)
• print - 프린터
• projection - 프로젝터
• screen - 일반 컴퓨터 화면
• speech - 말하는 장치
• tty - 고정된 글자 격자를 가진 장치
• tv - 텔레비전(낮은 해상도/색상등)

그런데 이걸로는 세세한 조정이 힘들기 때문에 CSS3에서는 이것을 확장한 media query를 제공한다. 다음과 같이 표현한다.

@import url(color.css) screen and (color);
@media screen and (color) { ... }

<link rel="stylesheet" media="screen and (color)" href="example.css" />

media query는 "[ONLY|NOT]? media_type [AND '(' media_feature [ ':' expr ]? ')']*"의 형태를 가진다. media_type을 지정하지 않으면 all을 가정한다. media_feature에는 다음과 같은 것들이 있다.

• [min-/max-]width, [min-/max-]height : 출력 장치의 화면 영역의 크기. 연속 미디어는 뷰포트의 크기, 페이지 미디어는 페이지 상자의 크기이다.
• [min-/max-]device-width, [min-/max-]device-height : 출력 장치의 렌더링 표면의 크기. 연속 미디어는 스크린 크기, 페이지 미디어는 페이지 시트의 크기이다.
• orientation : height>=width면 orientation, 아니면 landscape
• [min-/max-]aspect-ratio : width/height 비율
• [min-/max-]device-aspect-ratio : device-width/device-height 비율
• color, color-index, monochrome, resolution, scan, grid등등