jQuery Mobile 테마특징과 기본테마

jQuery Mobile 은 CSS3의 최신 기술을 적극 활용해 향상되고 세련된 테마를 구현하고 있으며 이미지 사용을 초치대한 절제해 모바일 네트워크를 위한 경량화에 힘을 기울이고 있습니다. 또한 레이아웃과 UI 컨트롤 하나하나에 서로 다른 색상과 질감을 적용할 수 있어 다양하고 섬세한 테마 구현이 가능합니다.
그리고 테마롤러(ThemeRoller)라는 자동화된 테마 도구를 제공해 사용자 정의 테마를 손쉽게 만들수 있게끔 지원하고 있습니다.

jquery mobile 테마 특징.

CSS3 확용.
최근 출시되는 대부분의 모바일 UI 라이브러리처럼 jQuery Mobile 역시 CSS3의 향상된 기능을 많이 활용하고 있습니다.
CSS3 를 이용하면 좀더 세련된 디자인이 가능하며, 많은 부분에서 이미지를 대체할 수 있어 디자인 관련 리소스를 줄일 수 있습니다. 모바일 환경에서 디자인 리소스의 경량화는 네트워크 민감성에 주요한 역활을 합니다.
Swatches
jQuery Mobile 은 테마의 다양성을 위해 Swatches 라는 개념을 도입했습니다. Swatches는 색상과 질감을 달리하는 각각의 디자인 견본을 의미합니다.(요것도 티스토리 레이아웃을 제작할때 적용하면 좋을것 같습니다...개인생각)
각 Swatch는 (심플한 표현을 위해) 영문 a ~ z가지 이름이 부여됩니다. 따라서 이론상 총 26가지 (알파벳 갯수) Swatch를 정의할 수 있습니다. 현재 jQuery Mobile의 기본 테마에서 제공하는 Swatches는 총 5개(a,b,c,d,e) 입니다.
필요에 따라 f,g,h,i 등 얼마든지 Swatch를 추가로 정의해서 사용이 가능합니다.
테마롤러
테마롤러(ThemeRoller)는 사용자 정의 테마 색상을 위한 자동화 도구로 기존 jQuery UI에서 이미 제공되던 것입니다. 이 도구를 활용하면 CSS 코드를 직접 작성하지 않고도 다양한 스타일을 눈으로 바로 바로 확인하면서 쉽게 사용자 정의 테마를 만들 수 있고, 이렇게 만들어진 테마 소스를 내려받아 프로젝트에 적용할 수 있습니다.
jQuery Mobile 을 선택하게 하는 차별화된 도구라고도 생각합니다. 이 도구는 웹 애플리케이션 형태로 제공되며, 아래의 URL에서 jQuery UI의 테마롤러를 사용해 볼 수 있습니다.
jQuery UI ThemeRoller : http://jqueryui.com/themeroller/


무제한의 다양성.
Swatches 의 a~z까지의 갯수는 테마 한개당 표현할 수 있는 Swatches의 수를 의미합니다. 즉 하나의 테마당  26가지의 Swatches를 정의할 수 있게해서 사실상 거의 무제한의 디자인의 다양성을 추구할 수 있게 설계되어 있습니다.



jQuery Mobile 테모 애플리케이션에서도 Default 테마 외에 Valencia 테마를 샘플로 제공합니다.

data-theme 속성

jQuery Mobile 이 대부분이 UI특성과 역활을 html5의 data-* 속성을 이용해 정의하듯이 테마 역시 data-theme 라는 속성을 기반으로 합니다.
다음과 같이 html 태그에 data-theme 속성을 지정해서 특정 Swatch를 적용할 수 있습니다.
<!-- page 영역에 Swatch 'e'적용 -->
<div data-rol-"page" data-theme="e">			
<!-- button에 Swatch 'e' 적용 -->
<a href="#" data-role="button" data-theme="e">button</a>

그리고  data-theme 외에 UI 컨트롤의 특정 부분에 대한 스타일을 처리하기 위해 data-dividertheme, data-counttheme, data-splittheme 등의 테마 관련 속성이 추가로 제공됩니다.

jQuery Mobile 기본테마.

UI에 컨트롤에 특정 Swatch를 지정하지 않으면 자동으로 기본 테마가 적용됩니다. 기본 테마가 적용될 때는 자신이 속한 컨테이너(Container) 요소의 테마가 무엇인지에 따라 자기 자신의 테마가 결정됩니다.
즉, UI의 전체적인 조화를 위해 최적화된 테마로 자동 결정된다는 것입니다.
jQuery Mobile의 5가지 Swatches
jQuery Mobile 은 Default 테마에 5가지(a~e) SWatches가 제공됩니다. 다음과 같은 특징이 있습니다.
a : 비주얼(Visual)을 중시한 최고 레벨의 색상을 표현합니다. (Black)
b : 모바일에 친숙한 두번째 레벨의 색상을 표현합니다. (Blue)
c : 가장 보편적으로 기본 레벨의 색상을 표현합니다.(Gray)
d : atternate(번갈아 가면서 생기는) 표현을 위한 테마입니다(Dark gray)
e : 강조 표현을 위한 테마입니다.(Yellow)

한가지 같은 Swatch라 하더라도 jQuery Mobile이 UI 최적화를 위해 컨트롤마다 조금씩 다르게 색상을 처리할 수 있기 때문이다. (예를들어 Content 영역이 파란색이라면 대체로 수준 낮은 색감으로 비칠 수 있다. 따라서 Content 영역에 Swatch 'b'를 지정하더라도 파란색이 아니라 회색으로 표현이 됩니다.)
아래는 5가지 테마의 예입니다.


코드는 대략 아래처럼 마크업하면 됩니다. 한가지만 예를들어 봅니다.
<!-- 5가지 테마의 코드 예 -->
<a href="#" data-role="button" data-theme="a">button</a>
<a href="#" data-role="button" data-theme="b">button</a>		
<a href="#" data-role="button" data-theme="c">button</a>			
<a href="#" data-role="button" data-theme="d">button</a>			
<a href="#" data-role="button" data-theme="e">button</a>

개    개