반응형 웹 - 미디어 쿼리 1

반응형 웹 - 미디어 쿼리 1

1. 미디어 쿼리란?

• 미디어 쿼리(mediaqueri)는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해줍니다. 즉 미디어 쿼리를 이용한 사이트는 다른 기기로 접속할 때마다 레이아웃이 바뀌게 됩니다.
• 브라우저 창의 너비를 조절할 때마다 화면에 표시되는 칼럼 개수가 달라지며 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 합니다.

 

2. 미디어 쿼리 구문

• 미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다.
• 미디어 쿼리 구문은 <style>과 </style>사이에 사용하며 대, 소문자를 구별하지 않습니다.
• 기본적으로 미디어 유형이 지정되어야 하고 필요할 경우, and 연산자로 조건을 적용합니다.

 

• 미디어 유형이 'screen'이면서 최소 너비가 '200px'이고 최대 너비가 '360px'일 경우에 적용할 CSS를 정의하는 구문

@media screen and (min-width:200px) and (max-width:360px) {
      ...
 }

 

• 미디어 쿼리 구문에서 사용할 수 있는 연산자

 

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

 

미디어 유형의 종류

• 미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하기 떄문에 @media 속성 다음에 미디어 유형을 알려주어야 합니다.

 

미디어 유형	사용 가능한 미디어
all	모든 미디어 유형
print	인쇄 장치
screen	컴퓨터 스크린(스마트폰 스크린 포함)
tv	음성과 영상이 동시 출력되는 TV
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille	점자 표시 장치
handheld	패드(pad_처럼 손에 들고 다니는 장치
projection	프로젝터

 

 

참고 : HTML5 + CSS3 웹 표준의 정석