(CSS) 미디어 쿼리 구문

미디어 쿼리 구문

기본형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

ex)

@media screen and (min-width: 200px) and (max-width: 360px) {
	...
}

연산자	설명
and	조건을 계속 추가할 수 있습니다
,(쉼표)	동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가
only	미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 합니다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
not	not 다음에 지저하는 미디어 유형을 제외합니다. ex) 'not tv’라고 지정하면 TV를 제외한 미디어 유형에만 적용

미디어 유형의 종류

미디어 유형	사용 가능한 미디어
all	모든 미디어 유형
print	인쇄 장치
screen	컴퓨터 스크린(스마트폰 스크린 포함)
tv	음성과 영상이 동시 출력되는 TV
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille	점자 표시 장치
handheld	패드(pad)처럼 손에 들고 다니는 장치
projection	프로젝터
tty	디스플레이 기능이 제한된 장치(픽셀(px)단위를 사용할 수 없음)
embossed	점자 프린터