[Web] 미디어 쿼리(Media qeury) 기본

□ 미디어 쿼리(Media Query) :반응형 웹을 만들 때 사용하는 기법. 브라우저 크기에따라 구성요소의 크기를 지정 가능하게 함.

□ 예 시

[CSS]

@media (min-width: 768px) {

  .search {

    width: 500px;

  }

}

▷ 브라우저의 크기가 768px보다 커지면, class="search"가 되는 구성요소의 width를 500px로 설정  

@media (max-width: 560px) {

  .search {

    width: 100%;

  }

}

▷ 브라우저의 크기가 560px보다 작아지면, class="search"가 되는 구성요소의 width를 브라우저 크기와 동일(100%)하게 설정  

[HTML]

<div class="search" style="background-color:gray">1234</div> 

▷ 화면이 변함에 따라 크기가 변하는 div를 확인 가능

※ [CSS] .search → [HTML] class

   [CSS] #search → [HTML] id