Do it! 쉽게 배우는 웹앱 & 하이브리드앱

첫째마당
모바일을 위한 HTML5와 CSS3 기본기 익히기

01 웹 표준, 모바일 환경의 이해
01-1 웹 표준의 기본 지식
01-2 웹앱, 네이티브앱, 하이브리드앱

02 작업 환경 준비하기
02-1 개발 툴 준비하기
02-2 브라우저 준비하기
02-3 Hello World 예제 만들어 보기

03 HTML5 시맨틱 마크업 이론 익히기
03-1 시맨틱 마크업 개념 알아보기
03-2 기본적인 HTML5 마크업 사용법
03-3 W3C HTML 웹 표준 인증받기

04 CSS3 기본 기능 익히기
04-1 레이아웃 작업 순서
04-2 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 사용법
04-3 상속 개념 알아보기

05 CSS3 고급 기능 익히기
05-1 선택자를 잘 알아야 하는 이유
05-2 태그 선택자
05-3 클래스 선택자
05-4 아이디 선택자
05-5 하위 선택자
05-6 그룹 선택자
05-7 전체 선택자
05-8 하이퍼링크 사용법 : 앵커 유사 클래스 선택자

06 CSS3 좌표계 사용법 익히기
06-1 레이아웃 위치 개념 알아보기
06-2 컨테이너 안에서 자유롭게 위치 잡기
06-3 CSS3 단위 이해하기
06-4 BOX(상자) 모델을 이용한 위치 잡기

07 CSS3 레이아웃 사용법 익히기
07-1 float 사용법
07-2 clear 사용법
07-3 여러 개의 열 레이아웃 만들기

둘째마당
미디어쿼리와 제이쿼리 모바일로 모바일 UI 디자인하기

08 반응형 웹 디자인하기
08-1 원하는 글꼴을 마음껏! 웹 폰트 사용하기
08-2 반응형 웹 디자인 준비하기
08-3 실전에서 미디어 쿼리 응용하기

09 스마트폰 UI 기법 익히기
09-1 모바일 UI 프레임워크
09-2 JQuery Mobile을 배워보자
09-3 JQuery Mobile로 스마트폰 UI를 시작하자
09-4 화면 구성을 위한 UI 작성하기

10 스마트폰 페이지 전환 효과 익히기
10-1 목록 만들기
10-2 다양한 페이지 링크 연결

셋째마당
실전! 직접 만드는 모바일 웹 프로젝트

11 아이콘 메뉴 페이지 만들기 응용
11-1 웹앱 프로젝트 기획
11-2 메인 페이지 만들기

12 내비게이션 메뉴 만들기 응용
12-1 툴바 기본 사용법 익히기
12-2 Fotorama 사용법 익히기
12-3 캠퍼스 이미지 페이지 만들기

13 자바스크립트 기초 익히기
13-1 HTML5 시대에 떠오르는 언어, 자바스크립트
13-2 자바스크립트 언어로 프로그래밍 기초 배우기
13-3 JQuery로 최신 스타일 자바스크립트 기초 배우기

14 이미지 전환 효과 만들기
14-1 CSS3 트랜지션으로 애니메이션 효과 만들기
14-2 대학교 소개 페이지 만들기
14-3 자바스크립트 JQuery로 터치 기능 생명 불어넣기

15 동영상 연결하기
15-1 HTML5로 동영상 연결하기
15-2 VideoJS를 이용하여 세련된 동영상 플레이어 만들기

16 지도에 내 위치 표시하기
16-1 구글 맵 표시하기
16-2 현재 내 위치를 찾아보기
16-3 캠퍼스 맵 완성하기

넷째마당
웹앱&하이브리드앱 만들기

17 무료 FTP 서버 등록 및 배포하기
17-1 무료 FTP 서버에 배포하기
17-2 네이티브앱 같은 웹앱 만들기

18 폰갭을 사용하여 하이브리드앱 만들기
18-1 폰갭으로 하이브리드앱을 안드로이드폰에서 실행하기
· NodeJS 설치하기, 폰갭과 코르도바 설치, 폰갭 디벨로퍼 앱(Developer App) 설치와 Hello phonegap 만들기
· 안드로이드 앱 제작 - Virtual University 프로젝트 시작
· SplashScreen, GeoLocation 플러그인 설치 및 터치속도 300ms UP!
· 아이콘 및 시작화면 리소스 준비하기
· 안드로이드 네이티브앱 빌드
· 안드로이드 기기에서 실행

18-2 폰갭으로 하이브리드앱을 아이폰에서 실행하기
· iOS 개발자 등록하기, Xcode와 Command Line Tools 설치, Node.js 설치, Phonegap 설치
· Phonegap Developer App, Phonegap Hello 프로젝트
· 폰갭과 Xcode를 사용하여 하이브리드앱 제작하기
· StatusBar, SplashScreen, GeoLocation 플러그인 설치 및 터치속도 300ms UP!
· 아이콘 및 시작화면 리소스 준비하기
· iOS 네이티브앱 실행
· iOS 인증받기, 앱 ID 등록/iOS 디바이스 등록/프로비저닝 프로파일 준비하기
· iOS 디바이스에서 실행하기, 프로비저닝 프로파일 배포하기

19 실전 응용 하이브리드앱 만들기
19-01 JQuery를 이용하여 JSON 사용하기
19-02 플리커를 이용한 포토스트림 앱 만들기
19-03 워드프레스를 이용한 하이브리드앱 만들기

부록·Appendix
01 드림위버 CC에서 CSS 디자이너 사용하기
02 폰갭 데스크톱으로 결과 확인하기
03 안드로이드앱 APK 배포파일 만들기, 환경 준비
04 폰갭(아파치 코르도바) CLI 설치 및 실행 시 오류 메시지 대처법