미디어 쿼리란? 그리고 쓰임새 알아보기 - 반응형 웹

미디어 쿼리가 무엇인가? 

미디어쿼리는 CSS3 모듈중 하나로 PC, 스마트TV, 스마트폰, 태블릿등 여러 웹뷰어를 가지고 있는 미디어,
매체에 맞게 특정한 CSS스타일을 지정해주는(레이아웃이 바뀌는) 기능(방법)입니다.

W3C의 미디어쿼리 모듈 스팩 (http://www.w3c.org/tr/css3-mediaqueries) 를 참고해보세요.

미디어 쿼리의 구문

[ONLY | NOT] @media [미디어 유형] [AND조건 또는 쉽표(,)] { 실행문 ~~ } 

예)

@media screen and (min-width:200px) and (max-width:360px) { ~~~ }

해석해보면 - 미디어거 스크린이면서 최소너비가 200px 이고 

최대 너비가 360px일경우 css를 정의.... 이다.

미디어 쿼리 구문은 미디어 쿼리를 지원하지 않느 웹브라우저에서는 실행되지 않습니다.

IE(인터넷익스플로러)외엔 대부분 미디어 쿼리를 인식합니다.

'NOT tv'라고 지정하면 tv외에 모든 미디어를 말합니다.

'ONLY'는 미디어쿼리가 지원되는 브라우저에서만 해석됨을 말합니다.

all	모든 미디어 유형에서 사용할 CSS
print	인쇄장치에서 사용되는 CSS
screen	컴퓨터 스크린에서 사용되는 CSS
tv	음성,영상 동시출력 TV에서 사용되는 CSS
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille	점자 표시 장치에서 사용할 CSS를 정의함
handheld	패드처럼 들고다니는 장치 CSS
projection	프로젝터를 위한 CSS
tty	디스플레이 기능이 제한된 장치의 CSS (이런 장치에선 px단위 사용불가)
embossed	점자프린터 CSS

(*뷰포트 란?  : 실제 웹문서 내용이 화면에 보이는 영역) 

미디어쿼리를 사용하는 조건...

1) 가로와 세로 (화면크기) 

width, height	너비, 높이 (일반)
min-width, min-height	최소 너비,높이
max-width, max-height	최대 너비,높이

화면너비가 600px이상이고 900px일때...
@media all (min-width:600px) and (max-height:900px)

 min 접두사를 사용하는 조건문은  width값이 작은 순부터 작성하며...
 max접두사를 사용하는 조건문은  width값이 큰 수부터 작성하셔야 합니다.




 2) 단말기 브라우저의 창(너비,높이)

아이폰4의 해상도는 640*960 고 아이폰의 사파리 브라우저 너비는 320*480 임...
안드로이드폰 해상도는 480*800일때 브라우저는 320*533 임..
그러나 현재 많은 스마트폰의 크기가 커지고 다양해지므로 많은 크기가 있다...

device-width, device-height	단말기의 너비, 높이 (일반)
min-device-width, min-device-height	단말기의 최소 너비,높이
max-device-width, max-device-height	단말기의 최대 너비,높이

3) 화면 회전

스마트폰, 태블릿은 가로, 세로 형 화면회전시 회전에 맞춰 모양이 바뀝니다.
코딩 예)
@media all and (orientation:portrait) { ~~~ }
@mdiea all and (orientation:landscape) { ~~~ }

orientation:portrait	단말기 세로방향
orientation:landscape	단말기 가로방향

4) 화면 비율

브라우저의 화면 너비 값을 높이값으로 나눈 것입니다. 숫자값이나 계산식을 사용합니다.

aspect-ratio	화면비율(너비값/높이값)
min-aspect-ratio	최소 화면비율
max-aspect-ratio	최대 화면비율

(단말기 화면비율)

device-aspect-ratio	단말기 화면비율(너비값/높이값)
device-min-aspect-ratio	단말기 최소 화면비율
device-max-aspect-ratio	단말기 최대 화면비율

5) 색상당 비트수 
단말기에서 사용하는 최대 색상 비트수를 말함...

color:1 이면 최대 2가지 (2에1승)  , color:3 이면  비트 3개 (2에 3승)   

color	비트수
min-color	최소 비트수
max-color	최대 비트수