미디어 쿼리 정의부터 예제까지

1. 미디어 쿼리(Media Query)란? :

media의 종류에 따라 특정 css 스타일을 적용하고자 할 때 사용하는 css 스펙 가운데 하나

데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일 시트를 구분하기 위해 사용

2. 미디어쿼리의 역할

CSS에서 최초로 스크린의 종류(모니터 or 프린터 등)를 감지할 수 있게 되었고 CSS3에서 더 상세하게 변경되어 해상도, Landscape/Portrait(가로/세로)감지가 가능하게 되었다.

3. 미디어 쿼리 사용가능한 브라우저

CSS3속성이므로 최근에 출시된 브라우저들에서 지원 가능

미디어 쿼리를 지원하지 않는 브라우저는 조건과 상관없이 CSSS를 읽게 된다.

• PC용 브라우저 : MS익스플로러9+(8이하 지원X), 파이어폭스, 사파리, 크롬, 오페라 등

• 모바일용 브라우저 : iOS, Android 브라우저

4. 문법 :

@media = “[ only | not ] 미디어 타입 and (미디어 속성 : 값) {…}”

(1) 마크업에서 css파일 분기(http request를 발생시켜 성능을 저하시킴)

<link rel="stylesheet" type="text/css" media="only all and (min-width:600px)" href="test_media_query.css" />

(2) style 태그에서 media 선언(inline으로 적용해야 하기때문에 유지보수에 어려움)

<style type=”text/css” media=”screen and (max-width:480px)”>

…

</style>

(3) css 내에서 media 선언(BEST)

@media screen and (min-width: 400px) and (max-width: 700px) { … }

• only 또는 not으로 뒤의 조건을 한정함

- only : 미디어 쿼리를 지원하는 브라우저에서만 조건을 인식하도록 하는 키워드로 생략가능하며

생략 가능하며, 생략 했을 때 기본값이 only로 설정된다.

 (IE8이하버전을 제외한 모든 브라우저가 미디어 쿼리를 지원하므로 “only”를 사용하지 않아도 문제 없음)

- NOT : 해당 미디어 타입을 제외한 다른 미디어타입에 대응할 경우에 사용하는 키워드

• 미디어 타입(media type) : “all”, “screen”, “print” 등

• 미디어 속성 (media feature) : ‘min-width’ ‘320px’와 같은 해당 값의 쌍을 ‘:’으로 연결하고 괄호로 둘러싸서 조건을 표현

• 미디어 타입을 사용하지 않으면 ‘all’로 이해하고, ‘(미디어 속성 : 값)’ 조건은 ‘and’ 또는 쉼표 ','로 연결하여 동일한 스타일에 여러 조건을 적용할 수도 있다.(“and”=AND / “,”=OR)

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

• 공통, 모바일, 테블릿&데스크톱, 테블릿, 데스크톱 순으로 코드를 분리해서 작성

5. 미디어 타입

현재 HTML5/CSS3의 미디어 타입 종류는, HTML4/CSS2에서 정의된 것들을 그대로 사용하고 있다.

미디어쿼리에서 사용할 수 있는 미디어 타입은 다음과 같다.

all	모든 미디어 타입
aural	음성 합성 장치
braille	점자 표시 장치
handheld	손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
print	화면을 인쇄할 경우 출력화면의 스타일을 표현하기 위한 용도. 웹 페이지를 인쇄할 때 @media print {..} 영역에 지정한 스타일이 우선적으로 적용됨.
projection	프로젝터 표현 용도
screen	컴퓨터 스크린을 위한 용도
tty	디스플레이 능력이 한정된, 텔렉스(teletype), 터미널, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 미디어를 위한 용도
tv	음성과 영상이 동시 출력되는 tv와 같은 장치
embossed	페이지에 인쇄된 점자 표지 장치

위 타입 중 실제로 많이 사용되는 것은 'all', 'screen', 'print'이다.

handheld 타입의 경우 주의가 필요하다. 휴대용 기기라고 해서 요즘의 스마트폰 등의 모바일 기기가 연상 될 수 있는데, 실제로 아이폰이나 안드로이드에서는 screen에 대응하고 있다.

6. 조건문이 될 수 있는 특징(미디어 속성)

미디어 쿼리의 조건문에는 다른 프로그래밍 언어에서 사용하는 “>”, “<”, “=” 등의 연산자를 사용하지 않고 css에서 사용하는 “:”만을 사용한다.

대신, “max-” 또는 “min-”등의 접두사를 사용하여 최대값, 최소값을 통한 비교가 가능하다.

width/height : 뷰포트(스크롤바를 포함한)의 너비와 높이

@media all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행 @media all and (width:768px), (width:1024px) { … } // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행 @media not all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행

device-width/device-height : (단말기)스크린의 물리적인 너비와 높이

@media all and (device-width:320px) and (device-height:480px) { … } // 스크린 너비가 320px ‘그리고’ 높이가 480px 이면 실행 @media all and (min-device-width:320px) and (min-device-height:480px) { … } // 스크린 너비가 최소 320px 이상 ‘그리고’ 높이가 최소 480px 이상이면 실행

• ‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px가 된다.

orientation : 뷰포트의 너비와 높이 비율을 이용하여 세로모드인지 가로모드인지 판단

@media all and (orientation:portrait) { … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행 @media all and (orientation:landscape) { … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행

aspect-ratio : 뷰포트의 너비와 높이에 대한 비율

@media all and (aspect-ratio:5/4) { … } // 뷰포트 너비가 5, 높이가 4 비율이면 실행 @media all and (min-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이상이면 실행 @media all and (max-aspect-ratio:5/4) { … } // 뷰포트 너비가 5/4 비율 이하면 실행

device-aspect-ratio : (단말기)스크린의 너비와 높이에 대한 비율

@media all and (device-aspect-ratio:5/4) { … } // 스크린 너비가 5, 높이가 4 비율이면 실행 @media all and (min-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이상이면 실행 @media all and (max-device-aspect-ratio:5/4) { … } // 스크린 너비가 5/4 비율 이하면 실행

color : 단말기에서 사용하는 색상에 대한 비트 수(단위 = 자연수)(0 = false)

@media all and (color) { … } // 출력 장치가 컬러를 지원하면 실행 @media all and (color:0) { … } // 출력 장치가 컬러가 아니면 실행 @media all and (color:8) { … } // 출력 장치가 8비트 색상이면 실행 @media all and (min-color:8) { … } // 출력 장치가 8비트 이상 색상이면 실행 @media all and (max-color:8) { … } // 출력 장치가 8비트 이하 색상이면 실행

color-index : 단말기가 사용하는 최대 색상 수에 대응(팔레트의 색상 갯수)

(단위 = 자연수)(지원하는  브라우저 없음)(0 = false)

@media all and (color-index) { … } // 출력 장치가 색상 색인 테이블을 사용하면 실행 @media all and (color-index:0) { … } // 출력 장치가 색상 색인 테이블을 사용하지 않으면 실행 @media all and (color-index:256) { … } // 출력 장치가 256 색을 지원하면 실행 @media all and (min-color-index:256) { … } // 출력 장치가 256 이상 색을 지원하면 실행 @media all and (max-color-index:256) { … } // 출력 장치가 256 이하 색을 지원하면 실행

monochrome : 흑백 출력되는 단말기인 경우 픽셀당 비트 수(단위 = 자연수)(0 = false)

@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행 @media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행 @media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행 @media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행

resolution : 단말기의 해상력에 대응( 단위 = dpi[인치당 도트 수] / dpcm[센티미터당 도트 수] )

@media all and (resolution:96dpi) { … } // 1인치당 96개의 사각형 화소를 제공하면 실행 @media all and (min-resolution:96dpi) { … } // 1인치당 96개 이상의 화소를 제공하면 실행 @media all and (max-resolution:96dpi) { … } // 1인치당 96개 이하의 화소를 제공하면 실행

-webkit-min-device-pixel-ratio : 단말기의 화소와 실제 화면의 pixel간의 비율

@media all and (-webkit-min-device-pixel-ratio:2) { … } // 아이폰4 @media all and (-webkit-min-device-pixel-ratio:1.5) { … } // 안드로이드

7. 반응형 웹을 만들기 위한 Viewport meta tag 설정

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

• 모바일 스크린에 맞게 폭과 스케일을 설정하는 태그. iOS전용 설정으로, 안드로이드는 위 설정 없이 적절하게 렌더링 된다.

(http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167)

8. 미디어쿼리 사용시 주의점

• IE8 이하에서는 미디어쿼리가 적용되지 않는다.

• @import된 css 내부에 미디어 쿼리를 선언할 경우 적용되지 않는다.

• 미디어 쿼리는 기능상의 분기는 불가능하며, 결국 css의 추가 로딩이나 css의 수정에만 영향을 주기때문에 디자인에만 영향을 줄 수 있다. 기능 지원이 안되는 단말기의 특성을 파악하여 해당 섹션을 css의 display: none 등으로 가리는 것은 가능하지만, 근본적으로 해당 기능을 단말기에서 로딩하지 않는 등의 개발 분기는 어렵다.

• HTML5인지 확인(다른 HTML의 버전인 경우 개발에 어려움이 있음)

9. IE 6~8에서 미디어 쿼리를 사용하기 위한 스크립트

IE9 이전 버전에서는 CSS3 미디어 쿼리를 지원하지 않으므로,

IE 6~8을 비롯한 구식 브라우저에서 미디어쿼리가 작동하길 원한다면 Respond.js나 css3-mediaquries.js 등의 하위 호환용 자바스크립트를 이용한다.

• https://github.com/scottjehl/Respond

• https://code.google.com/p/css3-mediaqueries-js/

*두 라이브러리 비교 -> http://gionaf.com/playgroud/mq-fallback/results.html

하위 호환용 자바스크립트 사용시 단점 :

Respond.js는 페이지가 로딩되기 전에 먼저 사용자가 작성한 css를 전부 분석하여 사용된 미

디어쿼리 구문을 골라내서 IE가 해석할 수 있는 방식의 css로 변환시켜 주는 역할을 함으로서 미디어쿼리의 동작을 대신 수행한다.

하지만 이러한 라이브러리들은 대개 빠른 처리를 하지 못하고 속도 저하의 주범이 되기 때문에 실제 서비스에 적용을 하는데 걸림돌이 되는 경우가 많다.

10. 미디어쿼리 예제

• http://mediaqueri.es/

11. 테스트 예제

• http://jsfiddle.net/haeru/LLT67/