CSS Mobile Profile 2.0 살펴보기
CSS 모바일 프로파일 2.0이란?
모바일이라는 제한된 환경에서 효율적으로 웹 콘텐츠를 표현하는 다양한 기술이 개발되고 있습니다. 이러한 기술의 바탕에는 월드와이드 웹 컨소시엄(이하 W3C)이 제정한 XHTML과 CSS 명세서가 있는데 오늘 소개하려는 CSS 모바일 프로파일(이하 CSS-MP) 2.0 역시 CSS 2.1 명세서를 기반으로 CSS 3의 일부 내용을 추가한 명세서입니다.
모바일 폰 산업의 표준을 만들기 위해 설립된 Open Mobile Alliance(이하 OMA)도 Wireless CSS Specification(이하 WCSS)이라는 모바일 환경에 특화된 CSS 명세서를 제정하고 있습니다. 이 명세서도 마찬가지로 CSS 2.1을 기반으로 하기 때문에 CSS 2.1에 익숙한 분들이라면 잠깐 살펴보는 것으로도 그 내용을 파악하실 수 있을 것입니다.
이 글에서는 먼저 CSS-MP가 어떤 목적으로 만들어졌는지 소개하고, CSS-MP와 Wireless CSS 명세서의 차이를 간단히 알아본 다음 CSS-MP에 실제로 어떤 내용이 담겨 있는지를 알아보겠습니다.
CSS-MP란?
CSS-MP는 제한적인 장치(대표적으로 모바일 폰)에서의 상호 운용성을 제공하기 위해 기본이 되는 CSS를 정의한 것입니다. 보통 CSS 2.1의 부분 집합(subset)이라고 표현하는데 플랫폼의 한계로 전체 CSS를 완벽히 지원하지 못하는 장치와 전체 CSS를 지원하는 장치 모두가 지원할 수 있는 공통 부분을 떼어낸 것이라고도 생각할 수 있습니다.
이렇게 CSS 2.1의 부분 집합이지만 CSS 3 박스 모델의 marquee 관련 속성이 일부 추가되었습니다. 지원해야 하는 속성들은 반드시 지원해야 하는 필수 속성과 더 나은 기능 제공을 위한 선택 속성으로 나뉘는데, 어떤 속성들이 필수고 어떤 속성들이 선택인지는 잠시 후에 알아보겠습니다.
CSS-MP와 WCSS의 차이
W3C 는 CSS-MP와 WCSS가 필수적으로 지원해야 하는 속성을 최대한 공유한다고 밝히고 있고, WCSS 명세서는 WCSS를 지원하는 사용자 에이전트가 유효한(valid) CSS-MP 스타일시트 역시 지원하게 될 것이라고 설명하고 있습니다. 실제로도 일부 속성을 제외하면 기본적으로 큰 차이가 없지만 한 가지 중요한 사항이 있습니다. 바로 한중일(CJK: Chinese, Japanese, and Korean) 문자셋에 대한 고려가 포함되어 있다는 점입니다.
사실 font-variant 같은 CSS 2.1의 일부 속성은 라틴 계열의 언어에서만 제대로 적용됩니다. WCSS에는 이렇게 문자셋에 영향을 받는 속성들의 필수/선택 여부를 따로 정의하고 있습니다. 예를 들어서 웹 페이지가 라틴 계열의 문자셋으로 표현될 때에는 반드시 font-variant 속성을 지원해야 하지만 한중일 문자셋으로 표현될 때에는 필수가 아닌 선택 사항이라고 명시하고 있습니다. 현재는 한중일 문자셋만을 대상으로 하지만 모바일 웹의 국제화(i18n)를 생각했을 때 W3C보다 앞선 방식임에는 분명합니다.
CSS-MP에 정의된 선택자, @ 규칙(At-rules), 속성들
아래는 2009년 3월 30일 현재 권고안 후보(Candidated Recommendation) 상태인 CSS-MP 명세서에 수록된 표입니다. 해당 내용의 저작권은 아래 링크를 참고해주세요.
Copyright ? 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
선택자
CSS-MP에는 CSS 2.1의 선택자 대부분이 그대로 사용됩니다.
| 선택자 유형 | 예 | 요구 조건 |
|---|---|---|
| 공용 선택자 | * | 필수 |
| 타입(요소) 선택자 | E | 필수 |
| 자손 선택자 | E F | 필수 |
| 자식 선택자 | E > F | 필수 |
link 가상-클래스 | E:link, E:visited | 필수 |
| 동적인 가상-클래스 | E:active, E:focus | 필수 |
class 선택자 | .warning | 필수 |
ID 선택자 | #myid | 필수 |
| 그룹화 | E1, E2, E3 { … } | 필수 |
CSS 2.1에서 지원되는 선택자 중 :hover, :first-child, :lang 가상(pseudo) class와 속성 선택자, 인접 형제 선택자가 포함되지 않았고 first-line 같은 가상 요소도 제외된 것을 확인할 수 있습니다.
@ 규칙
CSS-MP을 따르는 장치는 @charset, @import 규칙을 처리할 수 있어야 하며, handheld와 all 미디어 타입을 인식할 수 있어야 합니다.
| 규칙 | 설명 | 요구 조건 |
|---|---|---|
@charset | 스타일시트의 문자 인코딩 지정 | 필수 |
@import | 외부 스타일시트 임포트 | 필수 |
@media | handheld, all 미디어 지원 필수, 나머지는 선택 | 필수 |
@namespace | 설명 참고 | 선택 |
유일하게 선택 사항으로 분류된 @namespace 규칙은 기본 이름공간을 선언하거나 이름공간을 이름공간 접두사에 할당(binding)할 때 사용됩니다. XML은 요소 이름이 같더라도 이름공간만 같지 않으면 한 문서에서 각각의 요소를 구분해서 사용할 수 있습니다. 예를 들어서 동일한 body 요소라도 <xhtml:body>와 <human:body>는 접두사로 구분됩니다. @namespace 규칙을 이용하면 이렇게 서로 다른 이름공간의 요소를 xhtml|body와 human|body 선택자로 각각 선택할 수 있게 되는데 자세한 내용은 CSS3 이름공간 모듈을 참고하시기 바랍니다.
속성들
아래 열거한 속성 중 CSS3 박스 모델의 marquee 관련 속성을 제외하면 모두 CSS 2.1 속성입니다. 지원해야 하는 속성 값이 CSS 2.1과 다를 경우에는 속성 정의 문법에 따라 해당 속성 값을 설명하고 있습니다. 또한, 각각의 속성은 알파벳 순서로 정렬되어 있습니다.
| 속성 | 속성 값 형식 (CSS 2.1과 다를 경우에만) | 요구 조건 |
|---|---|---|
background-color | 필수 | |
background-image | 필수 | |
background-repeat | 필수 | |
background-attachment | 필수 | |
background-position | top | center | bottom | left | right | inherit | 필수 |
background | 필수 | |
border-top-width | 필수 | |
border-right-width | ||
border-bottom-width | ||
border-left-width | ||
border-width | 필수 | |
border-top-color | 필수 | |
border-right-color | ||
border-bottom-color | ||
border-left-color | ||
border-color | 필수 | |
border-top-style | 필수 | |
border-right-style | ||
border-bottom-style | ||
border-left-style | ||
border-style | 필수 | |
border-top | 필수 | |
border-right | ||
border-bottom | ||
border-left | ||
border | 필수 | |
bottom | 선택 | |
clear | 필수 | |
color | 필수 | |
display | inline | block | list-item | none | inherit | 필수 |
float | 필수 | |
font-family | 필수 | |
font-style | 필수 | |
font-variant | 필수 | |
font-weight | 필수 | |
font-size | <absolute-size> | <relative-size> | inherit | 필수 |
font | 필수 | |
height | 필수 | |
left | 선택 | |
list-style-type | disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | inherit | 필수 |
list-style-image | 필수 | |
list-style | 필수 | |
margin-top | 필수 | |
margin-right | ||
margin-bottom | ||
margin-left | ||
margin | 필수 | |
marquee-direction [CSS3BOX] | 필수 | |
marquee-loop [CSS3BOX] | 필수 | |
marquee-speed [CSS3BOX] | 필수 | |
marquee-style [CSS3BOX] | 필수 | |
max-height | 필수 | |
max-width | 필수 | |
min-height | 필수 | |
min-width | 필수 | |
outline-color | 선택 | |
outline-style | none | solid | dashed | dotted | inherit | 선택 |
outline-width | 선택 | |
outline | 선택 | |
overflow [CSS3BOX] | auto | 필수 |
overflow-style [CSS3BOX] | marquee | 필수 |
padding-top | 필수 | |
padding-right | ||
padding-bottom | ||
padding-left | ||
padding | 필수 | |
position | 선택 | |
right | 선택 | |
text-indent | 필수 | |
text-align | 필수 | |
text-decoration | none | blink |underline | inherit | 필수 |
text-transform | 필수 | |
top | 선택 | |
vertical-align | top | middle | bottom | baseline | inherit | 필수 |
visibility | 필수 | |
white-space | 필수 | |
width | 필수 | |
z-index | 선택 |
marquee 관련 속성이 추가된 것을 의아하게 생각하실 분도 있겠지만 제한된 장치, 특히 디스플레이 영역이 좁은 모바일 기기라는 점을 고려하면 납득이 갑니다. marquee라는 방식 자체가 스크롤바를 만들거나 사용하기 어려운 상황을 위해 만들어졌으니까요. CSS 3 Marquee 모듈에 있는 예들 들어보겠습니다.
li {overflow: auto; overflow-style: marquee-line; white-space: nowrap} 즉, 콘텐츠를 다 표현할 수 없을 때 대체 수단으로서 제공된다는 의미입니다. 현실적인 예로 아이팟 터치에서는 장치 특성상 overflow:auto;를 지정해도 스크롤바가 생성되지 않아서 넘치는 콘텐츠를 표현하지 못합니다. 하지만 marquee가 적용된다면 비록 시간이 걸리더라도 사용자가 콘텐츠를 전부 확인할 수 있을 것입니다.
그리고 반드시 지원하지 않아도 무방한 속성의 상당 수가 position과 관련되어 있다는 점도 주목할 필요가 있습니다. CSS-MP 명세서에 명확한 설명은 없지만 아마도 다음과 같은 이유 때문이 아닐까요? 우리가 사용하는 모니터는 모바일 기기의 디스플레이 장치보다 훨씬 더 많은 콘텐츠를 표현할 수 있기 때문에 자유롭게 요소를 배치해도 무리가 없습니다. 하지만 모바일 환경에서는 무엇보다 요소를 배치할 공간이 부족하기 때문에 콘텐츠가 겹치는 문제가 쉽게 발생합니다. 이런 환경에서는 최대한 유동적으로 표현하는 것이 최선이기 때문에 필수가 아닌 선택 사항으로 분류한 것이 아닐까 생각합니다.
마치며
이상으로 간단하게 CSS-MP 명세서를 살펴봤습니다. 아직 이 명세서를 따르는 모바일 장치가 많지는 않지만 최근의 웹 환경에서 “표준”이 얼마나 중요한 위치를 차지하는지를 감안한다면 관심을 갖고 살펴볼만한 가치가 있다고 생각합니다.