미디어쿼리 기초

​미디어 쿼리의 사용 방법 

​

​

​미디어 쿼리의 가장 기본적인 구조는 이렇습니다.

​

@media all and ( max-width:300px )​ { css 코드 }

​

​하나 하나 분석을 해드리겠습니다.

​

all부분의 문구를 mediatype (미디어 타입) 이라 함.

​

미디어 타입 아래와 같이 대표적으로 3가지 타입이 있습니다.

​

all : 모든 미디어. 따로 미디어 타입을 지정하지 않으면 all 이 기본값입니다.​

​

print : 프린트 기기.​ 인쇄기능을 추가해서 인쇄를 했는데 인쇄가 깨질시 print 속성을 이용해서 맞춰줌

​

screen : ​가장 많이 사용하는 속성값으로 컴퓨터, 모바일, 태블릿 등 현재 미디어쿼리가 실행된 모니터

​

그 외에 speech, aural, braille, embossedm handheld, projection, tty, tv 등이 있지만 거의 사용하지 않습니다.

​

​

​

​

and : 조건문의 적용 범위를 나타냄

​

이 부분에 들어가 키워드는 아래와 같이 3가지 입니다.

​

● and 연산자 : 여러 미디어 특징들을 하나로 결합함 .

● , (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.

● not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.

● only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지

​

예)

@media (min-width: 700px) and (orientation: portrait) { ... }