[CSS] 미디어 쿼리

웹을 만들다보면
PC 모니터의 크기도 모자라서 모바일까지 가세해 요즘 웹화면을 보는 방식이 매우 다양해졌다.
따라서 이런 다양해진 화면 크기에 따라 유동적으로 웹화면이 변화되도록 하기 위해서
CSS에 '미디어 쿼리'라는 방법을 쓴다고 한다.

우선 미디어 쿼리는 크롬, 파이어폭스, 오페라, 사파리, 익스플로러에서 모두 지원해주니
화면별로 크기를 맞췄건만 브라우저별로 안되는 CSS 스타일이 있을까봐 걱정할필요는 없다느거 ㅎㅎㅎ
단, IE 9 버전 부터 지원된다는점...!

1. 미디어 쿼리 사용법

@media mediaType and|not|only (조건문) { css... }

위처럼 사용 된다.

1) media type : media type 에 들어가는 옵션은 다음과 같다
- all : 기본값. (media type을 생략하면 all이 기본값으로 적용된다) 모든 미디어에 적용
- print : 프린터에 사용
- screen : 컴퓨터 화면, 테블릿, 스마트 폰 등에 사용
- speech : 화면을 읽어주는 화면 리더기
- 이밖에 aural, braille, embossed... 이 있다

2) and, not, only
- and : 지정된 조건을 모두 만족
- not : 부정. 조건문을 제외한 나머지가 나옴
- only : 지정한 미디어쿼리를 지원하는 조건에만 적용


참고 사이트 :
http://blog.naver.com/todoskr/220206713429
http://blog.naver.com/todoskr/220223684875