jquery mobile 기본 템플렛

게시자: 대문 demun 카테고리: 퍼블리셔/jQueryMobile 2011.11.21 20:40
요즘 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" 라고 했습니다.
시뮬레이터 사이트에서 한번 어떻게 보이나 보았습니다.


아이폰에서 본 화면

아이패드에서 본 화면



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

 
신고

댓글

  1. 2011.12.28 20:11 신고 BlogIcon 윈컴이  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다. (__)

    • BlogIcon 대문 demun 2011.12.29 00:09 신고  댓글주소  수정/삭제

      윈컴이 님 반갑습니다. 블로그 글을 보니 코드가 하이라이트가 안되어 있었네요..
      댓글 덕분에 수정했습니다.

      연말 잘 보내세요...