미디어 쿼리란 Viewport의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있게 해주는 CSS의 기능입니다. 이 때, 뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있습니다.
미디어 쿼리의 기본 형태는 다음과 같습니다.
@media screen and (max-width: 500px) {
/* 스크린의 너비가 500px 이하일 경우 적용시킬 스타일 시트를 적습니다. */
}
@media : 미디어 쿼리를 사용한다는 의미입니다.screen : 미디어 타입입니다. 이 페이지가 디지털 화면, 즉 screen에 노출되었을 때 중괄호 안에 입력한 스타일 시트를 적용한다는 의미입니다.max-width: 500px : viewport 너비가 500px 이하일 경우 해당 스타일 시트를 적용한다는 의미입니다.and : screen, max-width 등 여러가지 미디어 쿼리 조건을 연결시켜 줄 수 있습니다. and로 연결한 모든 조건을 만족하는 경우에 해당 스타일 시트를 적용합니다.