6. Jquery Mobile 기초 – 테마

(1) 테마의 확장

가) CSS 구조

테마의 확장을 위해서는 기본적으로 css 를 수정하여야 하는데 그전에 jquery-mobile 에서 제공하는 css 파일의 구조를 먼저

알아보자. Jquery-Mobile CSS 는 Swatches와 Structure 로 구성되어 있다.

Jquery-Mobile 에서는 아래와 같이 Structure CSS 와 Swatches CSS 를 따로 제공하고 있다.

확장을 위해서 가장 추천하는 방법은 – jquery.mobile.structure-1.1.2.min.css 와 – jquery.mobile.theme-1.1.2.css

를 사용하는 방법을 추천한다.

– jquery.mobile-1.1.2.css

– jquery.mobile-1.1.2.min.css

– jquery.mobile.structure-1.1.2.css

– jquery.mobile.structure-1.1.2.min.css

– jquery.mobile.theme-1.1.2.css

– jquery.mobile.theme-1.1.2.min.css

나) Theme Roller 사용

– Jquerty-Mobile Thme Rooler 사이트 이동 : http://jquerymobile.com/themeroller/

– jquery.mobile.theme-1.1.2.css 전체 내용 Clip Board Copy

– Theme Roller 상단에 Import 에서 붙여 넣기

– CSS 파일이 IMPORT 됨

– 좌측 위에 + 버튼을 눌러서 F 탭을 만듬

– F 탭의 CSS 를 편집하고

– Download 버튼을 눌러 ZIP 파일을 다운로드 받으면 변경된 CSS 를 확인 할 수 있다.

다) 변형된 CSS 의 활용

[예제] 새로 추가한 CSS 를 추가

– THEME 부분은 새로 만든것을 , Struc 부분은 기본의 것을 사용

<link rel=”stylesheet” href=”./themes/aaaaa.min.css” />
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.1.2/jquery.mobile.structure-1.1.2.min.css” />

[예제] 새로 추가한 테마를 적용한다.

– 새로 추가했던 것은 F , 이런식으로 추가적으로 THEME 를 추가할 수 있다.

<div data-theme = “f” data-role=”header” data-position=”fixed”>
<h1>기본 테마</h1>
<a href=”#” data-icon=”arrow-l”>Prev</a>
<a href=”#” data-icon=”arrow-r” data-iconpos=”right”>Next</a>
</div>