CSS 미디어쿼리

미디어쿼리란?

스크린에 사이즈에 따라 반응형 웹페이지를 만들기 위한 도구

기본 문법

 @media (조건) {
      실행코드
      }
      
 ex.
@media (min-width: 300px) and (max-width: 700px) {
    .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
    }
}

@media (max-width: 700px) {} 처럼 미디어 타입을 생략하면 all이 기본값이 되어 모든 미디어 타입에 적용이 된다. 미디어 타입에 사용되는 값은 screen, all이 일반적이다.

조건이 만족되면 스타일 명령이 실행된다.
조건으로는 min-width와 max-width로 브라우저 가로폭을 설정한다.
위 예시에서는 브라우저의 가로폭이 최소 320px최대 800px이 되었을 경우 중괄호 안의 css속성으로 대체된다.

#grid {
    display:grid;
    grid-template-columns: 150px 1fr;}
#grid ol {
    border-right: 1px solid gray;
}

위 예시에는 아이디가 grid인 태그에 display: grid가 적용되어 있고 아이디가 grid ol 인 태그에 오른쪽 테두리가 적용되어 있다.

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

스크린 크기가 800px를 넘어가는 경우에만 효과를 적용하고 싶을 때
max-width: 800px 최대 800px까지라는 조건 하에서 효과를 무력화하는 명령을 실행할 수 있다. 즉 800px이하인 경우에 적용하고 싶은 스타일을 작하면 된다.

반대로 min-width: 800px이라는 조건을 설정하면 명령은 스크린이 최소 800px일 때, 즉 800px 이상일때 실행된다.

viewport

미디어쿼리가 제대로 작동하기 위해서는 무조건 아래 meta태그 viewport속성으로 너비와 배율 설정을 해줘야한다.

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

viewport란?
웹페이지가 사용자에게 보여지는 영역.

너비와 배율을 설정할 때 사용하는 메타태그 의 속성 중 하나이며 기기 화면상 표시되는 영역을 의미한다.
페이지의 width값을 기기 스크린의 width값으로 설정하며
최초 화면 기본 배율을 1.0으로 설정하는 태그이다.

CSS속성 상속

미디어쿼리 내부에 입력하지 않은 동시에 미디어쿼리 외부에 존재하는 CSS속성은 상속된다.
상속받지 않고자한다면 해당 속성값을 none으로 미디어쿼리 내부에 입력해야한다.