2016. 3. 10. 15:26ㆍlanguage/jquery mobile
jquery mobile 는 모바일 웹 페이지를 만들때 아주 편리한 플러그인입니다.
기존에 jquery 를 해보신 분은 아주 쉽게 이해하실 수 있는 내용이고 기존에 jquery 는 pc용 홈페이지에 최적화가 되어있다면 jquery mobile는 모바일 디바이스에 최적화가 되어있다고 생각하시면 됩니다.
jquery mobile은 html5의 커스텀 데이터 속성을 사용합니다.
강좌를 보시기 전에...
이 강좌는 jquery mobile을 처음 접하시는 분들을 기준으로 자주 사용되는 부분들만을 설명하게 될 것입니다.
강좌의 목표는 모바일 웹을 완벽이 만드는 것이 아닌 모바일 웹에 사용되는 jquery mobile과 친해지는것, jquery mobile 을 사용할 때 꼭 알아야 하는 기본적인 부분을 완벽히 알고 지나가는 것입니다.
따라서 화려한 애니메이션 기능이나 커스텀 기능 또는 함수를 작성하여 복잡한 구조의 페이지를 만드는 방법은 설명하지 않습니다. 또한 본 내용은 http://api.jquerymobile.com 에 모두 있는 내용이며 버전은 1.4.5 기준임을 알려드립니다.
궁금한 점이나 화려한 기능을 찾고 싶다면 http://api.jquerymobile.com/ 에서 api보는 법도 익힐 겸 검색해서 찾아보면 아주 방대한 자료가 나오니 참고하시기 바랍니다.
이번 시간에는 jquery mobile를 사용할 준비와 직접 사용하여 페이지를 한번 눈으로 보는 것 까지 진행해 보겠습니다.
페이지를 직접 만들어 보는것이 이해에 빠르기 때문에 바로 진행하겠습니다.
일단 페이지를 만들기 전에 셋팅 파일들부터 수집합니다.
http://jquerymobile.com/download/
위 주소로 이동하여 빨간 네모칸에 있는 zip 파일을 다운받습니다.
해당 zip 파일에는 데모 파일들과 js 파일, css 파일 등이 모두 포함되어 있습니다.
데모파일은 궁금하신분들은 눌러보시면 됩니다 ㅎㅎ
다운받은 zip 파일은 압축 해제합니다.
그 다음 필요한 파일들을 복사합니다.
아래 파일은 압축 해제하면 바로 나오는 폴더에 있습니다.
아래 파일은 demos > js 폴더 아래에 있습니다.
3개의 파일을 실습할 페이지를 만들 폴더에 복사합니다.
(
실습할 폴더 "jqueryMobile실습" 이라는 폴더를 하나 만들고
그 안에 "jquery" 폴더, "jqueryMobile" 폴더를 각각 만듭니다.
그리고 jquery.js는 jquery 폴더 안에 복사하고 나머지 2개 파일은 jqueryMobile 폴더안에 복사합니다.
)
그리고 실습 폴더에 html 파일을 만듭니다.
필자는 jsp를 이용하여 작성합니다. 메모장에 하셔도 되고 기타 다른 편한 툴을 사용하여 html 파일을 만드시면 됩니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
이 3줄로 jquery mobile 을 사용할 준비가 끝난것입니다.
|
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script> |
cs |
그리고 section, header, footer 등 태그를 사용하여 마크업 합니다.
div를 사용하여 예전처럼 막 구겨넣을 수도 있는데 이 강좌가 끝날때 까지는 html5 방식으로 진행하도록 하겠습니다.
마크업에는 정해진 룰은 없지만 커스텀 태그 속성인 data-role 을 이용하여 역할을 인식합니다.
data-role은 page, header, content, footer 등의 값을 jquery mobile에서 인식합니다.
data-role이 들어가있는 곳을 꼭 확인하고 작성하시기 바랍니다.
위처럼 작성한 후 크롬이나 ie(필자는 ie11을 사용)로 실행하면 다음과 같은 화면이 나오면 성공입니다.
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1) (0) | 2016.03.15 |
| jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ] (0) | 2016.03.15 |
| jquery mobile 강좌 5 [ 페이지 이동 / changePage ] (15) | 2016.03.11 |
| jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ] (0) | 2016.03.11 |
| jquery mobile 강좌 3 [ 페이지 이벤트 / event ] (7) | 2016.03.11 |
| jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ] (8) | 2016.03.10 |