미디어쿼리는 CSS3의 기술로, 디바이스의 너비에 따라서 다르게 변경되는 스타일을 지정하기 위해 사용하는 반응형 웹을 만들기 위한 필수 구문이다.


반응형 웹을 적용하기 위해서 먼저 meta 태그로 viewport를 설정해줘야 한다.

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

화면의 너비를 디바이스의 너비로 지정하고, 기본 배율을 1.0으로 지정하겠다는 선언이다. 디바이스의 비율에 맞춰서 초기 크기를 자동으로 잡아준다.




미디어쿼리 작성법

/*
  @media 미디어타입 and|not|only (표현식) {
    각 디바이스 환경이 되었을 때 실행 할 스타일 작성
  }
  
  미디어타입 -> all(모두), screen(스크린 화면), print(인쇄 장치), tv 등
*/

@media screen and (max-width:767px) {
  body {background: red;}
}

@media screen and (min-width:768px) and (max-width:991px) {
  body {background: yellow;}
}

@media screen and (min-width:992px) {
  body {background: green;}
}









이렇게 지정한 너비에 맞게 해당 스타일이 적용된다.



만약 미디어쿼리를 각 파일별로 분리하여 작성할 경우에는, link 태그의 media 속성을 이용해서 각각 세부 지정해줄 수 있다.

<link rel="stylesheet" href="파일명.css" media="screen and (max-width:767px)">