반응형 웹(6) - 미디어 쿼리

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

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

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

 

구체적인 사용 예시

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


@media screen and (min-width: 800px) { // 800px 이상
	/*
	화면(screen)의 너비스 800px 이상일 경우에
	여기에 적용된 스타일 선언문을 추가 적용할 것이다.
	*/
}

 

 

미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다.

미디어 쿼리의 종류

 

다음과 같은 방식으로도 미디어 쿼리를 적용할 수 있다.

미디어 쿼리 적용

 

 

정리