미디어 쿼리

현대적인 웹 어플리케이션을 만들 때 굉장히 중요한 요소라 할 수 있는 반응형 디자인의 흐름을 알아보자.

 

화면이 작아짐에 따라 선이 없어지고 위치가 달라진다.

그리고 화면이 일정한 크기가 되면 선이 생기고 화면이 바뀐다.

 

즉, 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 반응형 웹, 반응형 웹 디자인, 영어로는 'responsive web'이라고 한다. 

 

반응형 디자인을 순수한 웹 기술인 CSS를 통해 구현하는 핵심적인 개념이 미디어 쿼리이다.

 

 

...생략...
    <style>
      ...생략...
      @media(min-width:800px){
        div{
          display: none;
        }
      }
      ...생략...
    </style>
...생략...

 

화면의 너비가 800px보다 크다면 <div>태그에 display:none;을 설정하는 코드이다.

화면의 크기가 800px가 넘는 순간 <div>의 내용이 사라진다. 

min대신 max를 넣으면 화면의 크기가 800px보다 작으면 <div>가 사라지는 결과를 보여준다.

 

즉, 미디어 쿼리를 활용하면 화면 크기에 따라, 스마트폰의 가로 모드/세로 모드에 따라,

또 여러가지 화면의 특성에 따라 특정 조건을 만족할 때만 미디어 쿼리의 코드를 동작시키는 것이 가능하다.

이를 미디어 쿼리라 부르며 이 미디어 쿼리는 여러 가지 형태의 화면이 존재하는 이 세상에서 굉장히 중요한 존재이다.

 

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.