미디어 쿼리(media query)는 미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 모듈이다.
만약 pc화면의 크기 조절(물리적)한다면 뷰포트 크기 변화를 인식해 그에 맞는 레이아웃으로 전환하는 모듈이라고 보면 된다.
코드 예시
@meida screen and (max-width: 768px) {
/* screen의 너비가 768px 이하일 경우 적용될 스타일 속성
*/
}미디어타입(screen)을 정의한 후 and 우측에 뷰포트의 최대, 최소 단위를 규정하면 된다.
위의 코드가 적용된다면 'screen'의 너비가 768px 이하일 경우에는 지정한 스타일 속성이 적용될 것이다.
그림을 보면 Desktop, Tablet, Mobile 기기에 따라 레이아웃이 모두 다른 것을 볼 수 있다.
미디어쿼리를 사용하여 조건을 제시하고 그에 맞는 스타일 속성을 적용한 것이다.
hyohyo