미디어 쿼리

미디어 쿼리는 다양한 화면 크기와 해상도에 맞게 CSS의 웹 페이지 콘텐츠를 조정할 수 있게 해 주는 기능입니다. 미디어 쿼리는 반응형 웹 디자인의 기본 요소이며, 여러 장치에 맞게 웹 사이트의 모양을 사용자 지정하는 데 사용됩니다.

미디어 쿼리는 웹 페이지의 HTML 안에 삽입하거나 웹 페이지에서 참조하는 별도의 .CSS 파일에 포함할 수 있습니다. 다음은 간단한 미디어 쿼리의 예입니다.

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

위 미디어 쿼리는 사용자의 웹 브라우저 창 너비가 768 픽셀 이하일 때 활성화됩니다. 데스크톱 컴퓨터에서 창 크기를 줄였을 때나 태블릿과 같은 모바일 장치로 웹 페이지를 볼 때 이러한 상황이 발생할 수 있습니다.

반응형 웹 디자인에서 미디어 쿼리는 다양한 화면 크기에 대한 필터 역할을 합니다. 캐스케이딩 스타일 시트 안의 모든 모듈과 마찬가지로 목록에서 뒤에 나오는 미디어 쿼리는 앞에 있는 미디어 쿼리를 덮어씁니다. 따라서 일반적으로 기본 스타일을 CSS 문서에서 먼저 정의한 다음, 다양한 화면 크기에 대한 미디어 쿼리를 정의합니다. 예를 들어 데스크톱 스타일을 먼저 정의하고, 태블릿 사용자를 위한 스타일이 포함된 미디어 쿼리를 정의한 다음, 스마트폰 사용자를 위한 미디어 쿼리를 정의할 수 있습니다. 스타일을 반대 순서로 정의할 수도 있으며, 이를 "모바일 우선" 개발이라고 합니다.

min-width는 미디어 쿼리에서 사용되는 기능 중 단연 가장 일반적이지만, 그 밖에도 많은 기능을 사용할 수 있습니다. 예로는 min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation, resolution 등이 있습니다. 예를 들어 resolution 값은 HiDPI 디스플레이(Retina 디스플레이 등)를 감지하고 일반 이미지 대신 고해상도 그래픽을 불러오는 데 사용할 수 있습니다.