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

1. 미디어 쿼리(media query) 

    화면 해상도나 기기 방향 등을 조절하여 HTML에 스타일을 적용할 수 있으며,

    반응형 웹을 만들 때 사용할 수 있다.

 

@media(조건){스타일}

 

    - 조건에 사용하는 미디어 속성은 width, height, device-width, device-height, color, color-index, resolution, monochrome,

       orientation, aspect-ratio, device-aspect-ratio 등이 있다.

 

    - 이 중 width를 보면 max와 min을 사용해보면

       (min-width: 800px) => 최소 800px 너비부터 스타일을 적용한다는 것이고,

       (max-width: 800px) => 최대 800px까지 스타일을 적용한다는 것이다.

    

 

예) max-width: 800px 

      최대 800px까지 스타일을 적용한다. 

 

@media(max-width:800px){
  #grid{
    display: block;
  }
  ol{
    border-right:none;
  }
  h1{
    border-bottom:none;
  }
}

 

800px보다 큰 경우

 

800px보다 작은 경우