[CSS] 미디어 쿼리를 이용하여 특정 해상도에서 CSS 속성 변경하는 방법

[CSS] 미디어 쿼리를 이용하여 특정 해상도에서 CSS 속성 변경하는 방법

미디어 쿼리는 “반응형 웹”이라는 형태를 표현하는데 중추적인 역할을 합니다. 미디어 쿼리가 없다면 반응형 웹이라는 형태도 없었을 겁니다.

바로 본문으로 넘어가서 데스크탑, 태블릿, 모바일 구분하지 않고 단순하게 사용 예를 들겠습니다. 이 예제는 창 가로 폭이 1280px 이하인 경우 quick_menu 라는 클래스를 가진 요소를 보이지 않게 처리하는 방법입니다.

@media all and (max-width:1280px) {
  .quick_menu {display:none;}
}

 

여담으로 반응협 웹이라는 것은 컨텐츠 표현의 한 방법일 뿐이지 다른 방식보다 진보된 형태는 아닙니다. 무분별한 미디어 쿼리 사용은 데스크탑/태블릿/모바일 디바이스에 대응하는 웹페이지를 따로 구성하는 것보다 난해한 구조를 가지게 될 수 있습니다. 표현될 컨텐츠의 성격에 따라 적절하게 사용해줘야 하며 여기서 말하는 적절함이란 복잡하지 않은 레이아웃 또는 한 페이지에 표시될 컨텐츠의 양을 기준으로 합니다.

예를 들어 네이버, 다음과 같은 대형 포털사이트를 반응형으로 만든다면.. 실제 이런 포털은 반응형을 사용하지 않습니다. 데스크탑 레이아웃에서 보여질 컨텐츠를 모바일에서 모두 보여줄 필요가 없거니와 각 해상도에서 최적화된 구조를 잡을 수 없기 때문입니다.

그렇기 때문에 무조건 반응형 구조를 지향할 필요는 없습니다. 어떤 컨텐츠를 어떻게 구성 하느냐에 따라 반응형 또는 별도 페이지, 기능에 따라 미디어 쿼리를 섞을 지를 결정하는 것이 중요하다는 생각입니다.

%d 블로거가 이것을 좋아합니다: