jquery mobile 기본 템플렛

요즘 html5 와 모바일로 많은 관심을 두고 있습니다.
그중 jquery mobile 에 대해서 배웠는데 복습차원에서 하나 하나 뜯어보았습니다.
그중 기본 템플렛에 대해서 이야기 할려고 합니다. 뭐 다 아는 이야기이지만 처음 입문하시는분을 위해서 몇자 적습니다.

jquery mobile 를 인클루드하는것만으로 모바일 페이지는 끝이라고 해도 과언이 아닙니다.
웹사이트를 만들때는 float 가 어떻고, IE 의 버그를 잡고 하는데....모바일은 그게 없습니다.
심지어는 css 까지 직접 작성하지 않고 그냥 링크만 거는것으로 겜 끝~~~

먼저 홈페이지를 알려드려야지요.
jquery mobile 홈페이지 : http://jquerymobile.com/

시작해볼까요...
시작은 html5 입니다.
그럼 대략 기본적인 코드는 아래와 같습니다.
jquery mobile 에서 제공하는 형식대로 해보겠습니다.
<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page Title</title> 	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
<div data-role="page">
	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->
	<div data-role="content">	
		<p>Page content goes here.</p>		
	</div><!-- /content -->
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

코드를 보시면 css 파일 한개와 js 파일 두개를 링크했습니다.
그리고는 header 와 content , footer 이렇게 구성된 페이지를 구성하고 하나의 디비젼(div) 에 넣고 data-role="page" 라고 했습니다.
시뮬레이터 사이트에서 한번 어떻게 보이나 보았습니다.


아이폰에서 본 화면

아이패드에서 본 화면


이렇게 간단하게 만드는것을 보았습니다.
여기서 느끼는것은 정말 간단하다는 것입니다.  
좀더 많은 정보는 상단에 네비게이션에 있는 메뉴를 클릭해서 살펴보면 됩니다.

 
개    개