CSS3 미디어 쿼리 (media queries)
역사
간단한 형태의 미디어 쿼리는 CSS2에서 부터 사용되었습니다.
- 예제1:
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
- 예제2:
@media screen { * { font-family: sans-serif } }
즉, ‘screen’이나 ‘print’ 처럼 ‘미디어 타입 (media types)’ 에 따라서 특화된 스타일을 사용할 수 있었습니다. 그밖에 제안되었던 타입들로 ‘all’, ‘aural’ (HTML4), ‘braille’, ‘embossed’ (CSS2), ‘speech’ (CSS2), ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ 등이 있었습니다. 특히 ‘handheld’ 타입은, 현재의 반응형 웹의 징조를 보여주었다고 생각됩니다.
문법
| [ only | not ]? 미디어 타입 and (미디어 속성 : 값) |
|---|
- 우선 ‘only’와 ‘not’으로 뒤 조건을 한정할 수 있고
- ‘all’, ‘screen’ 등의 미디어 타입 (media type) 과
- ‘min-width’ 와 같은 미디어 속성 (media feature)과 ‘320px’와 같은 해당 값의 쌍을 ‘:’으로 연결하고 괄호로 둘러싸서
조건을 표현합니다. 그리고 미디어 타입을 사용하지 않으면 ‘all’로 이해하고, ‘(미디어 속성 : 값)’ 조건은 ‘and’로 계속 추가할 수 있습니다. 이렇게 표현된 조건을 쉼표 ','로 연결하여 동일한 스타일에 여러 조건을 적용할 수도 있습니다.
- 조건부 CSS화일
<link rel="stylesheet" media="print and (min-width: 25cm)" href="print.css" />
- CSS 내의 조건
@media screen and (min-width: 400px) and (max-width: 700px) { … }
미디어 타입
현재 HTML5/CSS3의 미디어 타입 종류는, HTML4/CSS2에서 정의된 것들을 그대로 사용하고 있습니다. 하지만, 대부분 ‘all’, ‘screen’, ‘print’ 정도가 주로 사용되고 있습니다.
미디어 속성
일부 미디어 속성들은 min- 이나 max- 등이 머리말이 붙을 수 있습니다.
width
- viewport의 (스크롤바를 포함한) 가로 길이입니다. 즉 가로 해상도입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
height
- viewport의 (스크롤바를 포함한) 세로 길이입니다. 즉 세로 해상도입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
device-width
- 실제 기기 스크린의 가로 길이입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
device-height
- 실제 기기 스크린의 세로 길이입니다.
- 값: 길이 (px, em, ...)
- min, max 머리말 사용가능
‘width’와 ‘device-width’의 차이는, iPhone4 (레티나)처럼 기기 스크린은 320x480이지만 해상도는 640x960 인 경우, ‘device-width’ 는 320px이고, ‘width’는 640px 입니다.
orientation
- 지면을 향한 기기의 방향입니다. (세로보기, 가로보기)
- 값: ‘portrait’ 또는 ‘landscape’
aspect-ratio
- 기기의 width와 height의 비율입니다.
- 값: ratio (예: 16/9)
- min, max 머리말 사용가능
device-aspect-ratio
- 기기의 device-width와 device-height의 비율입니다.
- 값: ratio (예: 16/9)
- min, max 머리말 사용가능
color / color-index / monochrome
- 기기가 표현할 수 있는 색에 관련된 정보입니다.
- 값: 정수
- min, max 머리말 사용가능
resolution
- 기기의 픽셀 덴시티 정보입니다.
- 값: 해상도 dpi 또는 dpcm
- min, max 머리말 사용가능
그밖에 TV 에서 사용될 있는 ‘scan’과 특정 출력에 적용되는 ‘grid’ 등이 있습니다.
예제
별도의 CSS 화일 이용
<link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>
여러 모바일 기기들의 고려한 미디어 쿼리 템플릿
/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
모바일 퍼스트 미디어 쿼리 템플릿
/* 모바일 (가로 480px 미만) 용 스타일 */ @media only screen and (min-width: 480px) { /* 480px 이상 */ } @media only screen and (min-width: 600px) { /* 600px 이상 */ } @media only screen and (min-width: 768px) { /* 768px 이상 */ } @media only screen and (min-width: 992px) { /* 992px 이상 */ } @media only screen and (min-width: 1382px) { /* 1382px 이상 */ } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { /* iPhone4+ 레티나 디스플레이 */ }
즉, 기기별로 별도로 모든 스타일을 지정해야 하는 기기별 템플릿과는 달리, 위의 모바일 퍼스트 템플릿의 경우는 작은 스크린의 스타일이 그 위 크기의 스크린에 기본적으로 적용됩니다.
출처 - http://study.gnuboard.org/wiki/read/StudyGroup/RWD/CSS3-media-query
CSS3 media query에 대하여
FE Development |
미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이며 CSS 2.1 부터 추가되었습니다. 하지만 실제로 많이 사용되지 않았는데, 미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점이 있었기 때문입니다.
CSS3에는 미디어 타입을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리(media query)라고 합니다.
적용방법
미디어 쿼리를 적용하는 방법은 크게 3가지가 있습니다.
(1) 마크업에서 CSS파일 분기하기
스타일시트 파일을 분리하여 특정 조건에 부합할 경우 CSS파일을 로딩할 수 있습니다. 로딩하는 방법은 <link>태그, @import 속성, xml 방식을 사용할 수 있습니다.
<?xml-stylesheet media="screen and (max-width:480px)" rel="stylesheet" href="example.css" ?>
<style type="text/css">
@import url(example.css) screen and (max-width:480px);
</style>
(2) <style> 태그에서 media 선언하기
<style>태그를 선언할 때 media 속성에 조건을 선언해서 이 조건에 부합할때 해당 <style>태그 내의 css를 로딩할 수 있습니다.
.h2{color:#00ffff}
</style>
(3) CSS 내에서 @media 사용하기
@media 구문을 이용해서 css 내에 선택적으로 사용할 수 있습니다.
@media all and (max-width:480px) { .h2{color:#ff0000} }
위 방법 중, 별도 분기파일을 사용하는 방법은 http request를 발생시켜 성능을 저하시키는 단점이 있고, <style>태그를 사용하는 방법도 html 파일에서 inline으로 적용해야 하기 때문에 유지보수의 어려움이 증가합니다.
따라서 CSS 내에서 @media를 사용하여 필요한 부분에 적용하는 것이 가장 좋은 방법이라고 할 수 있습니다.
문법
미디어 쿼리는 문장 내에 대소문자를 구분하지 않습니다. media 속성에는 다음과 같은 문법을 사용할 수 있습니다.
media_query
: [ONLY | NOT]? S* media_type S* [ AND S* expression ]* | expression [ AND S* expression ]
조금 어려운 문장으로 되어 있는데요, 쉽게 풀면 다음과 같이 정리할 수 있습니다.
[ONLY 또는 NOT] 미디어타입 [and (조건)] [and (조건)] ... , [ONLY 또는 NOT] 미디어타입 [and (조건)] [and (조건)] ..
기본적으로 미디어 타입이 지정되어야 하며, 필요할 경우에 AND 연산자로 조건을 적용하면 되며 이 조건은 필요에 따라 추가가 가능합니다. 또한 쉼표를 사용하면 새로운 미디어타입과 조건도 추가할 수 있습니다.
- ONLY 키워드는 미디어쿼리를 지원하는 웹브라우저에서만 조건을 인식하도록 하는 키워드입니다. 미디어쿼리를 지원하지 않는 웹브라우저의 경우 ONLY 키워드가 있으면 미디어 쿼리가 무시되어 실행되지 않아야합니다.
하지만, 현재 IE 이외에는 미디어쿼리를 지원하지 않는 웹브라우저(모바일 포함)가 드물고, IE도 media query 를 정확하게 해석하지 못해서 ONLY 키워드의 유무에 상관 없이 media query를 실행하지 못하고 있습니다. 따라서 현재는 ONLY 키워드가 큰 의미는 없지만, 미디어쿼리를 지원하는 브라우저만 대상으로 할 경우엔 ONLY 키워드를 적는 것이 좋습니다.
(참고자료 : http://blog.wystan.net/2011/06/27/only-keyword-for-css3-media-query)
- NOT 연산자는 해당 미디어타입만 제외한 다른 미디어타입에 대응할 경우에 사용합니다.
예) screen and (max-device-height:480px), print and (min-resolution:120dpi) and (max-resolution:300dpi)
한가지 주의할 점은 조건을 사용할 때 각 미디어타입에 맞는 조건을 사용해야 합니다. 가령 미디어 타입이 aural(음성합성장치) 인 경우 조건에 max-width:800px 와 같은 화면 넓이에 관한 조건은 음성 장치와 관련이 없어 사용할 수 없습니다. 물론 실제로 사용한다 해도 항상 부적합한 조건이기 때문에 내부의 CSS는 적용되지 않습니다.
미디어타입
미디어쿼리에서 사용할 수 있는 미디어 타입은 다음과 같습니다.
all | 모든 미디어 타입 |
aural | 음성 합성 장치 |
braille | 점자 표시 장치 |
handheld | 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도 |
인쇄 용도 | |
projection | 프로젝터 표현 용도 |
screen | 컴퓨터 스크린을 위한 용도 |
tty | 디스플레이 능력이 한정된, 텔렉스(teletype), 터미날, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도 “tty” 메디아 타입에서 제작자는 픽셀(pixel) 단위를 사용하여서는 안됨 |
tv | 음성과 영상이 동시 출력되는 TV와 같은 장치 |
embossed | 페이지에 인쇄된 점자 표지 장치 |
위 타입 중 실제로 많이 사용되는 것은 all, screen, print 입니다. all은 모든 미디어타입에 대응하고, screen은 대부분의 컴퓨터와 모바일 폰에서 사용하는 웹브라우저에 대응하며, print는 프린터에 대응합니다.
handheld의 경우 주의가 필요합니다. 휴대용 기기라고 해서 요즘의 스마트폰 등의 모바일 기기가 연상될 수 있는데, 실제로 아이폰이나 안드로이드에서는 screen에 대응하고 있습니다.
조건문
미디어 쿼리의 조건에는 다른 프로그래밍에서 사용하는 "=" ">" "<" 등의 연산자를 사용하지 않고 CSS에서 사용하는 ":"(콜론) 만을 사용합니다. 대신에 "max-" 또는 "min-" 등의 prefix 를 사용하여 최대값, 최소값을 통한 비교가 가능합니다.
예를 들면 device-width(단말기에서 지원하는 물리적인 가로 너비)는 다음과 같이 사용할 수 있습니다.
device-width:320px | 기기의 가로 너비가 320px 일때 |
max-device-width:320px | 기기의 최대 가로 너비가 320px 일때 (즉 320px 이하) |
min-device-width:320px | 기기의 최소 가로 너비가 320px 일때 (즉 320px 이상) |
위와 같은 min, max 로 표현이 불가능하고 특정값만 가지고 있는 경우도 있습니다. 예를 들면 화면의 비율에 대응하는 "orientation"의 경우 portrait | landscape 두개의 값만 가지며, TV스캔 방식에 대응하는 "scan"은 [ progressive | interlace ] 값만 지정할 수 있습니다.
미디어쿼리에서 사용하는 조건은 다음과 같습니다.
(1) width, min-width, max-width (가로 너비)
웹페이지의 가로 너비, width로 판단합니다.
(2) height, min-height, max-height (세로 높이)
웹페이지의 세로 너비, height로 판단합니다.
height 는 미디어를 모두 포함한 높이를 기준으로 하기 때문에 미디어에 따라 다른 height가 검출됩니다. screen 같은 페이지 개념이 없는 미디어는 스크롤을 포함한 전체 문서의 높이를 기준으로 하며, print 미디어는 한 페이지의 높이를 기준으로 하기 때문에 의도와 다른 값이 나올 수 있으므로 사용에 주의해야 합니다.
(3) device-width, min-device-width, max-device-width (단말기의 물리적인 가로 너비)
단말기에서 기본적으로 제공하는 물리적인 가로 너비(단말기의 native width)를 판단합니다.
아이폰4나 안드로이드 단말기의 대부분이 실제 단말기의 해상도와 웹브라우저가 사용하는 기본 너비가 다릅니다.
아이폰 4의 실제 해상도는 640*960 이지만, 실제 브라우저에서 사용하는 너비는 320*480(2배 비율)이며, 안드로이드폰도 대부분 480*800 해상도를 사용하지만, 브라우저 너비는 320*533(1.5배 비율)입니다.
(4) device-height, min-device-height, max-device-height (단말기의 물리적인 세로 높이)
단말기에서 기본적으로 제공하는 물리적인 세로 너비(단말기의 native height)를 판단합니다.
(5) orientation (화면 회전)
max, min prefix를 사용하지 않으며, portrait, landscape 값을 지정할 수 있습니다.
width, height를 구하여, width가 길면 landscape, height가 길면 portrait 입니다. 대부분의 모바일 단말기의 경우 세로가 긴 형태이기 때문에 기본 상태는 portrait, 가로로 돌렸을 경우 landscape에 대응합니다.
주의할 점은 데스크톱은 대부분 가로/세로 모드에 대한 개념이 없기 때문에 orientation 속성이 모바일 전용으로 오해받는 경우도 있지만, 실제로는 모바일과 데스크톱의 구분을 할 수 없다는 점입니다.
(6) aspect-ratio, min-aspect-ratio, max-aspect-ratio (화면 비율)
width/height 비율에 대응합니다. 즉, width를 height로 나눈 값입니다.
직접 숫자로 사용할 수도 있고, 계산식을 사용할수도 있습니다.
aspect-ratio:1 | 화면 비율이 1:1 인 경우에 대응하며 예를 들면 320*320, 640*640 등이 대응합니다. |
aspect-ratio:16/9 | 계산식으로 사용하였으며 HDTV에 일반적인 화면 비율인 16:9 인 경우에 대응합니다. (예: 1920*1080) |
(7) device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio (단말기의 물리적인 화면 비율)
단말기의 물리적인 화면 비율에 대응합니다.
(8) color, min-color, max-color (색상당 비트수)
단말기에서 사용하는 최대 색상 수의 비트 수에 대응합니다. 단위는 자연수입니다.
color:1 | 2^1 = 2개 색상 사용 |
color:2 | 2^2 = 4개 색상 사용 |
color:3 | 2^3 = 8개 색상 사용 |
color:4 | 2^4 = 16개 색상 사용 |
(9) color-index, min-color-index, max-color-index (팔레트의 색상 갯수)
단말기에서 사용하는 최대 색상 수에 대응합니다. 단위는 자연수입니다.
(10) monochrome, min-monochrome, max-monochrome (흑백만을 사용하는 단말기에서 픽셀 당 비트 수)
흑백 컬러만을 사용하는 단말기에서 하나의 픽셀에 사용할 수 있는 비트 수에 대응합니다. 단위는 자연수입니다.
이 비트수의 의미는 흰색과 검은색의 사이에 얼마나 많은 단계를 지원하는지를 의미합니다. 즉 흑백 그라데이션(계조)이 얼마나 자연스럽게 표현되는지를 확인합니다.
monochrome:1 | 2^1 = 흰색과 검은색 사이에 2개의 단계 (즉 검은색과 흰색만 존재) |
monochrome:2 | 2^2 = 흰색과 검은색 사이에 4개의 단계 |
monochrome:3 | 2^3 = 흰색과 검은색 사이에 8개의 단계 |
monochrome:4 | 2^4 = 흰색과 검은색 사이에 16개의 단계 |
(11) resolution, min-resolution, max-resolution (단말기의 해상도)
단말기에서 지원하는 해상도를 판단합니다. width, height와는 다른 값이며 대부분의 단위는 dpi(인치당 도트 수)를 사용합니다. dpcm(센티미터당 도트수)도 사용할 수 있습니다. 예를 들면 PC화면의 경우 대부분 96dpi를 사용하지만, 프린터의 경우 300dpi를 넘는 값을 사용할 수 있으며 dpi가 높아질수록 같은 크기에 더 세밀한 화면을 볼 수 있습니다.
같은 3.5인치 화면이면서 해상도가 다른 아이폰 3GS/아이폰 4를 연상하면 쉽게 이해할 수 있습니다.
(12) scan (스캔 방식)
tv 미디어 타입에만 대응하는 속성입니다. TV에서 스캔 방식에 따라 값을 지정할 수 있습니다.
프로그레시브 방식은 "progressive, 인터레이스 방식은 "interlace" 로 지정할 수 있습니다.
(13) grid (화면의 최소단위)
단 말기가 grid 방식인지, 또는 bitmap 방식인지에 대해 대응합니다. grid방식이란 화면 내의 최소 단위가 픽셀이 아닌 문자 하나인 경우를 말합니다. 예를 들면 터미널(tty) 등에서 사용하는 텍스트만 사용하는 통신 또는 구형 전화의 액정에서 사용하는 문자 단위로만 표시되는 단말기가 여기에 속합니다. 여기에 속할 경우 "1" 값에 대응하며 그 외의 비트맵 기반의 단말기의 경우 모두 "0"에 대응합니다.
grid:1 | 문자로만 표기되는 tty, 터미널, 전화 액정화면 |
grid:0 | 비트맵을 기반으로 하는 그래픽 표시 장치. 대부분의 컴퓨터와 스마트폰 웹브라우저에 해당됩니다. |
(14) -webkit-min-device-pixel-ratio (단말기의 화소와 실제 화면의 pixel간의 비율)
웹킷 전용 속성이며 화면 내의 1px를 표현할 때의 실제 단말기의 픽셀의 비율에 대응합니다.
아이폰 4에 대응할 때 사용할 수 있는데, 아이폰4의 경우 실제 해상도는 640*960이지만 웹브라우저 해상도는 320*480 에 대응합니다. 따라서 아이폰4의 사파리의 경우엔 1px에 실제로는 단말기의 2화소가 대응하고 있으므로 이 값은 2입니다.
비슷하게 안드로이드 폰의 경우 실제 해상도 480*800 단말기에서 웹브라우저 해상도는 320*533으로 표현되는데, 이때의 비율은 1.5입니다.
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css">
<!-- 안드로이드 -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5)" type="text/css" href="android.css">
FAQ
(1) 모바일 기기와 데스크톱을 CSS 미디어쿼리로 클라이언트 단에서 구별할 수 있는 방법은 현재 없습니다. 현재는 UA값으로 분기할 수 밖에 없습니다.
orientation(가로/세로 전환)의 경우 모바일 전용 속성이 아니며, 가로 길이와 세로 길이에 따라 나오는 값이기 때문에 실제 PC 에서도 웹브라우저의 세로가 길면 세로모드 (portrait), 가로가 길면 가로모드(landscape)로 인식합니다.
(2) 구형 모바일 브라우저인 폴라리스에서는 @media 구문을 무시하고 내부에 있는 CSS까지 그대로 적용되는 문제가 있습니다. 폴라리스의 경우 해당 구분이 폴라리스가 아닌 다른 브라우저를 위한 스타일이라고 해도 미디어쿼리를 사용하면 안되며 별도 파일로 분기해야 합니다.
(3) 미디어 쿼리를 사용하면 단말기의 특성에 따라 필요한 CSS를 적용시키거나 무시할 수 있습니다. 이 기능은 서버(Back-end) 단의 부담을 주지 않고, 클라이언트의 렌더링(Frong-end)에 영향을 줄 수 있지만, 적용되는 CSS구문이 추가되는 정도이며 유의미할 정도의 큰 부담이 아닙니다. 즉, 미디어 쿼리를 사용해도 전체적인 퍼포먼스에는 별 영향이 없습니다.
(4) 미디어 쿼리를 통해 여러 해상도에서 최적의 디자인을 보여주는 것이 가능합니다. 위 예제 사이트에서도 확인할 수 있지만, HTML 문서의 구조화가 잘되어있으면 같은 내용을 포함하면서 해상도에 따라 각각의 최적화된 화면을 보여줄 수 있습니다.
각 해상도 별로 디자인을 별도로 한 HTML문서를 만들 필요 없이 하나의 문서만으로도 모든 해상도에 대응할 수 있고, PC처럼 해상도를 변경할 수 있는 웹브라우저에서는 창 크기에 따라 동적으로 대응하는 것도 가능합니다.
(5) 하지만, 미디어 쿼리는 기능 상의 분기는 불가능합니다. 미디어 쿼리는 결국 CSS의 추가 로딩/CSS의 수정에만 영향을 주기 때문에 디자인에만 영향을 줄 수 있습니다. 기능 지원이 안되는 단말기의 특성을 파악하여 해당 섹션을 CSS의 display:none 등으로 가리는 것은 가능하지만, 근본적으로 해당 기능을 단말기에서 로딩하지 않는 등의 개발 분기는 어렵습니다.
관련자료 및 예시 사이트
http://www.w3.org/TR/css3-mediaqueries/ : 실제 CSS3의 표준을 제정하고 있는 w3에서 제공하는 미디어쿼리 매뉴얼입니다.
http://webdesignerwall.com/tutorials/css3-media-queries : 활용 예제와 예시 사이트
http://hicksdesign.co.uk : 브라우저 사이즈를 줄여보면 레이아웃이 변경됩니다.
http://colly.com : width에 따라 한줄에 나오는 리스트 수가 달라집니다.
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html : width에 따라 레이아웃이 변경됩니다.
http://html.nhndesign.com : 웹표준화팀의 홈페이지입니다. 역시 width에 따라 컨텐츠의 배치가 달라지며, 모바일에서도 내용이 쉽게 파악되도록 레이아웃이 바뀝니다. :)
출처 - http://nuli.navercorp.com/blog/42284
CSS3 미디어쿼리 이해
출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를 갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도에 따라 CSS 코드를 분기한다.
CSS 코드 내부에서 분기하는 방법
CSS 코드 내부에서 사용하는 미디어 쿼리의 기본적인 문법 예는 다음과 같다. 일반적으로 권장하고 널리 쓰이는 방식이다.
@media only all and (조건문) {실행문}
- @media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
- only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
- all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
- and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 ‘,’ 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다. OR 조건을 위한 콤마 ‘,’ 기호 사용시 유의점.
- (조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 ‘and’ 키워드 또는 콤마 ‘,’ 기호로 연결해야 한다.
- {실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.
CSS 코드 외부에서 분기하는 방법
조건문에 따라 별도의 외부 CSS 파일을 참조하여 분기하는 방법은 다음과 같다. 이 방식은 성능 최적화 측면에서 권장하지 않는다.
<link rel=”stylesheet” type=”text/css” media=”all and (조건A)” href=”A.css”>
<link rel=”stylesheet” type=”text/css” media=”all and (조건B)” href=”B.css”>
데스크탑 브라우저 사용자가 언제든 조건을 변경(예를 들면 창 크기를 조절해서 해상도를 바꿈)할 수 있기 때문에 웹 브라우저는 조건에 관계 없이 A.css 파일과 B.css 파일을 항상 요청한다. HTTP 요청을 불필요하게 두 번 발생시켜 이 페이지를 처음 로딩하는 사용자에게는 성능 저하의 원인이 된다. CSS 파일은 하나로 병합하고 CSS 코드 내부에서 조건 분기하는 방식을 권장한다.
미디어 쿼리 코드 템플릿
아래 코드는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류 했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 커버할 수 있다.
@charset “utf-8″;
/* All Device */
모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨./* Mobile Device */
768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다./* Tablet & Desktop Device */
@media all and (min-width:768px) {
사용자 해상도가 768px 이상일 때 이 코드가 실행됨. 테블릿과 데스크톱의 공통 코드를 작성한다.
}/* Tablet Device */
@media all and (min-width:768px) and (max-width:1024px) {
사용자 해상도가 768px 이상이고 1024px 이하일 때 이 코드가 실행됨. 아이패드 또는 비교적 작은 해상도의 랩탑이나 데스크톱에 대응하는 코드를 작성한다.
}/* Desktop Device */
@media all and (min-width:1025px) {
사용자 해상도가 1025px 이상일 때 이 코드가 실행됨. 1025px 이상의 랩탑 또는 데스크톱에 대응하는 코드를 작성한다.
}
조건문이 될 수 있는 특징들
width / height
뷰포트의 너비와 높이. 뷰포트의 크기는 HTML body 콘텐츠를 표시하는 영역으로 실제 스크린의 크기와는 다르다. 반응형 웹 구현시 가장 일반적으로 사용하는 조건이 된다.
- Value: <length>
- Applies to: visual and tactile media types
- Accepts min/max prefixes: yes
Example:
@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
스크린의 너비와 높이. 스크린은 출력 장치가 픽셀을 표시할 수 있는 모든 영역으로 일반적으로 HTML body 콘텐츠를 표시하는 뷰포트 보다 크다.
- Value: <length>
- Applies to: visual and tactile media types
- Accepts min/max prefixes: yes
Example:
@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 이상이면 실행
orientation
뷰포트의 너비와 높이 비율을 이용하여 세로 모드인지 가로 모드인지를 판단한다.
- Value: portrait | landscape
- Applies to: bitmap media types
- Accepts min/max prefixes: no
Example:
@media all and (orientation:portrait) { … } // 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행
@media all and (orientation:landscape) { … } // 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행
aspect-ratio
뷰포트의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/최대 비율을 정할 수 있다.
- Value: <ratio>
- Applies to: bitmat media types
- Accepts min/max prefixes: yes
Example:
@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
스크린의 너비와 높이에 대한 비율. ‘너비/높이’ 순으로 조건을 작성한다. min/max 접두사를 사용하면 너비 값의 최소/대최 비율을 정할 수 있다.
- Value: <ratio>
- Applies to: bitmap media types
- Accepts min/max prefixes: yes
Example:
@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′의 값에 대응한다.
- Value: <integer>
- Applies to: visual media types
- Accepts min/max prefixes: yes
Example:
@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′의 값에 대응한다. 현재 제대로 지원하는 브라우저가 없다.
- Value: <integer>
- Applies to: visual media types
- Accepts min/max prefixes: yes
Example:
@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′의 값에 대응한다.
- Value: <integer>
- Applies to: visual media types
- Accepts min/max prefixes: yes
Example:
@media all and (monochrome) { … } // 출력 장치가 흑백이면 실행
@media all and (monochrome:0) { … } // 출력 장치가 흑백이 아니면 실행
@media all and (min-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이상이면 실행
@media all and (max-monochrome:2) { … } // 출력 장치가 흑백이고 2비트 이하이면 실행
resolution
출력 장치의 해상력에 대응한다. min/max 접두사는 사각형 아닌 픽셀(인쇄 장치)에도 대응하지만 접두사 없는 resolution 조건은 사각형 픽셀에만 대응한다. 조건의 값으로 dpi와 dpcm 단위를 사용할 수 있다.
- Value: <resolution>
- Applies to: bitmap media types
- Accepts min/max prefixes: yes
Example:
@media all and (resolution:96dpi) { … } // 1인치당 96개의 사각형 화소를 제공하면 실행
@media all and (min-resolution:96dpi) { … } // 1인치당 96개 이상의 화소를 제공하면 실행
@media all and (max-resolution:96dpi) { … } // 1인치당 96개 이하의 화소를 제공하면 실행
scan
TV의 스캔 방식에 따라 대응한다. progressive 값은 초당 60회 수준의 고화질 스캔에 대응하고 interlace 값은 초당 30회 수준의 일반 스캔에 대응한다. 대부분의 HDTV는 progressive와 interlace 방식을 모두 지원하고 있다.
- Value: progressive | interlace
- Applies to: “tv” media types
- Accepts min/max prefixes: no
Example:
@media tv and (scan:progressive) { … } // 초당 60회 수준의 고화질 스캔 방식 TV에 대응한다
@media tv and (scan:interlace) { … } // 초당 30회 수준의 일반 스캔 방식 TV에 대응한다
grid
출력 장치가 그리드 방식이면 대응한다. 그리드 방식은 타자기와 같이 고정된 글꼴만 사용하는 장치이다. 통상 출력 장치는 비트맵이 아니면 그리드 방식이다. 값은 정수 ’0′과 ’1′ 뿐이고 ’0′의 값은 비트맵 방식에 대응한다.
- Value: <integer> 0 | 1
- Applies to: visual and tactile media types
- Accepts min/max prefixes: no
Example:
@media all and (grid) { … } // 출력 장치가 그리드 방식이면 실행
@media all and (grid:0) { … } // 출력 장치가 그리드 방식이 아니면 실행
@media all and (grid:1) { … } // 출력 장치가 그리드 방식이면 실행
2012년 5월 30일, 11:15 | 정찬명
출처 - http://naradesign.net/wp/2012/05/30/1823/
'Development > CSS' 카테고리의 다른 글
| css - placeholder color (0) | 2014.04.27 |
|---|---|
| css3 - transition (1) | 2014.04.27 |
| css - 넓이(width)와 높이(height) 자동 조정하기 (0) | 2013.10.29 |
| css - 글자 자동 줄바꿈 word-break white-space (0) | 2013.10.12 |
| CSS - 개발 생산성을 높이는 도구들 (0) | 2013.09.16 |
