[CSS] 미디어 쿼리(Media Queries)

미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와준다.

사용 방법

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

@media screen and (min-width: 200px) and (max-width: 500px) {

body {

background: purple;

}

}

미디어 쿼리 연산자

and : 위의 소스코드처럼 조건을 계속 추가할 수 있다.

,(쉼표) : 동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 사용한다.

only : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 한다.

not : not 다음에 지정하는 미디어 유형을 제외한 미디어 유형에서만 적용된다.

미디어 유형의 종류

all : 모든 미디어 유형

print : 인쇄 장치

screen : 컴퓨터, 스마트폰의 스크린

tv : 음성과 영상이 동시 출력되는 TV

aural : 음성 합성 장치(주로 화면을 읽어 소리를 출력해 주는 장치)

braille : 점자 표시 장치

handheld : 패드(pad)처럼 손에 들고 다니는 장치

projection : 프로젝터

미디어 쿼리 조건

가로, 세로 값 설정하는 속성 

width, height : 웹 페이지의 가로 너비, 세로 높이

min-width, min-height : 최소 너비, 최소 높이

max-width, max-height : 최대 너비, 최대 높이

화면 회전

orientation : portrait  단말기 세로 방향

orientation : landscapte  단말기 가로 방향

미디어 쿼리 중단점

부트스트랩 기준

아주 작은 화면 : 576px 미만

작은 화면 : 576px 이상

중간 화면 : 768px 이상

큰 화면 : 992px 이상

아주 큰 화면 : 1200px 이상