jQuery Mobile(제이쿼리 모바일) 이란?
제이쿼리 모바일은 터치 조작에 최적화 된 HTML5 UI 프레임 워크입니다.
제이쿼리 모바일을 이용하면 모든 스마트 폰과 테블릿, 데스크탑 장치에서
웹 사이트들과 앱을 이용 할 수 있게됩니다.
jQuery Mobile 시작하기
jQuery Mobile은 http://jquerymobile.com/download/ 에서 다운이 가능하며
사용방법은 CDN(Conent Delivery Network) 호스트를 사용하는 방법도 있고
직접 다운 받아 사용 할 수도 있습니다.
제가 소개해 드릴 방식은 CDN 호스트를 사용하는 방법입니다.
후에 PhoneGap을 이용하여 하이브리드 앱을 만드려면 오프라인 상태에서도
jQuery Mobile을 사용할 수 있어야 하므로 그때는 다운 받아 사용해야 합니다.
http://jquerymobile.com/download/ 에 들어가면 Copy-and-Paste Snippet for CDN-hosted files
부분이 아래와 같이 있습니다. (2014.01.20 기준)
이 부분을 복사하여 <head> 태그 안에 넣어 줍니다.
jQuery Mobile의 기본 요소 page
page는 <header>,<content>,<footer>의 3개의 요소로 구성 됩니다.
div의 안쪽에 보면 'data-'로 시작하는 속성이 있습니다.
이 속성은 모바일 장치를 위해 jQuery Mobile에서 사용됩니다.
data-role="page"는 브라우저에 페이지를 표시한다는 의미 입니다.
data-role="header"는 페이지의 상단에 툴바를 만듭니다. 툴바에는 페이지의 타이틀이나 버튼등이 들어 갑니다.
data-role="content는 페이지의 내용을 정의하는 부분입니다.
data-role="footer"는 페이지의 하단에 툴바를 만듭니다.
page 추가하기
jQuery Mobile에서는 한 HTML 파일 안에 여러 개의 page 만들 수 있습니다.
각각의 page는 서로 다른 id와 href로 서로 연결 되어있습니다.
page를 다이얼로그 박스로 사용하기
다이얼로그 박스는 정보를 보여주거나 입력 요청을 하는 윈도우 타입 중 하나입니다.
사용자가 링크를 클릭하여 열 때, 다이얼로그 박스로 표현하고 싶다면,
data-rel="dialog" 속성을 링크 부분에 추가합니다.
'컴퓨터이야기 > jQuery Mobile' 카테고리의 다른 글
| jQuery Mobile 시작하기 2 (0) | 2014.01.21 |
|---|
댓글