CHAPTER 01 모바일 웹 개발 프레임워크 ... 16 Step 01 모바일 웹앱(Web App) ... 18 1. 모바일 애플리케이션의 종류 ... 18 2. 모바일 애플리케이션의 종류에 따른 특징 ... 20 3. 원 소스 멀티 플랫폼의 실현! Web App (＋Hybrid) ... 21 Step 02 모바일 웹 개발 프레임워크 소개 ... 25 1. 모바일 웹 개발 프레임워크란? ... 25 2. 주요 모바일 웹 개발 프레임워크 ... 26 3. 세 가지 프레임워크 선정 기준 및 비교 ... 28 Step 03 차세대 웹 표준 HTML5 ... 31 1. HTML5란? ... 31 2. 프레임워크에 접목된 HTML5 ... 33 3. Geolocation ... 34 4. Web Storage ... 36 5. Application Cache ... 39 6. Video＆Audio ... 43 7. 향상된 웹 양식(Web Form) ... 45 Step 04 학습 선행 가이드 ... 49 1. 원리보다는 현상 위주 ... 49 2. 버전 선 긋기 ... 50 3. 프레임워크? 라이브러리? ... 51 4. 개발 도구 및 테스트 환경 ... 52 5. 웹 서버 준비 ... 57 6. 프레임워크의 한글 지원 ... 57 7. 대상 독자 ... 59 8. 최소화 버전 파일 ... 60 9. jQuery＆ExtJS ... 61 10. JSON ... 62 11. 소스 코드에 관해 ... 62 CHAPTER 02 jQTouch ... 64 Step 01 jQTouch 개요 ... 66 1. jQTouch 소개 ... 66 2. jQTouch 특징 ... 67 3. jQTouch 버전 ... 69 4. jQTouch＆Sencha ... 70 5. 라이선스 ... 72 6. 지원 기기 ... 72 Step 02 jQTouch 시작하기 ... 73 1. 개발 환경 구성 ... 73 2. jQTouch의 구성 ... 74 3. Hello World로 시작하기 ... 78 Step 03 jQTouch 테마 ... 84 1. apple 테마 ... 84 2. jqt 테마 ... 85 3. 테마 확장 ... 85 Step 04 jQTouch 사용자 인터페이스 ... 89 1. 툴바 ... 90 2. 리스트 ... 90 3. 버튼 ... 97 4. 폼 ... 99 5. jQTouch UI 컨트롤 모음 ... 101 Step 05 jQTouch 페이지 이동과 효과 ... 105 1. 내부 링크 페이지 이동 ... 105 2. 외부 링크 페이지 이동 ... 106 3. 외부 사이트 이동 및 타깃 옵션 ... 108 4. Back 버튼 ... 109 5. 페이지 이벤트 ... 110 6. 페이지 이동 효과(애니메이션 효과) ... 113 Step 06 jQTouch Ajax 상호작용 ... 117 1. GET 요청 ... 117 2. POST 요청 ... 122 3. Ajax 콜백 이벤트 ... 126 Step 07 jQTouch Extensions ... 129 1. jQTouch 확장하기 ... 129 2. Auto Titles ... 130 3. Floaty Bar ... 131 4. Offline Utility ... 132 5. Geo Location ... 132 Step 08 jQTouch Demos ... 134 1. Clock app ... 134 2. To-Do app ... 145 CHAPTER 03 jQuery Mobile ... 154 Step 01 jQuery Mobile 개요 ... 156 1. jQuery Mobile 소개 ... 156 2. jQuery Mobile 특징 ... 157 3. 지원 기기 ... 159 4. 라이선스 ... 160 5. 관련 URL ... 161 Step 02 jQuery Mobile 시작하기 ... 163 1. 개발 환경 구성 ... 163 2. jQuery Mobile 구성 살펴보기 ... 164 3. 데모 및 라이브러리 설명서 ... 165 4. jQuery Mobile 개발을 위한 기본 사항 ... 166 5. Hello World로 시작하기 ... 169 Step 03 jQuery Mobile 테마 ... 171 1. jQuery Mobile 테마 특징 ... 171 2. jQuery Mobile 테마 적용 ... 174 3. 사용자 정의 테마 ... 179 4. 동적 테마 변경 ... 181 Step 04 jQuery Mobile 사용자 인터페이스 ... 184 1. Page, Header, Content, Footer ... 184 2. 툴 바 ... 184 3. 아이콘 ... 188 4. 버튼 ... 191 5. 리스트 ... 194 6. 그리드 레이아웃 ... 204 7. 폼 ... 207 8. Collapsible 블록 ... 214 9. data-* 속성 ... 216 Step 05 jQuery Mobile 페이지 이동과 효과 ... 218 1. jQuery Mobile 기본 페이지 구조 ... 218 2. 내부 링크 페이지 이동 ... 219 3. 외부 링크 페이지 이동 ... 221 4. 외부 사이트 이동 및 링크 옵션 ... 223 5. 기능 링크 ... 223 6. Back 버튼과 대화창 ... 224 7. 페이지 이동 API ... 226 8. 페이지 이동 애니메이션 효과 ... 227 Step 06 jQuery Mobile Ajax 상호작용 ... 229 1. GET 요청 ... 229 2. POST 요청 ... 235 Step 07 jQuery Mobile 이벤트 ... 240 1. mobileinit 이벤트와 기본 설정 변경 ... 240 2. 페이지 이벤트 ... 244 3. 터치 이벤트 ... 250 4. 스크롤＆화면 방향 전환 이벤트 ... 253 Step 08 jQuery Mobile 데모 ... 256 1. YQL을 이용한 플리커 이미지 검색 ... 256 2. 실제 이미지 URL ... 258 3. 검색 결과 정렬 ... 260 4. 이미지 검색 애플리케이션 개발 ... 260 CHAPTER 04 Sencha Touch ... 270 Step 01 Sencha Touch 개요 ... 272 1. Sencha Touch 소개 ... 272 2. Sencha Touch 특징 ... 274 3. 라이선스 ... 276 4. 지원 기기 ... 277 Step 02 Sencha Touch 시작하기 ... 278 1. 개발환경 구성 ... 278 2. Sencha Touch 구성 ... 279 3. Hello World로 시작하기 ... 284 4. Ext setup VS Ext Applicatoin ... 288 5. Sencha Touch 실습을 위한 파일 구조 ... 289 Step 03 Sencha Touch 테마 ... 290 1. Sass ... 290 2. Compass ... 292 3. Sass＆Compass 설치 ... 293 4. Sencha Touch 테마 관련 파일 ... 293 5. Sencha Touch 테마 커스터마이징 ... 295 Step 04 Sencha Touch 사용자 인터페이스 ... 298 1. UI 컴포넌트 ... 298 2. 패널(Ext Panel) ... 299 3. 탭 패널(Ext TabPanel) ... 311 4. 회전목마(Ext Carousel) ... 315 5. 툴 바(Ext Toolbar) ... 318 6. 버튼(Ext Button) ... 319 7. 아이콘(iconCls) ... 323 8. 오버레이 ... 326 9. 리스트(Ext List) ... 329 10. 메시지 박스(Ext MessageBox) ... 332 11. 장치 구분(Ext is) ... 334 12. HTML을 이용한 레이아웃 구성(contentEl 속성) ... 335 13. UI 조합해보기 ... 337 Step 05 Sencha Touch Ajax 상호작용 ... 346 1. 템플릿(Ext Template) ... 346 2. 확장 템플릿(EXT XTemplate) ... 348 3. Ajax 호출 ... 351 4. JSONP 호출 ... 355 Step 06 Sencha Touch Data 패키지 ... 360 1. 데이터 처리 흐름 ... 360 2. 데이터 패키지를 활용한 원격 리소스 호출 ... 364 3. 데이터 패키지를 활용한 로컬 리소스 호출 ... 368 4. 데이터 패키지와 중첩리스트(Ext NestedList) ... 372 Step 07 Sencha Touch 이벤트 ... 376 1. 내장 속성을 이용한 이벤트 처리 ... 376 2. 표준 이벤트 처리 ... 377 3. 터치 이벤트 ... 382 4. 터치 이벤트를 활용한 모바일 그림판 ... 383 Step 08 Sencha Touch 미디어 지원 ... 393 1. Media(Ext Media) ... 394 2. Video(Ext Video) ... 395 3. Audio (Ext Audio) ... 396 4. 비디오, 오디오 코덱 ... 396 Step 09 Sencha Touch 데모 ... 398 1. YQL을 이용한 RSS 검색 ... 398 2. RSS 리더 개발 ... 399