[HTML5 & CSS3] 미디어 쿼리 이해하기 (미완성)

▶ 미디어 쿼리​

​

*미디어 쿼리란?

미디어 쿼리는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해 준다.

미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라진다. 이렇게 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 한다.

​

​

​

*미디어 쿼리 구문

미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해준다.

​

기본형)

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

 

연산자	설명
and	앞의 소스처럼 조건을 계속 추가할 수 있다.
,(쉼표)	동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있다면 쉼표를 이용해 추가한다.
only	미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 한다. 이 키워드를 사용하면 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다. IE에서는 미디어 쿼리를 제대로 인식하지 못하기 때문에 only 키워드를 사용하더라도 큰 의미가 없다.
not	not 다음에 지정하는 미디어 유형을 제외한다. 예를 들어 'not tv'라고 지정한다면 TV를 제외한 미디어 유형에만 적용한다.

​

​

​

*미디어 쿼리의 조건

미디어 쿼리는 특정 조건에 따라 적용할 CSS를 다르게 정의하므로 조건을 어떻게 체크할 것인지가 중요하다. 미디어 쿼리에서 사용하는 조건에는 주로 화면 크기와 관련된 것들이 많다.

실제 웹 문서의 내용이 화면에 보이는 영역을 '뷰포트'라고 하는데 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있다. 이 따 height(높이) 값은 미디어에 따라 달라지기 때문에 주의해야 한다.

예를 들어 뷰포트의 너비가 600px 이상이고 959px 이하일 때 적용할 CSS는 다음과 같이 정의한다.

@media all (min-width:600px) and (max-width:959px) { ..... }

미디어 쿼리를 이용하면 다음 예제와 같이 max-width 값(브라우저 창의 최대 너비 값)에 따라 문서의 배경 이미지가 달라지도록 미디어 쿼리 구문을 구성할 수 있다.

​