[CSS] 반응형 웹 사이트 - 미디어 쿼리(Media Query)

개념

미디어 쿼리(Media Query)

미디어 타입을 인식하고 콘텐츠를 읽어들이는 기기 or 브라우저의 물리적 속성을 감지할 수 있는 유용한 장치

구성 요소

- 미디어 타입 : screen, print, speech...

- 조건에 대한 물음(Query문) : 미디어의 조건을 작성함

 

 

사용 방법

미디어 쿼리 구조

미디어 타입을 설정한 뒤에 화면의 크기에 따라 어떻게 변할 것인지 조건과 스타일을 작성한다

화면의 너비를 조건으로 사용하는 경우가 가장 많다

 

width : 지정한 크기에만 스타일을 적용한다 (거의 잘 사용하지 않음)

max-width : 지정한 크기 이하부터 스타일을 적용한다

min-width : 지정한 크기 이상부터 스타일을 적용한다

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

 

예시

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