Index
2. jQuery Mobile 웹앱 파일의 기본 구조
3. jQuery Mobile 페이지를 구성하는 4가지 영역
4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출
jQuery Mobile 에서 시작 HTML페이지의 기본 구성 형태는 다음과 같다. 시작 HTML 페이지는 뷰포트, 아이콘, jQuery 라이브러리 경로, jQuery Mobile CSS 경로, jQuery Mobile 라이브러리 경로를 지정하는 코드를 포함한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
user-scalable=no" />
<link rel="shortcut icon" href="../image/icon.png">
<link rel="apple-touch-icon" href="../image/icon.png">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- 페이지의 내용을 구성하는 영역 -->
</body>
</html>
<meta charset="utf-8" />
- HTML 페이지에서 문자를 표시할 때 사용할 문자셋을 지정한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=no" />
- 모바일 화면에서 화면에 보여질 줌 사이즈 및 초기 설정을 하는 태그이다.
- width=device-width : 초기 폭을 모바일장치가 지원하는 폭만큼으로 설정한다.
아이폰의 경우 화면이 폭보다 크면 스크롤이 생기고 화면이 폭보다 작으면 폭에 맞추어진다.
- height=device-height : 초기 높이를 모바일장치가 지원하는 높이만큼으로 설정한다.
- initial-scale=1.0 :초기값으로 설정할 줌 배율을 1.0으로 한다.
- maximum-scale=1.0 : 최대값으로 설정할 줌 배율을 1.0으로 한다.
- minimum-scale=1.0 : 최소값으로 설정할 줌 배율을 1.0으로 한다.
initial-scale, maximum-scale, minimum-scale 의 값을 모두 1.0으로 지정하면 확대, 축소가 안된다.
- user-scalable=no : 사용자가 축소/확대할 수 없도록 한다. yes, no 를 선택한다.
<link rel="shortcut icon" href="../image/icon.png">
- 안드로이드 폰의 바로가기 아이콘 지정
<link rel="apple-touch-icon" href="../image/icon.png">
- 아이폰의 바로가기 아이콘 지정. 아이콘에 반사광 효과가 표시된다.
- 반사광 효과를 없애기 위해서는 apple-touch-icon 대신에 apple-touch-icon-precomposed 를 사용한다.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
- jQuery Mobile 프로그래밍을 하기 위해서 반드시 필요한 CSS 및 라이브러리를 CDN을 이용해서 참조한다.
- 라이브러리파일을 사이트 내에서 참조하고자 하면 위 파일을 사이트 내에 다운로드 한 후에 경로를 지정해 준다.(파란색 글씨 부분을 라이브러리가 위치한 경로로 변경해 준다.)
<body></body>
- <body>태그 안에는 페이지 영역, 상단 툴바 영역, 컨텐트 영역, 하단 툴바 영역의 네가지 영역으로 표현된다.
<div data-role="page">
<div data-role="header"> ... </div>
<div data-role="content"> ... </div>
<div data-role="footer"> ... </div>
</div>
|
data-role 값 |
설명 |
page |
페이지 영역 정의 |
| header | 헤더바 영역 정의 |
| content | 컨텐츠 영역 정의 |
| footer | 푸터바 영역 정의 |
| navbar | 네비게이션 바 영역 정의 |
| button | 버튼 컨트롤 |
| listview | 리스트 컨트롤 |
| fieldcontain | 폼양식 간 필드 구분영역 정의 |
| controlgroup | 컨트롤그룹 영역 정의 |
| list-divider | 리스트 Divider 지정 |
| slider | 플립토글 컨트롤 |
| collapsible | Collapsible 블럭 정의 |
| collapsible-set | Collapsible 블럭 그룹 구성 |
'프로그램 > jQuery Mobile' 카테고리의 다른 글
| 06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용 (0) | 2013.12.01 |
|---|---|
| 05. jQuery Mobile 의 단일 HTML 모델에 대한 이해 (0) | 2013.11.30 |
| 04. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출 (2) | 2013.11.29 |
| 03. jQuery Mobile 페이지를 구성하는 4가지 영역 (0) | 2013.11.28 |
| 01. jQuery Mobile ? (0) | 2013.11.23 |
