[Study] HTML/CSS | 08 미디어쿼리

• 미디어쿼리 소개

미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다.

미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다.

미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다.

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

• 미디어 타입 & 미디어 특성

@media mediaqueries { /* style rules  */ }

미디어 타입 : all, print, screen 등

미디어 특성 : width, orientation 등

• Syntax - 1

media_type : all, screen, print 등 명세에 정의된 미디어 타입

media_feature : width, orientation 등 명세에 정의된 미디어 특성

• Syntax -2

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

**@media screen and (min-width: 768px) { ... }**    *: 미디어 타입이 screen이고 width가 768px 이상이면 적용됩니다. 두 개 중 하나라도 만족하지 않으면 거짓이 됩니다.*

**@media (min-width: 768px) and (max-width: 1024px) { ... }**    *: and는 연결된 모든 표현식이 참이면 적용됩니다.(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) 잘못된 해석!*    *: not (screen and (min-width: 768px)) 올바른 해석!*    *: @media not screen and (min-width: 768px), print       첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향이 없습니다.*