[CSS] 미디어 쿼리 (media queries)

미디어 쿼리란? 미디어에게 질문하고 감지하여 웹사이트를 변경하는 기술입니다

 

스타일에 사용하면 됩니다. 사용 방법은 일반 CSS 사용방법과 다르지 않지만 한가지를 더 적어주어야 합니다.

@media only and (max-width: 560px) {
}

위와 같은 코드가 추가되어야 합니다. (max-width: 560px) 이렇게 적혀있는 부분에 조건을 적어서 조건에 맞을때 동작하도록 만들 수 있습니다.

 

좀더 크게 보여드리겠습니다.

<style>
  .test-box {
  	width: 400px;
    height: 100px;
    background-color: blue;
  }
  @media only and (max-width: 400px) {
  	.test-box {
   	  width: 100%;
    }
  }
</style>

style에 이렇게 적은뒤 HTML에 .test-box를 만든뒤에 브라우저를 한번 줄였다가 늘였다가 해보세요!