jQuery Mobile을 이해하기 전에 jQuery가 무엇인지 알아야 한다.
웹브라우저에서 작동하는 클라이언트 프로그램을 만들 때 사용하는 자바스크립트 라이브러리 jQuery는... 웹브라우저에서 작동하는 클라이언트 프로그램을 만들 때 사용하는 자바스크립트 라이브러리 (즉, 자바스크립트의 함수 집합이라고 생각하면 됨) 기존 웹사이트에서 플래시가 하던 역할을 대체하는 용도로 많이 사용됨
예전에는 자바스크립트로 다양한 효과를 만들기가 쉽지 않았는데 jQuery를 이용하면 쉽게 효과를 구현할 수 있다.
이것을 모바일 환경에서도 사용할 수 있게 만든 것이 바로 jQuery Mobile
jQuery jQuery Mobile
차이점이 있다면... jQuery는 순수한 웹 환경을 그대로 이용 jQuery Mobile은 마치 모바일 앱처럼 보이도록 한다는 것
결국... jQuery Mobile을 이용한다는 것은 모바일 앱을 만든다는 것...
그럼... 모바일 앱을 만들 때 jQuery Mobile을 이용하는 이유는?
바로 이것... 하나만 만들어서 관리하면 된다는 것 네이티브 앱 jQuery Mobile 적합성 기기에 최적화된 앱 제작이 가능 최적화된 앱 작성에는 한계가 있음 이식성 다른 플랫폼에서 작동하는 앱을 만들기 위해 다른 언어로 새로 작성해야 함 여러 플랫폼이 HTML5와 CSS3를 지원하기 때문에 하나만 개발하면 됨 경제성 낮음 높음
jQuery Mobile은... 경제성의 원리에 충실한 도구 “Write less, Do more”를 목적 매우 쉽다는 장점이 있다.
[참고] 쉽지만 더 쉽게 하려면... HTML과 CSS를 알아두면 좋다
Hello World http://jquery.spaceii.com/sample.zip
프로그램코드 (교재 20쪽) CDN (교재18쪽) <!DOCTYPE html> <html> <head> <title>jQuery Mobile 실습...</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 src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> </body> </html> 프로그램코드 (교재 20쪽) CDN (교재18쪽)
다음 내용을 <body>~</body> 안에 작성하고, 자기학번.htm으로 저장한다. <section id="page1" data-role="page"> <header data-role="header"><h1>컴퓨터교육과</h1></header> <div class="content" data-role="content"> <p>첫 번째 페이지입니다.</p> <p><a href="#page2">두 번째 페이지를 보자~!</a></p> </div> <footer data-role="footer"><h1>교원대학교</h1></footer> </section> 하이퍼링크
확인해봅시다 저장된 파일을 더블 클릭
모바일로 확인? 그런데 내 컴퓨터에 있는 파일을 핸드폰으로 어떻게 확인?
서버가 필요 FTP주소 : jquery.spaceii.com 아이디 : jquery 비밀번호 : rydnjseo (교원대) 업로드 폴더 : public_html
모바일 접속 핸드폰을 꺼내고 http://hquery.spaceii.com/학번.htm
두 번째 페이지 제작 일반적인 웹에서는 한 페이지에 하나의 htm 파일을 사용 jQuery Mobile은 하나의 파일만 사용
다음 내용을 기존 파일에 추가하고 저장한다. <section id="page2" data-role="page"> <header data-role="header"><h1>컴퓨터교육과</h1></header> <div class="content" data-role="content"> <p>두 번째 페이지입니다.</p> <p><a href="javascript:history.go(-1);">컴백홈~!</a></p> </div> <footer data-role="footer"><h1>한국교원대학교</h1></footer> </section>
다시 모바일로 확인 슬라이딩 애니메이션 되면서 페이지 이동되는 것을 확인 이런 효과를 쉽게 구현해주는 것이 jQuery
뒤로가기 버튼 <section id="page2" data-role="page">에 교재 25쪽 뒤로가기 버튼 <section id="page2" data-role="page">에 data-add-back-btn=“true”를 추가
jQuery의 의미 다양한 효과로 작동될 준비가 이미 되어 있음 jQuery가 요구하는 기본 구조를 지키고 개체의 이름과 작동 방법만 알려주면 됨
20126698 황병욱 교원대학교 석사1년차 2012. 3. 14