CSS - 5. 미디어쿼리

 

1. 미디어 쿼리 소개

미디어쿼리는 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것. 미디어 매체란 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들이다. 미디어 쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다.

 

 

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

• @media(at media)

@media mediaqueries { /* style rules */ }

미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고 거짓이면 무시된다.

 

• 미디어 타입: 많은 미디어 타입들이 있지만 실무에서 사용되고 알아야 될 타입은 all, print, screen 정도이다. 그 중에서도 screen이 거의 대부분이다. 

 

• 미디어 특성: 미디어 특성 중에서도 width와 orentation 정도이다. width는 뷰포트의 너비, 즉 브라우저 창의 너비를 마하며 orientation은 미디어가 세로모드인지 가로모드인지를 구분한다. 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭된다.

 

3. 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]: 내용이 있을수도 있고, 없을수도 있다.
• a | b: a, b 둘 중에 선택
• a?: a가 0번 나오거나 한번만 나올 수 있음
• a*: a가 0번 나오거나 그 이상 계속 나올 수 있음
• media_type: all, print, screen
• media_feature: width, orientation

1. 여러 개의 미디어 쿼리로 이루어진 리스트로 작성할 수 있다.

2. 미디어 타입 또는 표현식 단독으로도 작성할 수 있다.

3. 표현식은 값이 없이 특성 이름만으로 작성할 수 있다.

 

 

media_query
: [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
| expression [ AND S* expression ]*
;

@media screen {...}: 미디어 타입이 screen이면 적용

@media screen and (min-width:768px) {...}:  미디어 타입이 screen이면서 width가 768px 이상일 때 적용

@media (min-width: 768px) and (max-width: 1024px): 미디어 타입에 상관 없이 width가 768px 이상이고, 1024px이하 일때 적용

@media (color-index): 미디어 장치가 color-index를 지원하면 적용

@media screen and (min-width: 768px), and screen and (orentation: portrait) ...: ','는 or라고 생각하면 됨. 둘 중 하나 참일시 적용

@media not screen and (min-width: 768px): screen이 아니면서 width가 768px 이상이 아닐 때 적용

 

 

4. 적용 방법

1. @media:

    : @media screen and (color)

 

2. <link media="">

    : <link rel="stylesheet" media="screen and (color)" href="example.css">

 

3. @import

    : @import url(example.css) screen and (color)