@media queries

모바일 작업하면서 @media query 라는 것을 본격적으로 접하게 되었는데, 참으로 CSS의 기능이 놀랍다는 생각을 해봅니다. CSS가 계속 발전하면서 더욱 다양하고 강력한 기능을 가지게 되었음에도 불구하고, 크로스브라우징 문제로(지원하지 않는 브라우저 때문에) 마음껏 사용하지 못한것이 사실인데요, 더욱 강력한 CSS3가 나오고 브라우저들도 웬만한 CSS속성을 지원하게 된 이 시대에 앞으로 HTML,CSS,JAVASCRIPT의 세계가 기대됩니다.

미디어쿼리는 한마디로 얘기해서 다양한 미디어를 구분하여 각각에 고유한 스타일을 적용시킬 수 있는 속성입니다. 예전같으면 서버사이드 언어, 또는 스크립트로 처리했던 것을 미디어쿼리 CSS로 처리할 수 있는 것이죠.

그렇다면 어떤 경우에 이것을 쓰게 될까..

미디어 타입별, 특정 조건에 따라 고유한 스타일을 적용시키고 싶을 때 사용하게 됩니다.

아래는 미디어 쿼리의 문법 및 사용 방법입니다.

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
| <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed
media_feature: width(가로 너비) | min-width(최소 가로 너비) | max-width(최대 가로 너비)
| height(높이) | min-height(최소 세로 높이) | max-height(최대 세로 높이)
| device-width(디바이스의 기본 가로 너비) | min-device-width(디바이스의 기본 최소 가로 너비)
| max-device-width(디바이스의 기본 최대 가로 너비) | device-height(디바이스의 세로 높이)
| min-device-height | max-device-height | aspect-ratio(화면 비율)
| min-aspect-ratio(최소 화면 비율) | max-aspect-ratio(최대 화면 비율)
| device-aspect-ratio(디바이스의 화면 비율) | min-device-aspect-ratio(디바이스의 최소 화면 비율)
| max-device-aspect-ratio(디바이스의 최대 화면 비율) | color(색상당 비트수)
| min-color(최소 색상당 비트수) | max-color(최대 색상당 비트수)
| color-index(user agent가 지원하는 팔레트의 색상 갯수)
| min-color-index(user agent가 지원하는 팔레트의 색상의 최소 갯수)
| max-color-index(user agent가 지원하는 팔레트의 색상의 최대 갯수)
| monochrome(흑백 장치에서 픽셀 당 비트의 개수) 
| min-monochrome(흑백 장치에서 픽셀 당 비트의 최소 개수)
| max-monochrome(흑백 장치에서 픽셀 당 비트의 최대 개수)
| resolution(해상도) | min-resolution(최소 해상도) | max-resolution(최대 해상도)
| scan | grid

이 중에서 media type의 종류는 다음과 같습니다.

• all : 모든 미디어 타입
• aural : 음성 합성 장치
• braille : 점자 표시 장치
• handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
• print : 인쇄 용도
• projection : 프로젝터 표현 용도
• screen : 컴퓨터 스크린을 위한용도
• tty : 디스플레이 능력이 한정된, 텔렉스(teletype), 터미날, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도 “tty” 메디아 타입에서 제작자는 픽셀(pixel) 단위를 사용하여서는 안됨
• tv : 음성과 영상이 동시 출력되는 TV와 같은 장치
• embossed : 페이지에 인쇄된 점자 표지 장치

이러한 media type 과 media feature 에 따라 스타일을 다르게 적용할 수 있습니다.

continue...