[반응형 웹 디자인]미디어 쿼리 이해하기

화면의 크기나 환경에 따라 웹사이트를 변경하는 기술, 미디어 쿼리 이해하기

미디어 쿼리의 기본 문법

[only 또는 not] @media[미디어 유형][and 또는 ,콤마](조건문){실행문}

@media 는 media 쿼리의 시작을 알리는 문법입니다.

[미디어 유형] 미디어 쿼리는 미디어 별로 따로 css를 작성한다. 생략이 가능하며, 생략 시 에는 all keyword를 대응합니다.

and 는 앞 뒤 조건이 모두 사실일 때 뒤에 따라오는 것을 해석 하라는 의미입니다.

,(콤마)는 앞 뒤 조건이 둘 중 하나만 사실이여도 뒤에 따라오는 것을 해석하라는 의미입니다.  and 와 ,(콤마) 모두 생략 가능합니다.

and 와 , 는 조건에 따라 판단하는 논리 연산자입니다.

{실행문} 앞에 조건들이 모두 사실일 때 실행되는 실행문입니다. 일반적으로 css 코드를 작성합니다.

기기명	설명
all	모든 장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고 다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

조건문	설명	조건값	min / max 사용 여부
width	웹 페이지의 가로 너빗값	width 속성에서 사용할 수 있는 모든 속성값	사용함
height	웹 페이지의 세로 높잇값
device-width	기기의 가로 너빗값
device-height	기기의 세로 높잇값
orientation	기기의 화면 방향	portrait(세로) landscape(가로)	사용 안 함
aspect-ratio	화면 비율	브라우저 화면 비율(1), 브라우저 종횡비(16/9), 브라우저 해상도(1280/720)	사용함
device-aspect-ratio	단말기 브라우저의 화면 비율	기기 화면 비율(1), 기기 종횡비(16/9), 기기해상도(640/320)
color	기기의 비트 수	8(bit 단위)
color-index	기기의 색상 수	128(색상 수 단위)
monochrome	기기가 흑백일 때 픽셀 당 비트 수	1(bit 단위)
resolution	기기의 해상력	300dpi/dpcm
scan	TV의 스캔 방식	progressive/interlace
grid	기기으 그리드/비트맵	0(비트맵 방식)/1(그리드 방식)	사용안함

미디어쿼리를 적용하려면?

<link rel="stylesheet" href="mediaqueries.css">

미디어 쿼리를 사용할 때 주의해야 할 사항1

@media all and 공백 (min-width: 320px){실행문}

ex) 

맞는 문법

@media all and (min-width: 320px){ body{ background:red; } }

틀린 문법

@media all and(min-width: 320px){ body{ background:red; } }

미디어 쿼리를 사용할 때 주의해야 할 사항2

조건문 접두사인 min/max를 사용할 때 min 접두사는 반드시 크기가 작은 순서대로 작성해야 하고,

max 접두사를 사용할 때는 반드시 크기가 큰 순서대로 작성해야 함.

min/max 접두사를 사용할 때 순서가 중요한 이유는 min은 최소 또는 그 이상이라는 뜻으로, 점차 커지는 것을 의미하고,

반대로 max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에, 

min/max 접두사를 사용할 때는 순서를 반드시 지켜야 함.

미디어 쿼리를 사용할 때 주의해야 할 사항3

미디어 쿼리를 사용해서 브라우저 크기를 감지할 때 어떤 대상을 기준으로 크기를 감지하는지 모르고 있는 경우가 대부분임.

이처럼 어떤 기준으로 크기를 감지해야 하는지 몰라 웹사이트를 제작할 때 혼란을 겪는 경우가 많은데, 여기서 알아두어야 할 점은 미디어 쿼리를 사용해서 브라우저의 크기를 감지할 때는 HTML 문서 크기를 기준으로 감지한다는 것임.