[html/css] 반응형 디자인 알아보기 Media Query

반응형 디자인이란

우리가 열심히 만들어 놓은 웹사이트를 경험하게 되는 모든 디바이스의 크기들은 다 다르다. 그렇기 때문에 개발자들은 이런 점을 고려하여 사용자들의 다양한 viewport가 문제없이 작동하도록. 또, 화면의 크기마다 보기 좋고, 사용하기 편해야 한다. 그래서 쓰는것이 Media Query이다.

미디어쿼리 기본 구문

@media 미디어의타입 and (크기에 대한 조건) {
/ Css 규칙 /
}

미디어의 타입 (screen, all)과 크기에 대한 조건 ex) max-width:300px 등으로 구성된다.

연습1

   <style>
     body {
       background-color: tomato;
     }

     @media screen and (max-width: 500px) {
       body {
         background-color: #fff;
       }
     }
   </style>

body의 백그라운드를 tomato색으로 스타일링 해 두고, 사용자의 viewport width가 500 이하일 때, 배경색을 하얀색이 되도록 스타일링 해 두었다.

연습2

    <style>
      body {
        background-color: tomato;
      }

      @media screen and (orientation: landscape) {
        body {
          background-color: blanchedalmond;
        }
      }
    </style>

똑같이 body의 기본 백그라운드 색을 tomato로 지정해 두고, media가 가로모드일 때(orientation : landscape), 색을 바꿔주었다.

가로크기가 세로크기보다 더 커지면 media query가 작동하여 배경색이 바뀌는 것을 볼 수 있다.

마치며

정말 간단하게 media query를 알아보았다. 더 나아가 미디어쿼리를 이용하여 모바일의 화면과 pc화면을 구분할 수 있고, 사용자가 화면의 크기를 줄이거나 늘렸을 때에 맞춰 보기 좋은 웹사이트를 반응형으로 만들 수 있겠다고 생각하였다.