jQuery Mobile 9

jQuery Mobile 테마

jQuery Mobile은 기본적으로 테마가 뒤섞여 있습니다. 페이지는 검정색 테마고 리스트 뷰에 들어가는 구성 요소들은 파란색 테마입니다. jQuery Mobile은 기본적으로 다섯 종류의 테마를 지원하며 추가 테마도 쉽게 만들 수 있습니다. 우선 테마를 지정하는 방법을 살펴보고 정리해 봅시다. 태그에 data-theme 속성을 지정하면 테마를 줄 수 있습니다. 페이지에 data-theme 속성을 입력하면 페이지 전체에 테마가 적용됩니다. jQuery Mobile은 a, b, c, d, e 다섯 가지 테마를 지원합니다.

내비게이션바

							<div data-role="page" data-theme="c">
								<div data-role="header" data-position="fixed">
									<a href="#" data-icon="home" class="ui-btn-left">Home</a>
									<h1>Mobile</h1>
									<a href="#" data-icon="gear" class="ui-btn-right">Settings</a>
									<div data-role="navbar">
										<ul>
											<li><a href="#" data-icon="grid" class="ui-btn-active">One</a></li>
											<li><a href="#" data-icon="star">Two</a></li>
											<li><a href="#" data-icon="alert">Three</a></li>
											<li><a href="#" data-icon="info">Four</a></li>
											<li><a href="#" data-icon="gear">Five</a></li>
										</ul>
									</div>
								</div>
								<div data-role="content">
								   <ul data-role="listview">
										<li data-role="list-divider">Divider</li>
										<li><a href="#">List Item 1</a></li>
										<li><a href="#">List Item 2</a></li>
										<li data-role="list-divider">Divider</li>
										<li><a href="#">List Item 3</a></li>
										<li><a href="#">List Item 4</a></li>
										<li><a href="#">List Item 5</a></li>
										<li><a href="#">List Item 6</a></li>
										<li data-role="list-divider">Divider</li>
										<li><a href="#">List Item 7</a></li>
										<li><a href="#">List Item 8</a></li>
										<li><a href="#">List Item 9</a></li>
										<li><a href="#">List Item 0</a></li>
									</ul>
								</div>
							</div>
						

예제를 실행하면 헤더와 푸터에 테마가 적용됩니다. 직접 테마를 하나하나 출력해 보세요. 참고로 리스트 뷰는 페이지의 테마가 설정돼도 별도로 구분자에 b테마가, 각각의 요소에는 c테마가 적용됩니다.

jQuery Mobile의 가장 기본적인 테마는 a 테마입니다. 지금까지 테마를 적용하지 않았을 때 적용되던 검정색 테마가 a 테마입니다. 이외의 b 테마는 파란색, c 테마는 회색, d 테마는 흰색, e 테마는 노란색입니다. 일반적으로 모든 테마를 적절하게 혼합해 사용합니다. 각 요소에 테마를 적용하려면 위의 소스코드 처럼 요소마다 data-theme 속성을 입력합니다.

테마는 jQuery Mobile Theme Roller를 사용해 만들 수 있습니다. 각 부분에 해당하는 색상을 설정하여 테마를 만들고 다운로드합니다. 기존의 CSS 파일 대신 다운받은 파일을 추가하고 data-theme 속성으로 지정하면 사용자 지정 테마를 사용할 수 있습니다.