안녕하세요!!
이번에 포스팅할 내용은 jQuery Mobile의 간단한 페이지를 만들어 보겠습니다.
원래 모바일이란 기기가 많이 업그레이드 되고는 있지만 우리가 흔히 사용하는 개인용 PC 처럼 CPU, 메모리 등이 많이 높지는 않습니다. 그래서 가끔 모바일 홈페이지들중에 버벅거리는 현상이 나타나는 경우가 종종 있죠. 아마도 계속 모바일 기기도 사양이 높아지고 있는 추세고 광대역 LTE도 나오고 있어서 점점 그런 경우는 줄어들거라 생각하지만 jQuery Mobile은 사실 모바일에 최적화 되어 있기 때문에 적은 소스 내용으로 최적의 모바일 환경을 구축할 수 있다고 보면 되겠습니다.
그럼 예제로 어떻게 구성되는지 간단히 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<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>
<div data-role="page">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
</div>
<div data-role="content">
<p>자 이제 시작해봅시다!!</p>
</div>
<div data-role="footer">
<h1> Copyright by makand123. All Rights Reserved.</h1>
</div>
</div>
</body>
</html>
// 기본적인 소스의 작성은 위와 같습니다.
// 위 내용이 나오는 화면은 아래와 같습니다.
<div data-role="page">
<div data-role="header">
<h1>상단내용</h1>
</div>
<div data-role="content">
<p>내용</p>
</div>
<div data-role="footer">
<h1>하단내용</h1>
</div>
</div>
// data-role 안에 page를 만들겠다는 선언을 먼저 하고 header(상단), content(내용), footer(하단) 로 작성을 하면 됩니다.
header 를 선언하면 위와 같이 상단에 자동배치되고 footer를 선언하면 하단에 자동배치되게 됩니다. 마찬가지로 content는 중간 내용을 삽입할 수 있는 공간을 만들어줍니다.
작성을 해보시면 알겠지만 정말 간단하고 깔끔하게 나오는 것을 볼 수 있고 화면의 크기에 따라서 자동으로 조절이 됩니다. 그래서 모바일 해상도에 상관없이 나오게 됩니다.
어쨋든 중요한것은 "data-role 에 이미지, 목록, 헤더, 푸터 등의 html 요소를 선언한다" 라는 것을 알아두시면 되겠습니다.
크게 어려운건 없을거라 생각되지만 혹시라도 궁금한점이 있으시면, 댓글, 쪽지 보내주세요~
다음 포스팅에서도 페이지에 대해 조금더 구체적으로 알아보도록 하겠습니다.
그럼 오늘도 즐거운 하루 보내시고 즐거운 프로그래밍 되세요!!
'jQuery Mobile > JM Tutorial' 카테고리의 다른 글
| jQuery Mobile 툴바(toolbars) (0) | 2013.11.11 |
|---|---|
| jQuery Mobile 버튼 (0) | 2013.10.31 |
| jQuery Mobile 페이지2 (2) | 2013.10.28 |
| jQuery Mobile 인스톨(Install) (0) | 2013.10.21 |
| jQuery Mobile 소개 (2) | 2013.10.18 |
