1. 미디어쿼리(Media Queries)

• 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것
• 반응형 웹 사이트 제작에 반드시 필요한 기술

---

2. 미디어 타입 & 미디어 특성

선언

• @media(at media)

@media mediaqueries { /* style rules  */ }

1) 미디어 타입(media_type)

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

알아야 할 타입은 all, print, screen 정도이다.
화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은 전부 여기에 해당이 된다.

2) 미디어 특성(media_feature)

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

알아야 할 특성은 width와 orientation 정도이다.
width : 뷰포트의 너비, 즉 브라우저 창의 너비
orientation : 미디어가 세로모드인지 가로모드인지 구분

---

3. Syntax

1) 미디어 쿼리 Syntax

미디어쿼리의 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*
 ;
 

• 대괄호 : 안에 내용은 생략 가능
• 파이프라인 a | b : a 또는 b 둘 중에 하나를 선택
• a? : a가 0번 나오거나 1번만 나올 수 있음
• a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
• media_type : all, screen, print 등 명세에 정의된 미디어 타입
• media_feature : width, orientation 등 명세에 정의된 미디어 특성

(1) media_query_list

• 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능
• 쉼표를 이용해서 구분

(2) 가상 클래스(pseudo class)

• A 형태
  • and 키워드를 이용해서 미디어 표현식을 붙임
  • 미디어 타입 앞에는 only 또는 not 키워드가 올 수 있음
  • 미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있음

• B 형태
  • 미디어 타입 없이 미디어 표현식이 바로 나올 수 있음(all로 간주)
  • 미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.

(3) expression

• 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어짐
• 이름과 값은 : 기호로 연결
• 값 없이 특성 이름만으로도 작성할 수 있음

2) 예제 코드

해석 방법을 익히자.

예제 ①

@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), ...

쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용된다. (or 같은 느낌)

예제 ⑥

@media not screen and (min-width: 768px)

not 키워드는 하나의 media_query 전체를 부정한다.

(not screen) and (min-width: 768px) 잘못된 해석!
not (screen and (min-width: 768px)) 올바른 해석!