주제를 알자! 1, 2편에서 사용자의 입맛에 맞는 테마와 아이콘 등을 제작하는 방법에 대해 포스팅하였다. 이번에는 내 입맛에 맞게 다른 사람이 제작해 둔 테마를 가져다 사용하는 방법에 대하여 설명하겠다.
샘플은 편의상 2편에서 사용했던 example2 를 재활용하겠다.
|
|
example2.zip
2편에서 사용자가 제작한 iPhone 스타일의 테마를 보았다.
http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/
iPhone 스타일의 테마가 마음에 든다. 미적 감각도 없는 내가 새로 만든다고 삽질을 하느니 이걸 그냥 가져다 쓰고 싶다. 아마 나와 같은 공돌이들은 대부분 같지 않을까? 그렇다면 다음 과정을 따라해보자.
1. 다음의 URL 로 이동한다.
https://github.com/taitems/iOS-Inspired-jQuery-Mobile-Theme |
2. 빨간 박스쳐진 곳을 눌러 ZIP 파일을 다운로드 받는다. 또는 오른쪽에 빨간색 밑줄 쳐진 부분의 URL을 복사하여 Git 으로 Clone 받아도 무방하다. (Git 에 대해서는 http://s2junn.tistory.com/62 에서 사용법을 다룬 적이 있다. )
3. 다운로드 받은 ZIP 파일의 압축을 풀어보면 하나의 폴더와 세 개의 파일이 나오는데 우리는 ios_inspired 폴더만 필요하다. 이 폴더를 example2 폴더에 복사한다.
4. example.html 파일을 Text Editor 로 열어 <head /> 사이에 다음과 같이 <link> Tag 를 추가해보자. 이미 추가되어 있는 CSS 파일들 밑에 추가되어야한다.
<link rel="stylesheet" href="ios_inspired/styles.css"> |
5. 브라우저에서 example.html 을 확인해본다.
오! 샘플이 깔끔하게 iPhone 스타일로 변경되었다. 간단하지 않은가?! 이렇게 공개되어 있는 jQuery Mobile Theme 를 검색하다 보면 어렵지 않게 발견할 수 있다.
1. 아래 링크를 눌러 jQuery Mobile 홈페이지에 가보자.
http://jquerymobile.com/ |
2. Resources 를 클릭한다.
3. Themes 를 클릭한다.
Themes 항목이 보인다. 우리가 앞에서 살펴보았던 iOS Theme 도 링크되어 있다. 이번에는 iOS Theme 밑에 있는 Metro Theme 를 한번 살펴보자.
아.. 칙칙하다. 뭐 이렇게 시커멓게 만들어놨어..
이번에는 Metro Theme 를 샘플에 적용해보겠다.
1. 다음의 링크를 클릭한다.
2. 페이지 가장 밑에 있는 "Theme home page" 링크를 클릭한다.
3. 오른쪽 상단에 있는 Download ZIP File 버튼을 눌러 파일을 다운로드 받는다.
4. 다운로드 받은 파일의 압축을 풀면,, 뭐가 이렇게 많지 ㄷㄷㄷ;
눈에 띄는 단어가 보인다. 일단 다른 것은 무시하고 themes 폴더를 열어보자.
5. metro 폴더를 복사하여 example2 폴더에 넣고 example.html 파일을 수정한다.
6. 이제 브라우저를 새로고침하여 example.html 을 확인해보자.
샘플이 Metro 스타일로 변경되었다.
이와 같이 인터넷에 공개되어 있는 jQuery Mobile Theme 를 검색하여 Theme 와 관련된 CSS 파일만 추가해주면 jQuery Mobile 로 만든 나의 Application 을 손쉽게 변경할 수 있다. Theme 는 jQuery Mobile 홈페이지에 있는 것 외에도 많이 공개되어 있으니 구글링을 통해+_+ 검색해보자.
Tip. jQuery Mobile ThemeRoller 의 import 기능을 활용하면 이미 공개되어 있는 Theme 의 일부분을 내 입맛에 고쳐 사용할 수 있다.
'Web' 카테고리의 다른 글
| [jQuery Mobile] 주제를 알자! - 2 - (0) | 2012.12.10 |
|---|---|
| [jQuery Mobile] 주제를 알자! - 1 - (0) | 2012.12.01 |
| Flexible Box Layout module (0) | 2012.03.28 |
| CSS 가상요소(Pseudo Elements) (0) | 2012.03.09 |
| 웹 페이지 저작의 기초 (0) | 2012.03.08 |
