얼마전에 One Web 에 대해서 잠깐 언급한적이 있었는데.. One Web 을 구현하기 위해 꼭 알아야 하는 기술인 CSS3 Media queries Module 에 대해서 아주 조금 건드려 볼까 합니다. 예전에 스터디에서 했던 주제를 고친것으로 계속 발전시켜 볼 예정입니다.
개요
HTML4.01 과 CSS2 에서 이미 media type에 대응하는 스타일 시트를 따로 구성할 수 있는 방식을 지원하고 있었지만, 미디어에 대한 특징이나 범위를 명확하게 지정할 수 없었기 때문에, screen, print, handheld 정도만 사용 되었던것이 사실이었습니다. 그래서 CSS3에서는 좀 더 미디어의 특징을 잘 표현할 수 있는 방법을 확장하고 세분화한 스팩을 제공하게 되었습니다. 그것이 CSS3 Media Queries Module 이 되겠습니다. 앞서 언급했지만 HTML4, CSS2에서도 media type에 따른 css를 분기하는 방법은 지원하고 있었습니다. 그예를 보면 HTML4.01 에서는 스타일 시트 정의 시에 media를 선택 할 수 있습니다.
<STYLE type="text/css" media="projection">
H1 { color: blue}
</STYLE>
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
참고 URL 은 다음과 같습니다.
- http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.4
- http://www.w3.org/TR/REC-html40/types.html#type-media-descriptors
CSS2에서 정의된 media type 정의방법은 다음과 같습니다.
@media screen {
* { font-family: sans-serif }
}
참고 URL은 다음과 같습니다.
- http://www.w3.org/TR/CSS21/media.html
위의 방법은 출력될 media의 type만 결정 할 수 있기 때문에 같은 미디어의 다양한 환경을 모두 수용하기에는 어려움이 많습니다. 하지만 CSS Media queries Module을 이용하면 디바이스의 종류뿐만 아니라 다양한 조건을 이용하여 Style을 분기할 수 있게 됩니다.
문법 및 사용법
미디어 쿼리의 문법 및 사용법은 다음과 같습니다.
media_query_list: <media_query> [, <media_query> ]* media_query: [[only | not]? <media_type> [ and <expression> ]*] | <expression> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width(가로 너비) | min-width(최소 가로 너비) | max-width(최대 가로 너비) | height(높이) | min-height(최소 세로 높이) | max-height(최대 세로 높이) | device-width(디바이스의 기본 가로 너비) | min-device-width(디바이스의 기본 최소 가로 너비) | max-device-width(디바이스의 기본 최대 가로 너비) | device-height(디바이스의 세로 높이) | min-device-height | max-device-height | aspect-ratio(화면 비율) | min-aspect-ratio(최소 화면 비율) | max-aspect-ratio(최대 화면 비율) | device-aspect-ratio(디바이스의 화면 비율) | min-device-aspect-ratio(디바이스의 최소 화면 비율) | max-device-aspect-ratio(디바이스의 최대 화면 비율) | color(색상당 비트수) | min-color(최소 색상당 비트수) | max-color(최대 색상당 비트수) | color-index(user agent가 지원하는 팔레트의 색상 갯수) | min-color-index(user agent가 지원하는 팔레트의 색상의 최소 갯수) | max-color-index(user agent가 지원하는 팔레트의 색상의 최대 갯수) | monochrome(흑백 장치에서 픽셀 당 비트의 개수) | min-monochrome(흑백 장치에서 픽셀 당 비트의 최소 개수) | max-monochrome(흑백 장치에서 픽셀 당 비트의 최대 개수) | resolution(해상도) | min-resolution(최소 해상도) | max-resolution(최대 해상도) | scan | grid
무슨소리인지 저도 잘모르겠습니다. ㅎㅎ 미디어 쿼리는 대소문자를 구별하지 않으며 알수없는 미디어의 경우에는 false 를 리턴한다고 합니다. 🙂
Media Type
CSS3 Media Queries Module 에서 정의하는 Media의 종류는 다음과 같습니다.
- all : 모든 미디어 타입
- aural : 음성 합성 장치
- braille : 점자 표시 장치
- handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
- print : 인쇄 용도
- projection : 프로젝터 표현 용도
- screen : 컴퓨터 스크린을 위한용도
- tty : 디스플레이 능력이 한정된, 텔렉스(teletype), 터미날, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도 “tty” 메디아 타입에서 제작자는 픽셀(pixel) 단위를 사용하여서는 안됨
- tv : 음성과 영상이 동시 출력되는 TV와 같은 장치
- embossed : 페이지에 인쇄된 점자 표지 장치
뭔가 겁네 많은것 같아요. 일단 대충 이정도로 알아보고 실제 사용해보면서 알아보는거로 하는게 좋겠어요.
사용예
외부 파일을 사용하는법
<link rel="stylesheet" media="screen and (min-device-width: 200px)" href="example2.css" />
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="example1.css" />
예제) 아이폰과 웹브라우저에서 비교 http://mydeute.com/media_queries/1.html
디바이스의 가로값이 최소 200px이상이면 example2.css를 로드, 디바이스의 가로값이 최소 800px이상이면 example1.css도 같이 로드함
<style> 태그를 이용하는법.
<style type="text/css" media="screen and (min-device-width: 200px)">
body { background-color: #0F0; }
</style>
<style type="text/css" media="screen and (min-device-width: 800px)">
body { background-color: #F00; }
</style>
예제) 아이폰과 웹브라우저에서 비교 http://mydeute.com/media_queries/2.html
CSS 파일내에서 사용하는 방법
<style type="text/css">
@media screen and (min-device-width: 200px) {
body { background-color: #0F0; }
}
@media screen and (min-device-width: 800px) {
body { background-color: #F00; }
}
</style>
예제) 아이폰과 웹 브라우저에서 비교 http://mydeute.com/media_queries/3.html
only, not
media type 을 선별하는 과정중에 선택할 수 있는 접두어
only
@media only handheld {
body { background-color: #F00; }
}
not
@media not screen {
body { background-color: #F00; }
}
features
width
user-agent의 현재 width 값에 대응해서 반응
@media screen and (width: 980px) {
body { background-color: #F00; }
}
예제) 아이폰과 브라우저에서 비교 http://mydeute.com/media_queries/4.html user-agent의 가로너비가 980px일때 배경이 빨간색으로 표현
min-width
최소 가로 너비를 지정하고 지정된 값보다 너비가 길면 그값에 대해 반응
@media screen and (min-width: 981px) {
body { background-color: #F00; }
}
예제) 아이폰과 브라우저에서 비교 http://mydeute.com/media_queries/5.html user-agent의 가로너비가 981px 이상 일때 배경이 빨간색으로 표현
max-width
최대 가로 너비를 지정하고 지정된 값보다 너비가 좁은 경우에만 그 값에 대해 반응
@media screen and (max-width: 980px) {
body { background-color: #F00; }
}
예제) 아이폰과 브라우저에서 비교 http://mydeute.com/media_queries/6.html user-agent의 가로너비가 980px 이하 일때 배경이 빨간색으로 표현
응용 1
조합이 가능해짐 0~ 320px 까지는 배경이 파란색 321px~ 800px 까지는 배경색이 빨간색 801px이상의 너비에서는 녹색 배경을 만들고 싶다면
@media screen and (max-width: 320px) {
body { background-color: #00F; }
}
@media screen and (min-width: 321px) and (max-width: 800px) {
body { background-color: #F00; }
}
@media screen and (min-width: 801px) {
body { background-color: #0F0; }
}
예제 브라우저의 가로 너비를 조절해보면서 보면 됨 http://mydeute.com/media_queries/7.html
응용 2
브라우저 화면의 가로 너비에 따라 레이아웃을 변경할수도 있음
@media screen and (max-width: 320px) {
#wrap { width:320px }
#left { border:2px solid #F00; width: 316px }
#contents{ border:2px solid #0F0; width: 316px }
#right { border:2px solid #00F; width: 316px }
}
@media screen and (min-width: 321px) and (max-width: 800px) {
#wrap { width:800px }
#left { float: left; border:2px solid #F00; width: 196px }
#contents{ float: left;border:2px solid #0F0; width: 596px }
#right { clear:both;border:2px solid #00F; width: 796px }
}
@media screen and (min-width: 801px) {
#wrap { width:100% }
#left { float: left; border:2px solid #F00; width: 23% }
#contents{ float: left;border:2px solid #0F0; width: 50% }
#right { float: left;border:2px solid #00F; width: 23% }
}
예제) http://mydeute.com/media_queries/8.html
아주 기본적인 미디어 쿼리의 사용법에 대해 알아보았습니다.
이 다음에는 제가 현재 제블로그 스킨을 좀 바꿔보려고 하고 있으므로 실제 적용기를 다뤄볼까 합니다.
그럼 그동안 즐거웠어요