[css]반응형 웹을 만들기 위한 media-query

2007년 현재는 고인이 된 스티브잡스가 it의 생태계를 완전히 뒤집는 아이템인 아이폰을 선보였다. 

 

이 아이폰의 등장으로 인해서 웹디자이너들은 고민에 빠졌는데 바로 작은 디스플레이에서 기존의 웹은 너무 크고 불편하다는 것이였다. 

 

그래서 작은 디스플레이에 맞게 웹을 새로 만들어야했다. 

 

그래서 디자이너들이 할 수 있는 결정은 두 가지였다. 디바이스의 크기를 보고 새로운 페이지를 연결해주거나 기존 페이지에 미디어 쿼리를 활용 해 디바이스에 따라 css가 다르게 반응 하게 하는 것이였다.

 

 

미디어 쿼리의 사용

기본적인 media query의 사용이다. 

<style>
  div{
    height: 100px;
  }
  @media(min-width : 500px){
    .good{
      background-color: aqua;
    }
  }
  @media(min-width : 1000px){
    .good{
      background-color: black;
    }
  }
  @media(min-width : 1500px){
    .good{
      background-color: red;
    }
  }
</style>

 

@media("크기"){} 형태로 작성이 되며 각 블록에 작성된 스타일은 미디어 쿼리에 적용된 한계를 벗어나면 적용되지 않는다. 

1500px 이상일때

1000px이상일때

500px이상일때

 

min-width, max-width

 

min-width : value // value 값 보다 이상이면 적용 

 

max-width : value // value 값 까지 적용 

 

연산자 

미디어 쿼리는 연산자를 사용해서 media query의 사용을 엄격화 할 수 있다. 

 

연산자 종류로는 'and' , ' , (쉼표) ' , ' not ' , ' only ' 가 있다.

 

() and () // 좌항과 우항의 조건이 충족되면 해당 스타일을 사용한다.

 

() , () // 좌항과 우항에 해당한다면 해당 스타일을 사용한다.

 

not 기기  , ()// 특정 기기에서 스타일을 적용 시키지 않는다.

 

only 기기 ,  특정 기기에서만 스타일을 적용 시킨다.    

 

  @media(min-width : 500px) and (max-width : 1000px){
    .good{
      background-color: aqua;
    }
  }
 
  @media(min-width : 1500px){
    .good{
      background-color: red;
    }
  }