[CSS] 미디어 쿼리

미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일합니다.

@media mediaqueries { /* style rules  */ }

@media 로 시작하며, 그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries)은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시됩니다.

미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있습니다.

미디어 타입

all, print, screen 등등

화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은 전부 여기에 해당이 됩니다.

print 타입은 프린트 됐을 때 인쇄매체 타입입니다.

all 타입은 모든 미디어에 적용되는 타입입니다. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않습니다.

미디어 특성

width, orientation 등등

• width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)

• orientation은 미디어가 세로모드인지 가로모드인지를 구분합니다.

미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 height가 width보다 같거나 크면 세로모드 반대인 경우에는 가로모드라고 해석합니다.
세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭이 됩니다.