[CSS] 미디어 쿼리 (media query)

1. 미디어 타입 (media type)

- all: 모든 미디어에 사용합니다.

- print: 문서를 인쇄하거나 화면에 미리보기를 표시할 때 사용합니다.

- screen: 테스크톱 모니터 화면 문서표시 할 때 사용합니다. (웹 브라우저는 모두 여기 해당)

 

2. 미디어 서술자 (media descriptor)

- 논리 키워드

    1. and: 모든 조건이 만족해야만 적용됩니다. ( 예: (color) and (max-width: 800px) )

    2. not: 모든 조건이 맞으면 적용됩니다. ( 예: not (color) and (max-width: 800px) )

    3. only: 미디어 쿼리를 이해하지 못하는 브라우저가 stylesheet를 사용하지 않게합니다.

-그 외

width, min-width, max-width, device-width, min-device-width, max-device-width 등

 

- 예시

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}