미디어 쿼리 써먹기(응용)

이번 시간에 할 내용은 화면의 크기가 줄어들면 색이 바뀌는 반응형웹을 만들어 볼겁니다.

 

예제

800px을 기준으로 화면크기가 800px보다 클 때, 작을 때의 디자인을 미디어 쿼리를 통해 다르게 만들어 보겠습니다.

 

<style>
      @media(max-width:800px){
         body{
            background-color: aquamarine;
         }
      }
      @media(min-width:600px){
         body{
            background-color:pink;
         }
      }

이렇게 크기가 800px일 때랑 600px로 변경했을 때 어떻게 바뀌는지 봅시다.

 

기존800px일때

600px로 줄였을 때

이런식으로 웹창을 줄이거나 늘일 때 색이 변화하는 모습을 볼 수 있습니다.