기본 태그 작성 및 css, jquery 연결
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<!-- jquery mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- /jquery mobile 끝 -->
<!-- 사용자 css 및 jquery -->
<link rel="stylesheet" href="css/app1.css">
<script src="js/app1.js"></script>
<!-- /사용자 css 및 jquery -->
</head>
<body>
</body>
</html>
페이지 구성
페이지는 한 페이지 내에서 jquery-mobile의 data-role속성을 이용합니다.
data-role="page" data-role의 page는 한 페이지에서 여러 화면을 구성할 화면 page를 설정합니다.
data-role="header" page내에서 header를 설정합니다.
data-role="content" page내에서 content를 설정합니다.
data-rol="footer" page내에서 footer를 설정합니다.
html 구성
<body>
<!-- 페이지 구성 -->
<div data-role="page" id="main">
<div data-role="header">
<h1>헤더</h1>
</div>
<div data-role="content">
<p>컨텐트</p>
</div>
<div data-role="footer">
<h2>푸터</h2>
</div>
</div>
</body>