CSS, Web Standards

CSS3 Media queries Vol.1

댓글 11개

얼마전에 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 은 다음과 같습니다.

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 : 페이지에 인쇄된 점자 표지 장치

뭔가 겁네 많은것 같아요. 일단 대충 이정도로 알아보고 실제 사용해보면서 알아보는거로 하는게 좋겠어요.

사용예

외부 파일을 사용하는법



&lt;link rel="stylesheet" media="screen and (min-device-width: 200px)" href="example2.css" /&gt;

&lt;link rel="stylesheet" media="screen and (min-device-width: 800px)" href="example1.css" /&gt;

예제) 아이폰과 웹브라우저에서 비교 http://mydeute.com/media_queries/1.html
디바이스의 가로값이 최소 200px이상이면 example2.css를 로드, 디바이스의 가로값이 최소 800px이상이면 example1.css도 같이 로드함

<style> 태그를 이용하는법.



&lt;style type="text/css" media="screen and (min-device-width: 200px)"&gt;

body { background-color: #0F0; }

&lt;/style&gt;

 &lt;style type="text/css" media="screen and (min-device-width: 800px)"&gt;

body { background-color: #F00; }

&lt;/style&gt;

예제) 아이폰과 웹브라우저에서 비교 http://mydeute.com/media_queries/2.html

CSS 파일내에서 사용하는 방법



&lt;style type="text/css"&gt;

@media screen and (min-device-width: 200px) {

body { background-color: #0F0; }

}

@media screen and (min-device-width: 800px) {

body { background-color: #F00; }

}

&lt;/style&gt;

예제) 아이폰과 웹 브라우저에서 비교 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

아주 기본적인 미디어 쿼리의 사용법에 대해 알아보았습니다.
이 다음에는  제가 현재 제블로그 스킨을 좀 바꿔보려고 하고 있으므로 실제 적용기를 다뤄볼까 합니다.

그럼 그동안 즐거웠어요