슬라이드 1

Transcription

1 Page l 1 1

2 Page l 2 2

3 모바일표준프레임워크구성 1. 개요 Page l 3 3

4 모바일표준프레임워크개요 1. 개요 12.06~ 모바일웹오픈소스업그레이드 (UX 컴포넌트 upgrade) Device API 구현 Device API 실행환경구축 Device API 12 종제공 표준패턴및가이드코드제공 Device API 개발환경구축 Device API 템플릿및프로젝트생성도구제공 Device API 가이드프로그램구축 Device API 별가이드프로그램제공 11.06~ 모바일표준프레임워크구축 ( 모바일웹 ) 모바일웹실행환경구축 모바일 UX 컴포넌트 ( 사용자경험지원기능 ) 모바일웹표준패턴및가이드코드제공 모바일웹개발환경구축 모바일웹템플릿및프로젝트생성도구제공 모바일웹공통컴포넌트구축 기존 30종모바일전환개발, 신규공통컴포넌트 10종구축 Page l 4 4

5 모바일 버전업데이트내역 1. 개요 jquerymobile 환경을기반으로모바일 UX컴포넌트및공통컴포넌트표준코드사용 jquery.js의 버전적용 jquery mobile의 버전적용 *collapsible Menu삭제되었습니다. *$.mobile.showpageloadingmsg $.mobile.loading( show ) 변경 *$.mobile.hidepageloadingmsg $.mobile.loading( hide ) 변경 Device API 폰갭 (Cordova) * 폰갭 적용 (Cordovalib v6.0.0, ios device v4.3.0, 안드로이드 device v5.1.1) * 안드로이드 Interface API 최신폰지원 * 아이폰 egovcommodule 64bit CPU 및 ios 10 지원 * iscroll 5 적용 Device API 가이드프로그램 10종추가 Page l 5 5

6 모바일어플리케이션의종류 2. 모바일어플리케이션 일반적인모바일어플리케이션의종류는모바일웹, 하이브리드앱, 네이티브앱등으로구분이 가능하다. 구분모바일웹모바일웹앱하이브리드앱네이티브앱 개요 일반웹기술개발 모바일브라우저에의해실행 모바일웹의한형 앱형태로 Wrapping 일반웹기술개발 네이티브앱기능활용 플랫폼에따른프로그래밍언어및 SDK 로개발 그래픽하하상상 앱스토어판매 불가능가능가능가능 매쉬업가능가능가능불가능 멀티플랫폼용이용이용이어려움 스토리지서버, 클라우드서버, 클라우드 Local, 서버, 클라우드 Local 디바이스제어 불가능불가능용이용이 Page l 6 6

7 모바일어플리케이션의종류 jquery mobile 2. 모바일어플리케이션 개요 모바일웹어플리케이션개발을위한자바스크립트프레임워크 각종 UI 컨트롤과이벤트처리, 애니메이션효과및자동내비게이션, Ajax 통신등모바일에최적화된기능제공 릴리즈버전 : 1.4.5( ) ( ) 특징 jquery 기반, Markup 기반 HTML5, CSS3지원, 다양한기기지원 점진적향상과적절한퇴보원칙준수 접근성향상, 경량의라이브러리, 다양한테마, 모바일에최적화된기능 라이선스 MIT, GPL 의듀얼라이선스 Page l 7 7

8 모바일어플리케이션의종류 Hybrid App Web App 2. 모바일어플리케이션 Native App Hybrid App Page l 8 8

9 클로스플랫폼앱프레임워크 2. 모바일어플리케이션 Native App 과 Web App 의각특성을모아 Hybrid App 등장 HTML5 Mobile Ui Framework jquery Mobile Sencha Touch Cross Platform App Framework PhoneGap (Cordova) Titanium Appspresso Hybrid App Web App HTML + CSS + JavaScript WebView JavaScript Framework Device API Native(iOS / Android) Page l 9 9

10 모바일어플리케이션예제 모바일웹 2. 모바일어플리케이션 10 Page l 10

11 모바일어플리케이션예제 모바일웹앱 2. 모바일어플리케이션 넷피스 e24.com BrowserQuest 모질라재단데모게임 est.mozilla.org/ BananaBread 모질라재단테스트프로젝트 kripken/bananabre ad Mini Paint m/viliusle/minip aint 클라우드서비스, 문서편집기, PT 편집기, 스프레드시트, 웹게임등등 11 Page l 11

12 모바일어플리케이션예제 하이브리드어플리케이션 2. 모바일어플리케이션 민원 24 - 아이폰, 안드로이드용 Hybrid 앱 - 건축물대장, 토지대장, 전입신고, 주민등록분실신고, 병적증명서등조회 Syrup - 쿠폰및티켓관리 - 적립카드관리 예비군 - 나의훈련정보조회 - 인터넷훈련신청 - 훈련연기 - 보류 / 해소 - 예비군훈련장안내 - 공지사항및뉴스제공 푸딩얼굴인식 - 촬영된인물사진으로나와닮은연예인들을찾아주는어플 * 폰갭샘플앱은폰갭 ( 코도바 ) 사이트에서각 OS 별로확인가능 12 Page l 12

13 모바일표준프레임워크개요 3. 전자정부모바일표준프레임워크구성 전자정부모바일표준프레임워크는모바일웹개발을위한실행환경, 개발환경, 공통컴포넌트 및하이브리드어플리케이션개발을위한실행환경, 개발환경, 가이드프로그램을제공한다. 전자정부표준프레임워크 3.6 모바일실행환경 모바일개발환경 모바일공통컴포넌트 전자정부표준프레임워크 3.5 업그레이드및경량화 실행환경 개발환경 공통컴포넌트 모바일웹 모바일표준프레임워크 모바일디바이스 API 모바일디바이스 API 실행환경 모바일디바이스 API 모바일개발환경 모바일디바이스 API 모바일공통컴포넌트 전자정부표준프레임워크 3.6 의구성개념 배치실행 배치개발 배치운영 13 Page l 13

14 모바일표준프레임워크구성 3. 전자정부모바일표준프레임워크구성 전자정부모바일표준프레임워크의상세구성은다음과같다. 구분환경설명 실행환경 모바일웹어플리케이션개발을위한 JS, CSS 등라이브러리제공 모바일사용자경험개발 - 일반스마트폰사용자들의디바이스터치기반의사용자경험기능제공 모바일웹 모바일공통컴포넌트 기존공통컴포넌트를모바일웹환경에적합하게전환 - 웹공통컴포넌트 250 종중게시판, 행사관리, 온라인참여등 모바일신규공통컴포넌트구축 - 위치정보연계등 HTML5 기술적용 개발환경 모바일웹개발을위한표준소스코드제공기능 웹표준적합성검증도구연계 모바일웹템플릿및사이트생성도구 - 유형별모바일사이트템플릿개발및코드를생성하는적용도구개발 실행환경 전자정부모바일하이브리드어플리케이션개발프레임워크라이브러리제공 - Open Source(PhoneGap) 적용 - 표준코드및하이브리드앱샘플템플릿제공 Device API 개발 디바이스 API 모바일디바이스 API 가이드프로그램 모바일하이브리드어플리케이션개발시가이드및재사용을위한디바이스 API 가이드프로그램제공 - 총 48 종의디바이스 API 가이드하이브리드앱개발 (ios 24 종, 안드로이드 24 종 ) - 디바이스 API 가이드하이브리드앱과통신을위한전자정부표준프레임워크기반웹서버어플리케이션개발 개발환경 플랫폼별하이브리드앱개발템플릿프로젝트생성플러그인구현 14 Page l 14

15 개요 4. HTML5 HTML5 란? HTML(Hyper Text Markup Language) 의최신버전. ( 현재가장널리사용되고있는버전은? HTML ) 라고는하지만 HTML5 라고불리는기술은실제로 HTML 과직접적인관계가없는 JavaScript API 를포함하는것이일반적임 HTML5 = HTML + JavaScript + CSS 오픈된표준을기반으로한웹어플리케이션구축플랫폼 - 멀티미디어및어플리케이션구축을위한기능강화 HTML5 이해결하려는웹의문제점 웹브라우저간호환성이낮음 문서내에포함된 의미 가불명확함. 웹어플리케이션기능이제한됨. 웹브라우저간호환성을높임! 문서내에포함된 의미 를명확하게함. Rich 한웹어플리케이션개발기능강화. HTML5 인가? 웹기술의진보, 시장의요구 모바일시장의확대 클로스플랫폼지원, 웹표준기술의강점 15 Page l 15

16 HTML5 역사 4. HTML5 HTML5 역사 HTML 1.0 팀버너스리 (CERN) 가개발및표준화제안 HTML HTML HTML HTML HTML 4.01 현재의 HTML XHTML 1.0 HTML + XML XHTML XHTML 2.0 WHATWG WHATWG 발족 (Web Hypertext Application Technology Working Group) W3C에서 HTML5 채택 HTML5 Last Call HTML5 Last Call Finish HTML5 표준안확정 ( W3C Recommendation ) 16 Page l 16

17 HTML5 범위 4. HTML5 웹표준기술을 HTML5 범위 HTML5 JavaScript API CSS3 etc DOM Web Storage Transition SVG HTML 문법 Web Socket Animation MathML windows object Indexed DB Transform WebGL 17 Page l 17

18 변경사항 4. HTML5 HTML5 변경사항 기본마크업변화 - <doctype> 정의, 문자인코딩변화 새로운태그추가 - <nav>, <section>, <article>, <aside> 등 새로운 Form 요소추가 - input type : range, calendar 등 웹브라우저멀티미디어요소지원 - <video>, <audio>, <canvas> 새로운 HTML5 JavaScript API 추가 - Canvas, Video, Web Storage, Geolocation API 등 18 Page l 18

19 기본마크업변화 4. HTML5 Less Header Code No need for type attribute < 이전버전 > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>foo</title> </head>... <script type= javascript src= foo.js > </script> <link rel= css href= foo.css ></link> <HTML5 버전 > <!DOCTYPE HTML> <html> <head> <meta charset= utf-8 > <title>foo</title> </head>... <script src= foo.js > </script> <link href= foo.css ></link> 19 Page l 19

20 Semantic Structure Elements 4. HTML5 HTML5 는시맨틱웹과나은문서구조를지향한다. More Semantic HTML tags Example <body> <h1>apples</h1> <p>apples are fruit.</p> <section> <h2>taste</h2> <p>they taste lovely.</p> <section> <h3>sweet</h3> <p>red apples are sweeter</p> </section> </section> <section> <h2>color</h2> <p>apples come in various colors.</p> </section> </body> 20 Page l 20

21 HTML5 = HTML + JS + CSS3 4. HTML5 ( 접속 우측하단 Download ZIP 클릭! 바탕화면저장및압축풀기 HTML5 파일실행 (Chrome 실행 ) < 다운로드화면 > < 압축풀기후화면 > < 실행화면 > 21 Page l 21

22 Form Input Types <input type= /> tel, datetime, search, date, , range, url, color Elements <output name="result"></output> <progress id="p" max=100><span>0</span>%</progress> Datalist, Keygen, Output, Progress, meta 4. HTML5 Attributes <input type= file multiple /> autocomplete, autofocus, list, multiple, pattern, placeholder, required 22 Page l 22

23 Media & Canvas Example 4. HTML5 HTML5 Canvas 란자바스크립트를이용하여웹페이지에동작인 2 비트맵이미지를그릴수있다 Media Tags <video src= cat.ogg /> <video src= cat.ogg controls /> <video controls/> <source src= cat.mp4 /> <source src= cat.ogg /> </video> <audio src= test.ogg ></audio> Canvas <canvas id= square > fallback content </canvas> <script> canvas = canvas.getelementbyid( square ); context = canvas.getcontext( 2d ); context.fillstyle = # ; con text.fillrect(0, 0, 100, 100); </script> <audio src= test.ogg autoplay controls loop> <a href= test.ogg >download</a> </audio> 웹그림판 : 23 Page l 23

24 Graphics & Multimedia 4. HTML5 HTML5는그래픽활용을위한 Canvas와동영상및오디오활용을위한 Audio & Video 가포함된다. Canvas ( 02/12/sketchpad/.) Video ( owcase/video/,) 24 Page l 24

25 JavaScript APIs 4. HTML5 JavaScript APIs Device API (Web-based) Realtime Communication - Web Workers : 비동기처리 - Web Socket : 실시간통신 - Server-send events : Push 기능 Geolocation ( pot.com/static/wher eami.html) Offline & Storage & Database - Local Storage : cookie의확장 - Web SQL Database & IndexedDB - Application Cache : offline 처리 Server-sent events Geolocation Drag & Drop API 25 Page l 25

26 JavaScript API 4. HTML5 Web Sockets Web Worker 브라우저와서버간에양방향 Socket 통신 var ws = new WebSocket("ws://hostname:80/"); ws.onmessage = function (event) { event.data }; ws.onclose = function () {}; ws.onopen = function () {}; Chatting 현재브라우저는하나의쓰레드로실행 JavaScript 를백그라운드에서실행시키는기술 JavaScript 이미지렌더링등에사용 new Worker("worker.js"); - terminate() - postmessage() - onmessage - onerror Messenger Server Push Client Browser 1 Server 80 Web Server WS Port WebSocket API 3 2 WebSocket Server 26 Page l 26

27 JavaScript API 4. HTML5 Web Storage 클라이언트의디스크에데이터를저장하는 API 도메인별관리, 세션단위관리 객체저장가능, 유효기간없음 비교적큰용량저장 sessionstorage.setitem(key, value); sessionstorage.getitem(key); localstorage.setitem(key, value); localstorage.key = value; localstorage[key] = value; localstorage.getitem(key); localstorage.key; localstorage[key]; Web SQL Database DB를사용할수있음 SQL 표준이슈 IndexedDB DB 생성및핸들링가능 JavaScript를통해사용 Application Cache Geolocation Geolocation Api는디바이스의위치정보를얻는 API Widow,navigation 객체로부터정보를얻음 27 Page l 27

28 CSS3? 4. HTML5 CSS 란? Cascading Style Sheet의최신버전. ( 현재가장널리사용되고있는버전은? CSS 2.1 ) 마크업언어가실제표시 ( 디자인 ) 되는방법을기술하는언어 W3C 표준 CSS 특징 화려한화면구성 다양한화면구성속성추가및 Animation 효과추가 CSS3의이미지대체 화려한폰트, 그라데이션효과, 테이블모서리의둥근효과 간결한소스코드 (CSS2.1 -> CSS3) 디바이스특징에따른화면구성 Media Query 가능 디바이스특징에따른화면구성가능 28 Page l 28

29 CSS 역사 4. HTML5 CSS 의역사 CSS1 Recommendation CSS2 Recommendation CSS2.1 Proposed Recommendation ~ CSS3 진행중 (2011년 ~2013년확장된정의에대한확정안존재 ) Working Drafts ( 초안 ) Working Drafts Last Call( 최종초안 ) Candidate Recommendation( 권고후보 ) Proposed Recommendation( 권고안 ) * 모질라재단자료 Recommendation( 권고 ) 29 Page l 29

30 CSS3? 4. HTML5 CSS3 에서 Animation, transition, transform, Web Font 등새로운기술이추가되었다 text-shadow, border-radius, box-shadow 등그래픽요소추가 Animation, transition, transform Web Fonts 사용 30 Page l 30

31 HTML5 지원현황 4. HTML5 HTML5 주요스팩지원브라우저 ios3+, Android2+, RIM OS6+, palm webos 1.4+, WM Q, IE9+, FF3+, Chrome6+, Safari4+, Opera10+ World Mobile Browser (2014 ~ 2017) Korea Mobile Browser (2014 ~ 2017) Chrome > Safari > UC Browser > Chrome > Samsung Internet > Safari > 참고사이트 31 Page l 31

32 HTML5 지원현황 4. HTML5 HTML5 지원현황 PC (Desktop) - IE 10버전이후지원 - Windows XP OS에서 IE 브라우저지원불가 (IE7~8 불가 ) : 크롬, 파이어폭스등다른브라우저는가능 - IE9이하지원불가 - 윈10 기본탑재 " 마이크로소프트엣지 : 브라우저자체적으로플래시와pdf 내장!! => 액티브X 사용불가 Mac OSX - 기본 Safari 브라우저기존지원 - 크롬, 파이어폭스등모두지원가능 Linux (Ubuntu 및 CentOS 등 ) - 크롬브라우저및파이어폭스브라우저기본지원 모바일 OS - ios 및안드로이드기본지원 - 플래시사용불가 ( 한정된자원 ) TV및기타 Embeded환경에서브라우저기반 : 현재사용중!! 윈도우 XP 에서 IE 7,8 버전불가 32 Page l 32

33 개요 5. 모바일웹 전자정부모바일표준프레임워크실행환경의사용자경험 (UX) 지원기능은스마트디바이스에서 의사용자터치기반화면처리기능, 개발도구및모바일 UX 컴포넌트를제공한다. 33 Page l 33

34 모바일웹구성 5. 모바일웹 모바일전자정부프레임워크의실행환경은 UX 레이어를통해이루어지며화면처리레이어및 업무처리레이어와의상호작용을통하여이루어진다. 구성요소 설명 Presentation Layer 업무프로그램과사용자간의 Interface 를담당하는 Layer 로서, 사용자화면구성, 사용자입력정보검증등의기 능을지원함 UX Layer 모바일웹애플리케이션적용시업무프로그램과사용자간의 interface 를담당하는 Layer 로서, UI/ UI Controller Component, JavaScript Module App Framework 등을지원함 Business Logic Layer 업무프로그램의업무로직을담당하는 Layer 로서, 업무흐름제어, 트랜잭션관리, 에러처리등의기능을지원함 Persistence Layer 업무프로그램에서사용하는데이터에대한 CRUD 기능을지원함 Integration Layer 타시스템과의연동기능을지원함 Foundation Layer 실행환경의각 Layer 에서공통적으로사용하는공통기능을지원함 34 Page l 34

35 디렉터리구조 (1/2) 5. 모바일웹 전자정부모바일표준프레임워크실행환경은기존전자정부표준프레임워크의디렉터리구조및 표준을준수하고있으며, 모바일웹개발을위해하위디렉터리구조를다음과같이구성하고있다. 프로젝트의하위폴더인 src 에실행환경을지원하는라이브러리및 JSP 파일이존재한다. 라이브러리는 CSS, JavaScript 및이미지파일로구성되어있다. 실행환경라이브러리 35 Page l 35

36 디렉터리구조 (2/2) 5. 모바일웹 전자정부모바일표준프레임워크는 CSS 및 JavaScript를이용하여실행환경을제공하며 CSS, javascript, image는각각유기적으로연결되어있다. 실행환경라이브러리구성 CSS JavaScript image Jquerymobile 에서제공하는 CSS 및표준프레임워크를통해커스터마이징된 CSS(EgovMobile) 를이용하여 UX 컴포넌트의색상, 배치, 테마등을정의 Jquerymobile 에서제공하는 javascipt 및표준프레임워크를통해커스터마이징된 javascipt(egovmobile) 를이용하여 jsp 및 css와의연동및화면전환, Ajax 통신등의기능제공 Jquerymobile 에서제공하는 image 및표준프레임워크를통해커스터마이징된 image를이용하여주로 icon 및무늬에대한이미지가정의 36 Page l 36

37 페이지구조 (1/5) 5. 모바일웹 모바일웹구현을위한페이지는 HTML5 표준을준수하고있으며, 화면구성을위한 JS 및 CSS 등을임포트하여작성된다. 전자정부모바일표준프레임워크실행환경을구성하기위해서는파일의 <head> 영역에관련라이브러리를적용한다. Header 영역 <!DOCTYPE html> <html> <head> <title>egovframe Mobile</title> <!-- egovframe Common import --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, userscalable=no"/> <link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile css" /> <link rel="stylesheet" href="/css/egovframework/mbl/cmm/egovmobile css" /> <script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery min.js"></script> <script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery.mobile min.js"></script> <script type="text/javascript" src="/js/egovframework/mbl/cmm/egovmobile js"></script> </head> <body>... </body> </html> 37 Page l 37

38 페이지구조 (2/5) 5. 모바일웹 <body> 영역은 data-role 속성에적용된값에따라 Page, Header, Content, Footer 영역으로구 분된다. Page 영역 data-role= page header 영역 data-role= header Header bar 는좌우에버 튼및헤더제목틀넣을수 있다. Page는 Header Footer bar 및 Content를포함하고있으며 Header /Footer bar와 Content 와달리반드시필요한요소이다. Page 컴포넌트의기능을이용하며 Page간전환을할수있다. content 영역 data-role= content footer 영역 data-role= footer Content는 UX Component를이용하여구성할수있다. Footer bar는브라우저하단에위치하며버튼, 탭, 링크등컴포넌트요소등을넣을수있다. 38 Page l 38

39 페이지구조 (3/5) 5. 모바일웹 각페이지단위의일반적인구조는다음과같이구분된다. Body 영역 실행화면 <!-- 모바일페이지 start --> <div data-role="page"> <!-- header start --> <div data-role="header"> <h1>header Title</h1> </div> <!-- header end --> <!-- content start --> <div data-role="content"> <p> 전자정부모바일표준프레임워크 Default Page 화면입니다.</p> </div> <!-- content end --> <!-- footer start --> <div data-role="footer > <h4>footer Title</h4> </div> <!-- footer end --> </div> <!-- 모바일페이지 end --> 39 Page l 39

40 페이지구조 (4/5) 5. 모바일웹 각페이지별로 Theme를적용하여해당페이지영역에공통색상적용이가능하다. Theme 기능을이용하여하위레벨의색상을변경할수있다. 테마변경최상위 Tag는 <data-role="page"> 이며변경시 page 하위의 Header, Footer, Panel, UX Component의색상이변한다. 테마를적용할최상위 div Tag에 data-theme="[a~g]" 를추가한다. 테마를적용할경우하위컴포넌트들의색상이일괄변형된다. 40 Page l 40

41 페이지구조 (5/5) 5. 모바일웹 Theme 는페이지뿐만아니라모든독립컴포넌트에적용이가능하다 상위컴포넌트와독립적으로하위컴포넌트에테마를지정할수있으며해당컴포넌트에 datatheme= [a~g] 속성을추가하여원하는테마를개별적으로적용할수있다. 41 Page l 41

42 모바일실행환경가이드 3.5 실습 5. 모바일웹 인터넷가능환경 표준프레임워크포탈제공 : 교육교재 Eclipse 실행 프로젝트 lab401-mobile-guide-3.5 실행 Run on Server Chrome 브라우저실행 42 Page l 42

43 페이지이동 (1/2) 5. 모바일웹 모바일페이지이동은기본적으로 Ajax 를이용하여처리된다. 이는모바일에최적화된화면전환효과를주기위함으로옵션설정을통해변경가능하다. 페이지내부이동 하나의 HTML 파일안에여러 page 가선언되어있는경우에사용할수있는방법으로모바일 page 구성의기본방식이다. 페이지내부이동은 Ajax 통신을사용하며 page 로선언된 div 태그의 id 값을링크의 href 속성값 (#pageid) 으로적용하여사용가능하다. ( 한 HTML 내에여러 page가선언되어있을경우제일상단의 page를첫화면으로인식한다.) 페이지내부이동은 Ajax 방식을기본으로하기때문에연속적으로여러번사용하면 DOM 객체를제대로못불러올경우가있으므로외부페이지이동으로권장한다. <!-- main page --> <div id="main" data-role="page"> <a href="#view" data-role="button"> 글쓰기 </a> <p>main Page 입니다.</p> </div> <!-- view page --> <div id="view" data-role="page"> <p> 상세보기페이지 </p> </div> 내부링크 <div id= main data-role= page > <a href= #view > <div id= view data-role= page > 43 Page l 43

44 페이지이동 (2/2) 5. 모바일웹 페이지외부이동 페이지외부이동은 Ajax 통신을이용하며 Ajax 로호출한 html 의 data-role= page 영역만읽어들여서호출한 html 페이지의 DOM 요소에추가해준다. ( 페이지내부이동과유사한구조로 DOM 관리 ) - Ajax 로호출된 HTML의 page 영역만가져오기때문에호출된페이지에서사용하는 JavaScript, CSS 등은호출을한 HTML내에존재해야한다. - Ajax 통신을사용하고싶지않은경우 Internal / External UX Component를참조하여변경가능하다. main.jsp <div id="main" data-role="page"> <a href="create.html" data-role="button"> 글쓰기 </a> <p>main Page 입니다.</p> </div> main.jsp 참조 <script> <link rel="stylesheet > <div id="main" data-role="page"> create.jsp <link rel="stylesheet > <div id="create data-role="page"> 참조 X create.jsp <div id="create" data-role="page"> <p> 글쓰기페이지 </p> </div> <a href= create.jsp > 페이지외부링크 44 Page l 44

45 API (1/7) 5. 모바일웹 pageinit 이벤트와기본환경설정 모바일어플리케이션이시작될때각종초기화작업이수행될수있도록 pageinit 이벤트를통하여기본환 경설정을변경할수있도록한다. pageinit 이벤트는 page가시작되자마자발생하는이벤트로첫번째초기화작업시실행되며, 함수내부에여러이벤트를적용하여사용할수있다. $(document).on("pageinit ", function(){ //apply overrides here }); pageinit 이벤트는실행즉시발생하므로 jquerymoible.js 가로드되기전에바인딩되어야한다. 다시말해 pageinit 이벤트의위치는 jquery 라이브러리와 jquerymobile 라이브러리사이에위치해야한다. <script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script> 45 Page l 45

46 API (2/7) 5. 모바일웹 pageinit 이벤트와기본환경설정 기본환경설정을변경하는방법에는 $.extend 메소드를이용하여여러속성을한번에변경하거나.mobile 객 체를사용하여개별적으로변경하는방법이있다. $.mobile 객체를통해재설정이가능한주요기본환경설정 : 기본환경설정 loadingmessage (string, default: "loading") pageloaderrormessage (string, default: "Error Loading Page") defaultdialogtransition (string, default: 'pop') defaultpagetransition (string, default: fade') ajaxenabled (boolean, default: true) 설명 페이지가로딩될때나타나는텍스트를설정한다. false 로설정하면로딩메시지가나타나지않는다. Ajax 방식의페이지이동에서페이지를로드하지못했을경우나타나는에러메시지의텍스트를설정한다. 다이얼로그에서 Ajax 방식을통한페이지전환에관여하는기본환경설정을변경한다. defaultdialogtransition 옵션을 none 으로설정하면화면전환효과가적용되지않는다. Ajax 방식을사용하는페이지전환에관여하는기본환경설정을변경한다. defaultpagetransition 옵션을 none 으로설정하면화면전환효과가적용되지않는다. 모든링크이동이나폼전송은기본적으로 Ajax 방식을기반으로하고있다. Ajax 가아니라일반방식으로페이지이동을처리하고싶다면이값을 false 로지정한다. 46 Page l 46

47 API (3/7) 5. 모바일웹 이벤트 전자정부모바일표준프레임워크는스마트기반모바일환경에적합한이벤트를선별하여제공한다. Touch, Mouse, Window 영역의다양한이벤트를지원가능여부에따라선택적으로이용하기때문에모바일환경과데스크톱 (Desktop) 환경모두에서사용가능하다. live() 또는 bind() 메소드를이용하여여러이벤트를함께사용할수있다. 지원터치이벤트 : 터치이벤트 설명 tap Touch 가감지되면즉시발생하는이벤트이다. taphold tap을일정시간이상지속했을때발생하는이벤트이다. swipe 30pixel 이상의수평방향이나 20pixel 이상의수직방향으로드래그 (drag) 되면발생하는이벤트이다. swipeleft swipe 이벤트가왼쪽으로일어났을때발생하는이벤트이다. swiperight swipe 이벤트가오른쪽으로일어났을때발생하는이벤트이다. 47 Page l 47

48 API (4/7) 5. 모바일웹 이벤트 지원화면방향전환및스크롤이벤트 : 화면방향전환및스크롤이벤트 orientationchange scrollstart 설명 기기의방향이수평또는수직으로바뀌었을때발생하는이벤트이다. orientationchange 이벤트가지원되지않을경우에는 resize 이벤트가자동으로 bind 된다. 스크롤 (scroll) 이시작되면발생하는이벤트이다. (ios 기기는스크롤중에는 DOM 을변경하지않고 queue 에저장해두었다가스크롤이끝난후에변경한다.) scrollstop 스크롤이끝나면발생하는이벤트이다. 지원페이지이벤트 : 페이지이벤트 pagebeforecreate 설명 페이지가초기화되기직전에발생하며페이지로딩시가장먼저발생하는이벤트이다. 페이지생성시에만이벤트가발생한다. pagecreate 페이지초기화가끝나면발생하는이벤트이다. 페이지생성이완료된시점에만이벤트가발생한다. pagebeforeshow 화면전환이일어나기전, 즉페이지가보여지기전에매번발생하는이벤트이다. pageshow 화면전환이완료되었거나페이지가보여진후에매번발생하는이벤트이다. pagebeforehide 화면전환이일어나기전, 즉페이지가숨겨지기전에매번발생하는이벤트이다. pagehide 화면전환이완료되었거나페이지가가려진후에매번발생하는이벤트이다. 48 Page l 48

49 API (5/7) 5. 모바일웹 이벤트 페이지이벤트 설명 pagebeforeload 페이지로딩이일어나기전에발생하는이벤트이다. pageload 페이지로딩이성공한경우 (DOM에정상적으로통합된경우 ) 에발생하는이벤트이다. pageloadfailed 페이지로딩이실패한경우 (DOM에정상적으로통합되지못한경우 ) 에발생하는이벤트이다. pagebeforechange 대상페이지로이동하는애니메이션이보여지기전에발생하는이벤트이다. pagechange 대상페이지가정상적으로로딩된후에애니메이션을포함한페이지이동까지정상적으로완료된경우발생하는이벤트이다. pagechangefailed 대상페이지를로딩하지못했거나페이지이동이정상적으로완료되지않았을때발생하는이벤트이다. pageinit pageremove 페이지초기화가완료된이후 (DOM 객체가생성된후모든요소들의스타일이적용된이후 ) 에발생하는이벤트이다. 페이지의링크태그에 external-page= true 속성을추가함으로서, 외부페이지로이동후다시돌아올때외부페이지가제거되면서이벤트가발생한다. 49 Page l 49

50 API (6/7) 5. 모바일웹 이벤트 Virtual Mouse event Virtual Mouse 이벤트 설명 vmouseover 터치이벤트또는 mouseover가발생할때나타나는이벤트이다. vmousedown 터치이벤트또는 mousedown이발생할때나타나는이벤트이다. vmousemove 터치이벤트또는 mousemove가발생할때나타나는이벤트이다. vmouseup 터치이벤트또는 mouseup이발생할때나타나는이벤트이다. vclick 터치이벤트또는 click이발생할때나타나는이벤트이다. vmousecancel 터치이벤트또는 mousecancel가발생할때나타나는이벤트이다.. vmouseout 터치이벤트또는 mouseout이발생할때나타나는이벤트이다. 50 Page l 50

51 API (7/7) 5. 모바일웹 메소드 & 유틸리티 전자정부모바일표준프레임워크는 $.mobile 객체에대한메소드와속성들 (properties) 을제공한다. $.mobile 객체는페이지정보를제공하거나, 페이지전환을제어하는것이주요한기능이고, 페이지제어또는스크롤제어등의방법을제공한다. 주요메소드 : 메소드 $.mobile.changepage (method) $.mobile.loadpage (method) $.mobile.showpageloadingmsg () -> $.mobile.loading( show ) 변경 $.mobile.hidepageloadingmsg () ->$.mobile.loading( hide ) 설명 프로그램코드상에서페이지를이동할수있도록지원하는메소드이다. 주로화면전환, 페이지로딩등의기능이가능한환경에서링크클릭이나폼전송을할때내부적으로사용된다. 외부페이지를로드하고,DOM 에추가한다. 이메소드는첫번째인자로 URL 이올때 changepage() 함수를통해내부적으로호출된다. 이함수는현재활성화된페이지에는영향을주지않고, 백그라운드에서페이지를로드할때사용된다. 페이지로딩메시지를보여준다. 페이지로딩메시지를숨긴다. 51 Page l 51

52 모바일공통컴포넌트 5. 모바일웹 모바일신규공통컴포넌트 10 종 모바일정보시스템구축시공통활용및재사용이가능하도록화면, DB, 로직등을포함한 기능위주의 10 종을구현 구분 공통컴포넌트 실시간공지서비스 동기화서비스 모바일 신규공통컴포넌트 (10 종 ) 협업 시스템 / 서비스연계 디지털자산관리 오프라인웹서비스모바일기기식별위치정보연계 OPEN-API 연계서비스 MMS 서비스연계모바일차트 / 그래프모바일사진앨범멀티미디어제어 52 Page l 52

53 모바일공통컴포넌트 5. 모바일웹 모바일전환공통컴포넌트 30 종 모바일정보시스템구축시공통활용및재사용이가능하도록화면, DB, 로직등을포함한 기능위주의 30 종을구현 구분 공통컴포넌트 사용자디렉토리 / 통합인증 (1종) 사용자통합인증 일반로그인 게시판 게시판, 공지사항, 유효게시판, 익명게시판, 댓글, 스크랩기능 모바일 전환컴포넌트 협업 (14 종 ) 동호회일정관리주소록 / 명함록 커뮤니티, 커뮤니티방명록, 커뮤니티사진첩부서일정관리, 일정관리, 일지관리, 전체일정주소록 (30 종 ) 약관관리 약관관리 온라인참여 상담관리, 설문조사, 온라인 POLL 사용자지원 (15 종 ) 온라인헬프 도움말, 용어사전, FAQ, Q&A, 행정전문용어사전, 온라인매뉴얼 정보제공 / 알림 뉴스, 사이트맵, 추천사이트, 행사 / 이벤트 / 캠페인 개인화 마이페이지 53 Page l 53

54 개요 6. UX Component UX Component 개요 NO. UX Component 설명 1 Button 명령수행, 옵션선택, 다른대화상자열기등에사용하는컴포넌트제공 2 Panel Header/Footer 와함께페이지를구성하는요소 3 Panel Widget 메뉴또는 collapsible columns 을쉽게만들수있게제공되는요소 4 Internal / External Link 표준링크기능을제공하며기본적으로 Ajax 를사용한링크방식제공 5 Label / Text 글꼴, 색상, 배치를지정할수있는가이드제공 6 Tabs Header와 Footer 에사용되며탭버튼으로문서간이동기능제공 7 Form HTML Form 요소를모바일환경에최적화하여제공 8 Menu Dialog, Grid, List, Collapsible 컴포넌트를사용하여메뉴구성기능제공 9 Loader Widget 페이지전환간진행상태를확인할수있는 Loader Widget 제공 10 Dialog 사용자와상호작용할수있는 Dialog 기능을제공 11 Grid View Grid 형태로콘텐츠를배치할수있는컴포넌트제공 12 Table / List View Table 형태로콘텐츠를배치할수있는컴포넌트제공 13 Check / Radio Check / Radio 형태로항목을선택할수있는기능을제공 14 Icon 모바일어플리케이션에가장많이사용되는아이콘을제공 15 Selector / Switch Selector / Switch 형태로항목을선택할수있는기능을제공 16 Collapsible Block 콘텐츠영역을접었다펼수있는컨트롤기능제공 17 Popup Widget DIV 영역으로작성된팝업컨텐츠를팝업형태로출력할수있는기능을제공 54 Page l 54

55 Button 6. UX Component 버튼은핵심적인위젯으로서여러플러그인에서광범위하게사용된다. Anchor 링크에 data-role="button" 속성을추가하면전자정부모바일표준프레임워크에서제공하는버튼의스타일을적용할수있다. 기본코드 <a href="#" data-role="button">button</a> 컴포넌트제공기능그래픽레이아웃 설명 형태 (2 종 ) 명령수행, 옵션선택, 다른대화상자열기등에사용하는컴포넌트제공 둥근형 (radius: 16px), 사각형 (radius: 0px) 배치 (2 종 ) vertical group, horizontal group Button 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 높이 (2 종 ) normal(39px), small (28px) 넓이 (2 종 ) 화면에맞게, 텍스트에맞게 그림자 (2 종 ) 포함, 미포함 55 Page l 55

56 Panel 6. UX Component Panel은 Header/Footer bar와함께페이지를구성하는요소이다. Panel의기본코드는 <div class="ui-body-[a~g]"> 를사용하며 a~g는 Panel 의색상변경을지원한다. 기본코드 <div class="ui-body-c center"><h4>panel</h4></div> 컴포넌트제공기능그래픽레이아웃 설명 Header/footer 와함께페이지를구성하는요소 Panel 무늬 격자형태무늬제공 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 56 Page l 56

57 Panel Widget 6. UX Component Panels widget은 data-role="panel 로정의된영역을페이지내에서호출하여쉽게메뉴또는 Collapsible 영역등을구성할수있도록해주는요소이다 기본코드 <div data-role="page"> <div role="main" class="ui-content"> <a href="#defaultpanel" data-role="button" data-inline="true" data-icon="bars"> Default panel</a> </div> <div data-role="panel" id="mypanel"> <!-- panel content goes here --> <h3>default panel example</h3> <a href="#demo-links" data-rel="close" data-role="button" data-theme="a" data-icon="delete" data-inline="true">close panel</a> </div> </div><!-- page --> 57 Page l 57

58 Internal / External Link 6. UX Component 전자정부모바일표준프레임워크는 HTML의모든표준링크를지원하며기본적으로 Ajax 방식을이용하여페이지를전환한다. HTML의 Anchor 태그를이용하여링크기능을사용할수있다. 기본코드 <a href="#two"> 페이지내부링크 </a> <a href="/guide/guide.do"> 도메인내부링크 </a> <a href=" 외부링크 </a> 컴포넌트제공기능그래픽레이아웃 Internal/ External Link 설명 링크 (6 종 ) 표준링크기능을제공하며기본적으로 Ajax 를사용한링크방식제공 Page link internal, Domain link internal, Link external, links, Phone links, Error page 58 Page l 58

59 Label / Text 6. UX Component Label / Text 는 HTML 의 <h1>, <p> Tag 를사용하며 CSS 정의하여색상, 배치, 크기, 폰트를변경하여사용할수있다. 기본코드 <div class="egov-color-green">this paragraph is in green.</div> <div class="egov-font-size25">this paragraph is in size 25px.</div> <div class="egov-font-tahoma">this paragraph is in tahoma.</div> <div class="egov-align-right">this paragraph is right alignment.</div> 컴포넌트제공기능그래픽레이아웃 Label / Text 설명 글꼴, 색상, 배치, 폰트를지정할수있는가이드제공 59 Page l 59

60 Tabs 6. UX Component 탭은버튼이수평으로나열된형태로모바일환경에최적화된내비게이션 UI를제공한다. data-role="navbar" 를이용하여내비게이션기능을사용하며 ui-btn-active 클래스값으로활성화된탭을나타낼수있다. 기본코드 <div data-role="navbar"> <ul><li><a href="#" class="ui-btn-active">one</a></li> <li><a href="#">two</a></li></ul> </div> 컴포넌트제공기능그래픽레이아웃 설명 Header 와 footer 에사용되며탭버튼으로문서간이동기능제공 형태 (2 종 ) round tab(radius: 40x), normal tab(radius: 0px) Tabs 배치 (6 종 ) 1, 1/2, 1/3, 1/4, 1/5, ½ 다중행 tab 색상 (7 종 ) 아이콘위치 (4 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 상, 하, 좌, 우 60 Page l 60

61 Form 6. UX Component HTML의모든폼요소를모바일환경에최적화된 UI로제공한다. 폼을사용할때는여러페이지가하나의 DOM 에속할수있으므로 id 속성을사이트범위에서유일한값으로지정해야한다. 전자정부모바일표준프레임워크를이용하여폼을생성하면레이블및폼구성요소가화면의너비에맞게자동으로배열된다. 폼요소배열의구성을향상시키려면 <div data-role="fieldcontain"> Tag 내부에레이블및폼요소를포함시킨다. 컴포넌트제공기능그래픽레이아웃 설명 Html form 요소를모바일환경에최적화하여제공 Form 요소 (7 종 ) Text inputs, Search inputs, Sliders, Switches, Radio buttons, Check boxes, Selectors 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 61 Page l 61

62 Menu 6. UX Component 모바일 Page 의메뉴기능은 Dialog, Grid, List, Collapsible 의기능을활용하여구현할수있다. 링크에 data-rel="dialog" 및 data-transition="slide, slidedown, slideup, fade, flip, turn, flow, slidefade" 속성을추가하여다이얼로그의효과적인표출효과를사용할수있다. 컴포넌트제공기능그래픽레이아웃 설명 Dialog, Grid, List, Collapsible 컴포넌트를사용하여메뉴구성기능제공 효과 (9 종 ) slide, slideup, slidedown, pop, fade, flip, turn, flow, slidefade Menu 형태 (4 종 ) Dialog, Grid, List, Collapsible 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 62 Page l 62

63 Loader Widget 6. UX Component Loader Widget은모바일 Page 전환시진행상태를표시해주는역할을한다. Loader Widget은 Ajax 통신을이용할경우 Default 로나타난다. Progress Bar 는 Ajax 통신을이용할경우나타나고설정을통해 Default 로사용가능하다. pageinit 이벤트에 $.mobile.loader.prototype.options 관련속성을추가하면 Loader Widget을적용할수있다. 컴포넌트제공기능그래픽레이아웃 설명 페이지전환간진행상태를확인할수있는 Loader Widget 제공 Loader Widget 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 63 Page l 63

64 Dialog 6. UX Component 다이얼로그를새창으로전환할경우팝업효과등으로나타낼수있으며 Anchor Tag에 datarel="dialog" 를추가하면기본다이얼로그효과가나타난다. 기타 Dialog는자바스크립트를이용하여 Alert, Confirm 등의창을띄운다. <input id="overlay_dialog" type="button" value="overlay" /> 컴포넌트제공기능그래픽레이아웃 설명 사용자와상호작용할수있는 Dialog 기능을제공 Dialog 형태 (6 종 ) Dialog, Action Sheet, Overlay, Alert, Prompt, Confirm 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 64 Page l 64

65 Grid View 6. UX Component Grid View는 UX Component를같은넓이, 같은행으로나타낼때사용되며 Grid View 안에컴포넌트를넣어나란하게배열할수있다. Grid 속성으로칼럼 (column) 수를지정하고 Block 속성으로내부의셀을지정한다. 기본코드 <div class="ui-grid-a"> </div> <div class="ui-block-a">block A</div> <div class="ui-block-b">block B</div> 컴포넌트제공기능그래픽레이아웃 설명 Grid 형태로콘텐츠를배치할수있는컴포넌트제공 Grid View 배치 (5 종 ) 1/2, 1/3, 1/4, 1/5, 가변 Grid View 65 Page l 65

66 Table / List View 6. UX Component 전자정부모바일표준프레임워크를통해생성된리스트는모바일환경에최적화된형태로제공된다. 리스트 Tag(ol, ul) 에 data-role= listview 속성을추가하면전자정부모바일표준프레임워크에서제공하는리스트를생성할수있다. 기본코드 <ul data-role="listview" data-inset="true"> </ul> <li>list Item 1</li><li>List Item 2</li> 컴포넌트제공기능그래픽레이아웃 설명 Table 형태로콘텐츠를배치할수있는컴포넌트제공 Table / List View 형태 (2 종 ) 기능 (11 종 ) Read-only list, Link list Nested List, Numbered List, Split Button, List Divider, Count Bubble, Thumbnail, List icon, Content Formatting, Search Filter Bar, Change Mode List, Checked List 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 66 Page l 66

67 Check / Radio 6. UX Component 체크박스는하나이상의항목을선택할수있는기능을제공한다 체크박스를세로로정렬하기위해서는 <fieldset data-role="controlgroup"> 으로체크박스를감 싸주어야한다. 기본코드 <fieldset data-role="controlgroup"> <legend> 취미선택 :</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1 /> <label for="checkbox-1"> 음악감상 </label> <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked"/> <label for="checkbox-2"> 영화감상 </label> </fieldset> 컴포넌트제공기능그래픽레이아웃 설명 Check/Radio 형태로항목을선택할수있는기능을제공 Check / Radio 배치 (2 종 ) vertical group, horizontal group 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 67 Page l 67

68 Check / Radio 6. UX Component 라디오버튼은여러개의항목에서하나를선택할수있는기능을제공한다. 라디오버튼을사용할경우 <input type="radio"> 의 name 속성이동일해야하며세로로정렬하기 위해서는 <fieldset data-role="controlgroup"> 으로라디오버튼을감싸주어야한다. 기본코드 <fieldset data-role="controlgroup"> <legend> 동의여부 : </legend> <input type="radio" name="radio-1" id="radio-1" value="choice-1" checked="checked" /> <label for="radio-1"> 동의합니다.</label> <input type="radio" name="radio-1" id="radio-2" value="choice-2" /> <label for="radio-2"> 동의하지않습니다.</label> </fieldset> 컴포넌트제공기능그래픽레이아웃 Check / Radio 설명 배치 (2 종 ) Check/Radio 형태로항목을선택할수있는기능을제공 vertical group, horizontal group 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 68 Page l 68

69 Icon 6. UX Component 전자정부모바일표준프레임워크실행환경은모바일어플리케이션에가장많이사용되는아이콘을선별하여제공한다. 기본으로제공되는아이콘은흰색의아이콘모양과반투명의검은원형배경으로이루어져있어어떤배경색과도대비를이룰수있다. data-icon 속성값으로생성할아이콘이름을지정하여아이콘을추가한다. <a href="#" data-role="button" data-icon="home">home</a> 컴포넌트제공기능그래픽레이아웃 설명 모바일어플리케이션에가장많이사용되는아이콘을제공 Icon 형태 (26 종 ) arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, search, home, phone, mail, gps, audio, camera, file, mic, explorer 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 69 Page l 69

70 Selector / Switch 6. UX Component Selector의기본형식은 OS의 Selector 메뉴형식에따라다르게나타난다. 또한팝업형으로펼침방식을변경할수있으며 <option> 의개수에따라자동적으로형태를바꿔준다. Selector를 <label> 과같은행으로나타내고싶을때는 <fieldcontain> 으로 <label> 과 <select> 를감싸야하며 <label> for 속성과 <selector> 의 id 속성의값이동일해야한다. 기본코드 <label for="select-choice-1" class="select"> 선택하시오 :</label> <select name="select-choice-1" id="select-choice-1"> <option value="apple"> 사과 </option> <option value="banana"> 바나나 </option> </select></fieldset> 컴포넌트제공기능그래픽레이아웃 Selector / Switch 설명효과 (2종) 기능 (2종) 모양 (2종) 넒이 (2종) Selector/Switch 형태로항목을선택할수있는기능을제공 pop-up, list 다중선택, 단일선택 둥근형 (radius: 1em) 사각형 (radius: 0em) 화면에맞게, 텍스트에맞게 70 Page l 70

71 Selector / Switch 6. UX Component Switch는이진형식을따르며좌우로선택하도록되어있다. Switch를 <label> 과같은행으로나타내고싶을때는 <fieldcontain> 으로 <label> 과 <slider> 를감싸야하며 <label> 의 for 속성과 <slider> 의 id 속성값이동일해야한다. 기본코드 <label for="slider"> 선택하시오 :</label> <select name="slider" id="slider" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> 컴포넌트제공기능그래픽레이아웃 설명 Selector/Switch 형태로항목을선택할수있는기능을제공 Selector / Switch 효과 (2 종 ) 형태 (2 종 ) Shadow 적용 Shadow 제거 비그룹, 그룹 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 71 Page l 71

72 Collapsible Block 6. UX Component Collapsible Block는콘텐츠영역을접었다펼수있는컨트롤기능을제공한다. Collapsible Block 를그룹형태로나타내고싶을경우는 <div data-role="collapsible-set"> 으로영역을감싼다. 기본코드 <div data-role="collapsible" data-theme="b"> <h3>data-theme="b" collapsible header</h3> <p>data-theme="b" collapsible header content</p> </div> 컴포넌트제공기능그래픽레이아웃 Collapsi ble Block 설명 형태 (3 종 ) 콘텐츠영역을접었다펼수있는컨트롤기능제공 Normal, Group, Nested 색상 (7 종 ) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록 72 Page l 72

73 Popup Widget 6. UX Component data-role="popup 을추가하면 div 영역으로정의된내용이팝업형태로출력된다. a href 링크에서 data-rel="popup 을추가한후 data-role="popup 으로정의된 div 의 id를호출하면팝업형태로해당내용을출력할수있다. 기본코드 <div data-role="page" id="page1"> <a href="#popupbasic" data-rel="popup">popup Widget</a> <div data-role="popup" id="popupbasic"> <p>this Popup Example.</p> </div> </div> component Provided functionality Graphic Layout Collapsible Block Explanation Form(5) color (7) content area collapsible control Function provides Tooltip, Menu, Form, Dialog, Photo Black, blue, gray, white, yellow, red, green 73 Page l 73