미디어 쿼리는 “반응형 웹”이라는 형태를 표현하는데 중추적인 역할을 합니다. 미디어 쿼리가 없다면 반응형 웹이라는 형태도 없었을 겁니다.
바로 본문으로 넘어가서 데스크탑, 태블릿, 모바일 구분하지 않고 단순하게 사용 예를 들겠습니다. 이 예제는 창 가로 폭이 1280px 이하인 경우 quick_menu 라는 클래스를 가진 요소를 보이지 않게 처리하는 방법입니다.
@media all and (max-width:1280px) {
.quick_menu {display:none;}
}
여담으로 반응협 웹이라는 것은 컨텐츠 표현의 한 방법일 뿐이지 다른 방식보다 진보된 형태는 아닙니다. 무분별한 미디어 쿼리 사용은 데스크탑/태블릿/모바일 디바이스에 대응하는 웹페이지를 따로 구성하는 것보다 난해한 구조를 가지게 될 수 있습니다. 표현될 컨텐츠의 성격에 따라 적절하게 사용해줘야 하며 여기서 말하는 적절함이란 복잡하지 않은 레이아웃 또는 한 페이지에 표시될 컨텐츠의 양을 기준으로 합니다.
예를 들어 네이버, 다음과 같은 대형 포털사이트를 반응형으로 만든다면.. 실제 이런 포털은 반응형을 사용하지 않습니다. 데스크탑 레이아웃에서 보여질 컨텐츠를 모바일에서 모두 보여줄 필요가 없거니와 각 해상도에서 최적화된 구조를 잡을 수 없기 때문입니다.
그렇기 때문에 무조건 반응형 구조를 지향할 필요는 없습니다. 어떤 컨텐츠를 어떻게 구성 하느냐에 따라 반응형 또는 별도 페이지, 기능에 따라 미디어 쿼리를 섞을 지를 결정하는 것이 중요하다는 생각입니다.