jquery mobile 기본 템플렛

Image Slider

Delucide - 워드프레스 테마를 티스토리용으로 변환하여 기존의 티스토리 스킨보다 더욱 고급스런 유료 스킨입니다.
Magazine - 워드프레스 네마를 티스토리용으로 변환하였으며 드롭다운메뉴와 여러컬러셋을 사용할수 있다는것이 장점입니다.
GoodFriends - LavaLamp Dropdown 메뉴를 두개를 사용하며 연한살색과 검정 그리고 붉은 계열의 색상을 오가며 사용할 수 있습니다.
Stripe - Stripe_Default 와 Stripe_LavaLamp 두개의 버젼을 가지고 있으며, LavaLamp 메뉴가 특징이며, 사이드바가 자동으로 스크롤되는 특징이 있습니다.
GrayBorder - HTML5로 마크업된 티스토리 스킨이며, 버튼과 녹색과 어울리는것이 특징입니다.
demunWhite2Col - 3가지의 해상도를 가지고 있으며, 최소한의 이미지를 사용하여 가볍게 제작되었으며,깔끔한 스타일이 장점입니다.
Adsense.ver3 - 구글 에드센스를 탑제하기 용이하도록 제작되었으며, 드롭다운메뉴를 탑제하였습니다.
demunskin.ver16 - 대문스킨중에서 16번째 버젼입니다.

Image Gallery

jquery mobile 기본 템플렛

WebApp/jqueryMobile 2011/11/21 20:40 demun demun

요즘 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" 라고 했습니다.

시뮬레이터 사이트에서 한번 어떻게 보이나 보았습니다.