[Jquery] Jquery – Mobile

개발 노트/JQuery  2015.01.25 23:55


안녕하세요. 명월입니다.
이번 포스팅에서는 Jquery의 Mobile에 대해서 알아보겠습니다.
우리가 모바일(스마트 폰)로 웹사이트를 접속하다 보면 글씨들이 조그만 하게 보일 때가 간간히 있습니다.또 반대로 네이버를 접속하게 되면 읽기 좋게 보이는 경우도 있습니다.


이렇게 하는 경우는 보통 모바일에 맞는 디자인을 해서 경로를 다르게 해서 표시가 되는 것 입니다.
웹 디자이너가 있다고 하면 모바일도 크게 문제가 되지 않겠지요.. 그것에 맞게 디자인을 하면 되는 일이니.. 그러나 보통 개발자만 개발을 하는 경우에는 이런 디자인에 어려움이 많습니다.
그래서 저는 Jquery – Mobile 디자인을 사용합니다.

앞에 포스팅 했던 Juery – UI와 거의 비슷합니다. 그럼 사이트에 접속해서 알아보겠습니다.

http://jquerymobile.com/


필요하시면 이런 저런 포럼이 있으니 읽어보는 좋으나 저는 일단 바로 다운로드로 이동하겠습니다.


Download Builder와 Latest stable version가 있는데 여기서는 밑에 Zip 파일을 다운로드 하겠습니다.
Download Builder에 들어가서 필요한 모듈만 뽑아서 js와css를 만들어도 됩니다만 일단 전체를 테스트 해보고 필요 모듈만 선택 하는 게 좋을 듯 싶습니다.


다운을 받고 압축을 풀면 위와 같은 파일들이 나오네요. 일단 모듈을 확인 하기 위해서 demos 폴더에 접속하여 가장 밑에 있는 index 페이지를 엽니다.


페이지를 열어보면 페이지 자체가 모바일 형식으로 구성 된 페이지가 열립니다.


탭 메뉴 중에 Pages 항목이 있습니다. Pages 항목에 접속해서 하단으로 조금 내려 가다 보면 모바일에서 사용되야 하는 기본 Html 형식이 있습니다.


<!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/[version]/jquery.mobile-[version].min.css" />
	<script src="http://code.jquery.com/jquery-[version].min.js"></script>
	<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>

<div data-role="page">

	<div data-role="header">
		<h1>Page Title</h1>
	</div><!-- /header -->

	<div role="main" class="ui-content">
		<p>Page content goes here.</p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

위 형식으로 페이지를 하나 만들어 보겠습니다.



기본 형식이 만들어 지네요.. 여기서 버튼 하나 추가 해보도록 해보겠습니다.


버튼 항목에 들어가서 사용방법을 확인 후에 적용해 보겠습니다.



위와 같이 필요한 부분이 있으면 데모화면에서 소스를 긁어 와서 사용하면 되겠습니다..

오늘은 여기까지 입니다.



댓글 0개가 달렸습니다.
댓글쓰기