참조 - 삶의 조각들
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 블럭 그룹 구성 |