반응형 웹 기초 : 미디어 쿼리

미디어 쿼리

미디어 쿼리는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치(기능)이다.
모든 미디어 쿼리는 다음 두 가지 구성 요소를 지니고 있다.

• 미디어 타입
• 조건에 대한 물음(쿼리)

@media 미디어_타입 and (조건에_대한_물음) {
미디어 타입과 조건을
모두 만족할 때 덮어씌울
스타일 선언문
}

ex) 
@media screen and (max-width: 768px) {
화면 (screen)의 
너비가 768px **이하**일 경우에 
여기 정의된 스타일 선언문을 추가 적용
}

• 미디어 타입에는 screen이 가장 흔하게 사용됨

다양한 방식으로 미디어 쿼리를 적용할 수 있다
ex1) link 태그에 미디어 쿼리 추가,
ex2) @import 구문을 이용한 추가