미디어 쿼리

미디어 쿼리 소개

각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것

미디어 매체 : 스크린 매체, 프린트, 스크린 리더기
동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줌

CSS2 미디어 타입

동일한 미디어 타입에서 광범위하게 적용
미디어 타입을 제대로 지원하는 기기가 없어 제대로 활용되지 못함

미디어 쿼리

웹이 발전하면서 대응해야 하는 미디어의 폭이 늘어남
W3C는 CSS2의 미디어 타입을 확장하여 CSS3 미디어 쿼리를 발표하였다.

이 미디어 쿼리로 인해 웹 사이트를 제작함에 있어 정적인 고정 레이아웃 웹 사이트에서 동적으로 반응하는 웹 사이트로 패러다임이 변화하였다.

미디어 타입 & 미디어 특성

@media(at media)

@media mediaqueries{/*style rules*/}

@media 로 시작하며 이제부터 미디어 쿼리를 시작한다 라는 뜻
미디어 쿼리문은 논리적으로 평가되며 참일 때만 뒤에 나오는 규칙이 적용된다.

미디어 타입

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

screan : 화면을 출력하는 display
print : 인쇄할 때 사용
all : 모든 미디어에 적용. 미디어를 구분하지는 않음

미디어 특성

width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

width : 뷰포트의 너비, 브라우저 창의 너비
orientation : 세로모드인지 가로모드인지 구분

Syntax

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;

S* : 공백, 없는 걸로 간주
[] : 생략 가능
A|B : A or B
A? : A가 0 or 1 번만 나올 수 있음
A* : A가 0 or 1 or … n 번 나올 수 있음
media_query_list
여러 개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분
media_query
미디어 타입 또는 표현식 단독으로 작성할 수 있다
expression
표현식은 값이 없이 특성 이름만으로 작성할 수 있다

min-/max- 접두사

미디어 특성은 이름 앞에 min-또는 max-접두사를 붙일 수 있다.
접두사 없이 width: 00px 이라고 선언하게 되면 뷰포트의 크기가 정확히 00px 일 때만 적용되기 때문에 다양한 기기들을 대응하기 힘들다.
orientation, grid, scan에는 접두사를 붙일 수 없다.

media_query

@media screen {...} : 미디어 타입이 screen이면 적용
@media screen and(min-width:768px) {...} : 미디어 타입이 screen이고 width가 768px 이상이면 적용
@media (min-width:768px) and (max-width: 1024px) {...} : and 키워드로 연결된 모든 표현식이 참이어야 적용
@media (color-index) : 미디어 장치가 color-index를 지원하면 적용
@media screen and (min-width: 768px), screen and (orientation: portrait), ... : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용 (and 키워드와 반대)
@media not screen and (min-width: 768px) : not 키워드는 하나의 media_query 전체를 부정
(not screen) and (min-width: 768px) : O
not (screen and (min-width: 768px)) : X
@media not screen and (min-width: 768px), print : 첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향을 미치지 않는다.