미디어쿼리

미디어 쿼리

 

미디어 타입(Media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능으로 CSS 2.1부터 추가되었다. 

미디어 타입만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점 때문에 실제로 많이 사용되지 않았다.

 

CSS3에서는 미디어 타입을 개선하여 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데

이를 미디어 쿼리 (Media query)라고 한다.

 

적용 방법

1. 마크업에서 CSS파일 분기하기

스타일시트 파일을 분리하여 특정 조건에 부합할 경우 CSS파일을 로딩할 수 있다.

 

로딩 방법

 

(1) <link>태그

<link rel="stylesheet" media="screen and (max-width:480px)" href="example.css">

 

(2) xml 방식

<?xml-stylesheet media="screen and (max-width:480px)" rel="stylesheet" href="example.css" ?>

 

(3) @import속성

별도 분기 파일을 사용하는 방법은 http request를 발생시켜 성능을 저하시키는 단점

<style type="text/css">
     @import url(example.css) screen and (max-width:480px);
</style>

 

 

2. <style> 태그에서 media 선언하기

<style> 태그를 선언할 때 media 속성에 조건을 선언해서 이 조건에 부합할때 해당 <style>태그 내의 css를 로딩

html 파일에서 inline으로 적용해야 하기 때문에 유지보수의 어려움

<style type="text/css" media="screen and (max-width:480px)">
     .h2 {color:#181818}
</style>

 

3. CSS 내에서 @media 사용하기

@media 구문을 이용해서 css 내에 선택적으로 사용할 수 있다.

.h2 {color:#282828}

@media all and (max-width:480px) {
     .h2 {color:red}
}

 

문법

미디어쿼리는 문장 내에 대소문자를 구분하지 않는다.

 

media_query

[ONLY 또는 NOT] 미디어타입 [and (조건)] [and (조건)] ... , [ONLY 또는 NOT] 미디어타입 [and (조건)] [and (조건)] ..

 

기본적으로 미디어 타입이 지정되어야 하며, 필요한 경우에 AND 연산자로 조건을 적용하면 된다. 

이 조건은 필요에 따라 추가 가능.

또한 쉼표를 사용하면 새로운 미디어타입과 조건도 추가할 수 있다.

 

- ONLY 키워드는 미디어쿼리를 지원하는 웹브라우저에서만 조건을 인식하도록 하는 키워드.

미디어쿼리를 지원하지 않는 웹사이트에서는 무시되어 실행되지 않는다.

IE 이외에는 미디어쿼리를 지원하지 않는 브라우저가 드물고, IE도 media query를 정확하게 해석하지 못해서

ONLY 키워드 유무와 상관없이 실행하지 못하고 있어 onLY 키워드는 큰 의미는 없지만 지원 브라우저만 대상으로 할 경우엔 적는 것이 좋다.

 

- NOT 연산자는 해당 미디어 타입만 제외한 다른 미디어타입에 대응할 경우 사용

screen and (max-device-height:480px), print and (min-resolution:120dpi) and (max-resolution:300dpi)

 

주의할 점은 조건을 사용할 때 각 미디어타입에 맞는 조건을 사용해야 한다.

가령 미디어 타입이 aural (음성합성장치)인 경우 조건에 max-width:800px 와 같은 넓이에 관한 조건은 

음성장치와 관련이 없어 사용할 수 없다. 적용되지도 않는다.

 

 

미디어 타입

all : 모든 미디어 타입

aural : 음성 합성 장치

braille : 점자 표시 장치

handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도 (핸드폰X)

print : 인쇄용도

projection : 프로젝터 표현 용도

screen : 컴퓨터 스크린을 위한 (+스마트 폰)

tty : 디스플레이 능력이 한정된 텔렉스, 터미널, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도 ttp 메디아 타입에서는 pixel 단위를 사용해서는 안된다.

tv : 음성과 영상이 동시 출력되는 TV와 같은 장치

embossed : 페이지에 인쇄된 점자 표시 장치

 

 

속성

width	화면의 너비
height	화면의 높이
device-width	단말기의 너비
device-height	단말기의 높이
orientation	화면의 가로/세로 모드
aspect-ratio	화면 비율
device-aspect-ratio	단말기 화면 비율
color	색상 비트 수
color-index	색상 테이블 엔트리 수
monochrome	모토크롬 프레임 버퍼의 픽셀당 비트 수
resolution	화면 해상도
scan	TV의 스캔 방식
grid	그리드/비트맵 방식 여부