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

프론트엔드/CSS

san012 2022. 7. 21. 15:42

화면 해상도나 기기 방향 등을 조절하여 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;
  }
}