CSS 미디어쿼리

미디어쿼리

모든 기기에 대응되는 반응형 웹사이트를 만들 때 사용되는 CSS구문

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}  

viewport meta tag

미디어쿼리가 제대로 작동하지 않는 문제를 방지하기 위해 viewport로 너비와 배율을 설정해야 함
head 태그 안에 작성

<meta name="viewport" content=“width=device-width, initial-scale=1.0”>

CSS 속성 상속

미디어쿼리안에 작성되지 않은 속성은 미디어쿼리 외부 영역에 있는 CSS속성을 상속 받음
만약 상속을 받지 않고자 하면 속성값을 none입력