Index
3. jQuery Mobile 페이지를 구성하는 4가지 영역
4. jQuery Mobile 시작 HTML 파일과 다른 HTML 페이지간 호출
5. jQuery Mobile 의 단일 HTML 모델에 대한 이해
jQuery Mobile 의 HTML 페이지는 페이지 영역, 헤더 영역, 컨텐트 영역, 푸터 영역 의 4개 영역으로 구성된다. 이 들 영역은 <div> 태그를 이용해서 정의하며 각 영역을 구분 하는 방법은 <div> 의 속성 data-role을 이용한다.
<div data-role="page">
<div data-role="header"> ... </div>
<div data-role="content"> ... </div>
<div data-role="footer"> ... </div>
</div>
- data-role="page" : 페이지 영역. 헤더, 컨텐트, 푸터 영역을 포함하는 영역으로 HTML 안에는 하나 이상의 페이지 영역이 존재한다.
- data-role="header" : 헤더 영역. 툴바가 위치한다. 필요에 따라 제거 될 수도 있다.
- data-role="content" : 컨텐트 영역. 페이지의 내용이 위치한다. 컨텐트 영역은 반드시 존재해야 한다.
- data-role="footer" : 푸터 영역. 툴바가 위치한다. 필요에 따라 제거 될 수도 있다.
다음은 jQuery Mobile에서 페이지를 표시하는 기본적인 형태이다.
<html>
<head> ... </head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content"> </div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
위 소스에서 보면 푸터 영역이 하단에 고정되어 있지 않고 위로 올라가 있다. 이 부분을 해결 하기 위해서는 data-position 속성을 이용한다. 푸터 영역에 속성 data-position 을 추가하고 값을 fixed 로 설정하면 페이지 하단에 고정된다.
<html>
<head> ... </head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content"> </div>
<div data-role="footer" data-position="fixed" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
* data-role : 4개 영역을 설정한다.
="page" : 하나의 페이지
="header" : 페이지 상단의 헤더 영역
="content" : 페이지의 컨텐츠가 표시되는 영역
="footer" : 페이지 하단의 푸터 영역
* data-position : 영역의 위치를 지정한다.
="fixed" : 영역을 고정시킨다. 푸터 영역의 위치를 화면 하단에 고정시킬 때 사용
'프로그램 > 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 |
| 02. jQuery Mobile 웹앱 파일의 기본 구조 (0) | 2013.11.27 |
| 01. jQuery Mobile ? (0) | 2013.11.23 |
