[CSS3] @media 쿼리

Front-End/HTML5 + CSS

[CSS3] @media 쿼리

리딩리드 2016. 12. 18. 14:21

@media 쿼리

1. 정의

- CSS3 부터 @media 쿼리 사용

- @media 타입 다음으로 나옴

- @media 타입보다 더 세세한 조작이 가능하다

2. 사용방법

1) <head>의 사용

2) CSS 내부의 사용

@media screen and(min-width:960px) and (min-width:600px), screen and(min-width:400px), print{ } //or @media screen and(min-width:960px){ ... } @media screen and(max-width:959px){ ... } @media screen and(color){ ... } @media screen and(monochrome){ ... }

3. @media 쿼리 문법

1) 미디어 타입

2) 논리 연산자

- and : 전체 미디어 쿼리에 해당하는 경우에만 스타일 적용

@media screen and (min-width:960px){ ... }

- 일반 화면에서 900픽셀 이상의 해상도를 가지는 경우에 적용

- comma : 여러 미디어 쿼리를 결합합니다. 여러개 중 하나에 해당하는 경우

@media (min-width:700px), handheld and (orientation:landscape){ ... }

- 화면 폭이 700픽셀 이상이거나 손으로 들 수 있는 작은 장치에서 가로로 볼 때

- not : 전체 미디어 쿼리에 해당 안됨(조건에 해당x)

@media not screen and (min-width:960px){ ... }

- 일반화면 900픽셀 이상의 해상도를 가지는 경우에는 적용 x

- only : 미디어 타입과 미디어 쿼리를 지원하지 않는 이전의 웹 브라우저에서 사용

@media only screen and (color){ ... }

- 컬러를 지원하는 화면에만 적용하고 싶다면