Download presentation
Presentation is loading. Please wait.
1
jQuery Mobile을 이해하기 전에 jQuery가 무엇인지 알아야 한다.
2
웹브라우저에서 작동하는 클라이언트 프로그램을 만들 때 사용하는 자바스크립트 라이브러리
jQuery는... 웹브라우저에서 작동하는 클라이언트 프로그램을 만들 때 사용하는 자바스크립트 라이브러리 (즉, 자바스크립트의 함수 집합이라고 생각하면 됨) 기존 웹사이트에서 플래시가 하던 역할을 대체하는 용도로 많이 사용됨
3
예전에는 자바스크립트로 다양한 효과를 만들기가 쉽지 않았는데
jQuery를 이용하면 쉽게 효과를 구현할 수 있다.
4
이것을 모바일 환경에서도 사용할 수 있게 만든 것이 바로 jQuery Mobile
5
jQuery jQuery Mobile
6
차이점이 있다면... jQuery는 순수한 웹 환경을 그대로 이용
jQuery Mobile은 마치 모바일 앱처럼 보이도록 한다는 것
7
결국... jQuery Mobile을 이용한다는 것은 모바일 앱을 만든다는 것...
8
그럼... 모바일 앱을 만들 때 jQuery Mobile을 이용하는 이유는?
9
바로 이것... 하나만 만들어서 관리하면 된다는 것 네이티브 앱 jQuery Mobile 적합성 기기에 최적화된 앱 제작이
가능 최적화된 앱 작성에는 한계가 있음 이식성 다른 플랫폼에서 작동하는 앱을 만들기 위해 다른 언어로 새로 작성해야 함 여러 플랫폼이 HTML5와 CSS3를 지원하기 때문에 하나만 개발하면 됨 경제성 낮음 높음
10
jQuery Mobile은... 경제성의 원리에 충실한 도구 “Write less, Do more”를 목적
매우 쉽다는 장점이 있다.
11
[참고] 쉽지만 더 쉽게 하려면... HTML과 CSS를 알아두면 좋다
![[참고] 쉽지만 더 쉽게 하려면... HTML과 CSS를 알아두면 좋다](http://slidesplayer.org/slide/14020827/86/images/11/%5B%EC%B0%B8%EA%B3%A0%5D+%EC%89%BD%EC%A7%80%EB%A7%8C+%EB%8D%94+%EC%89%BD%EA%B2%8C+%ED%95%98%EB%A0%A4%EB%A9%B4...+HTML%EA%B3%BC+CSS%EB%A5%BC+%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4+%EC%A2%8B%EB%8B%A4.jpg "[참고] 쉽지만 더 쉽게 하려면... HTML과 CSS를 알아두면 좋다")
12
Hello World http://jquery.spaceii.com/sample.zip
13
프로그램코드 (교재 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=" <script src=" <script src=" </head> <body> </body> </html> 프로그램코드 (교재 20쪽) CDN (교재18쪽)
14
다음 내용을 <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> 하이퍼링크
15
확인해봅시다 저장된 파일을 더블 클릭
16
모바일로 확인? 그런데 내 컴퓨터에 있는 파일을 핸드폰으로 어떻게 확인?
17
서버가 필요 FTP주소 : jquery.spaceii.com 아이디 : jquery 비밀번호 : rydnjseo (교원대)
업로드 폴더 : public_html
18
모바일 접속 핸드폰을 꺼내고 http://hquery.spaceii.com/학번.htm
19
두 번째 페이지 제작 일반적인 웹에서는 한 페이지에 하나의 htm 파일을 사용 jQuery Mobile은 하나의 파일만 사용
20
다음 내용을 기존 파일에 추가하고 저장한다. <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>
21
다시 모바일로 확인 슬라이딩 애니메이션 되면서 페이지 이동되는 것을 확인 이런 효과를 쉽게 구현해주는 것이 jQuery
22
뒤로가기 버튼 <section id="page2" data-role="page">에
교재 25쪽 뒤로가기 버튼 <section id="page2" data-role="page">에 data-add-back-btn=“true”를 추가
23
jQuery의 의미 다양한 효과로 작동될 준비가 이미 되어 있음 jQuery가 요구하는 기본 구조를 지키고
개체의 이름과 작동 방법만 알려주면 됨
24
황병욱 교원대학교 석사1년차
Similar presentations
