JQM 기본 UI
학원에서 저번주에 자바발표가 끝나고 이제 다시 하이브리드 앱제작을 배우고 있습니다.
오랜만에 다시 앱을 배우려니 반갑기도 하고,
그새 까먹은 부분도 있어서 당황스럽기도 합니다.8ㅅ8
하이브리드 앱을 만들면서 기초라고 해도,
너무 디자인이 없으면 심심하지 않겠습니까?
따로 디자인을 하지않아도 기본적인 이쁜 아이콘을 사용할 수있습니다.
바로 'jQuery mobile(JQM)'에서 기본으로 제공하는 UI에 대해서 이야기 해볼까 합니다.
그걸 조합해서 만들게 되면 참 쉽고 활용적이게 만들 수 있습니다.
기존에 있던 것들을 조합해서 만들기만 하면 되니까요.:D
여기에 접속하게 되면, Download에 들어가 주세요.
들어가게 되면, 버전별로 다운을 받을 수도 있고,
소스를 따올 수도 있습니다.
아래에 'Copy-and-Paste~'
영역을 복사해서 <head>부분에 붙여 주면 됩니다.
그리고 사용하면 기본적으로 제공하는 것을 사용할 수있습니다.
버전에 따라서 사용할 수 있는 스타일이나, 효과가 다릅니다.
그건 나중에 사용하시면서 버전을 추가를 해주시면 됩니다.
1.4.5버전이 아니라 밑으로 내려보면 전버전들을 볼 수있습니다.
1.3.2버전의 기본 제공 UI입니다.
1.4.5버전은 순서랑 종류가 조금 다르긴 한데, 일단 기본은 이렇게 있습니다.
여기서 골라 사용할 수도 있고,
원하는 대로 색상을 변경해서 다운받아 사용하는 방법도 있습니다.
기본툴만 있어도, 연습은 하기엔 참 편리하죠.
사용하는 방법은 <body>부분에서 <div>영역을 설정해 사용합니다.
<div>로 영역을 잡아서 'data-theme'으로 위의 테마를 각각 설정해 줄 수도 있습니다.
활용하기 나름이죠.:D
UI의 영역이 전체적으로 기본설정이 되어있다보니,
data-role의 영역이 UI 효과에 영향을 줍니다.
data-role에 대해서는 다시한번 포스팅을 하도록 하겠습니다.:D
'공부 > 하이브리드 앱' 카테고리의 다른 글
| 제이쿼리 모바일 (jQuery mobile) 기본 링크 걸기 (0) | 2016.02.04 |
|---|---|
| 폰갭(Phonegap) 설치하기 (3) | 2015.11.18 |
| [하이브리드 기초] 텍스트 찍기 (2) | 2015.10.10 |
| [환경설정] 이클립스(eclipse) 환결설정 (2) | 2015.09.22 |
| [설치&실행] 폰갭(Phonegap) 설치 및 실행 (1) | 2015.09.22 |