이 책은 책 한 권으로 다양한 웹 기술을 빠른 시간에 이해하고 습득할 수 있도록 구성하였습니다. HTML5, CSS3, JavaScript, jQuery, Ajax, XML, JSON, Database, jQuery Mobile, PhoneGap 등 현 시점에서 반드시 알아야 하는 필수 웹 기술 요소들에 대해 핵심적인 내용들을 예제를 통해 학습할 수 있도록 하였습니다. 방대한 내용이지만 핵심적인 개념과 다양한 마크업과 스타일, 메소드, API 함수에 대한 간결한 설명, 그리고 이를 적용한 다양한 예제를 적용하고 만들어 가다 보면 초보자라도 빠르게 전문가가 될 수 있을 것입니다.
이 책은 핵심 웹 기술에 대한 소개와 설명에 그치지 않고 실제 적용할 수 있는 다양한 구체적 예제를 통해 웹 활용 능력을 충분히 습득할 수 있도록 구성하였습니다. 이해를 돕는 간단한 예제 코드 수준에 그치지 않고 실제 활용 가능한 소규모의 프로젝트 코드를 제공하였습니다. 포트폴리오 모바일웹, 도서관리 웹앱, 지도관리 하이브리드앱, 맛집관리 하이브리드앱 등 실제로 사용 가능한 수준의 다양한 예제와 전체 코드를 제공하였습니다. 이 책을 통해서 여러분 누구나 웹 기반의 앱을 개발하고 다양한 플랫폼 환경에서 동작하도록 패키징함으로써 앱 마켓이나 스토어를 통해 배포할 수 있습니다. 모바일 웹 개발 경험이 없거나 아직 부족한 개발자도 모바일 앱 개발 기술을 단시간에 빠르게 습득하여 실무에 적용할 수 있는 유용한 학습서가 될 것입니다.
누구를 위한 책인가?
● 웹 기초부터 활용까지 체계적으로 공부하고자 하는 경우
● 웹 관련 기술들의 개념과 상호 관계를 빠른 시간에 습득하고자 하는 경우
● IT 기본 기술로서의 웹을 이해하고 활용 능력을 얻고자 하는 경우
● 웹 기초는 이해하고 있으나 모바일 활용 방법을 알고자 하는 경우
● 단순한 예제 코드가 아닌 실제 활용 가능한 다양한 응용 예제를 필요로 하는 경우
무엇에 관한 책인가?
● HTML5 기본 마크업의 의미와 사용 방법에 관한 설명과 예제
● CSS3의 스타일 명세 방법과 적용 예제
● jQuery의 핵심 API 활용 방법과 예제
● XML, Ajax, JSON, SQLite 웹 관련 기술의 이해와 활용 예제
● jQuery Mobile 프레임워크를 활용한 UI 생성 및 예제
● PhoneGap 프레임워크를 활용한 하이브리드앱 변환과 예제
어떤 활용 예제를 포함하고 있나?
● HTML5 + CSS3를 활용한 모바일웹
개인 포트폴리오 모바일 웹 : mportpolio (4장 4.1)
● jQuery Mobile을 활용한 웹앱
독도 소개 웹앱 : dokdoApp (8장 5.1)
● jQuery Mobile + jQuery를 활용한 웹앱
관광지 안내 웹앱 : tourApp (11장 6.1)
도서 관리 웹앱 : bookApp (12장 1.1)
● PhoneGap API를 활용한 하이브리드앱
장치 관리 앱 : deviceApp (14장 2.1)
사진 관리 앱 : cameraApp (14장 3.1)
연락처 관리 앱 : contactApp (15장 1.1)
구글맵 지도활용 앱 : mapApp (15장 2.2)
● jQuery Mobile + jQuery + PhoneGap API를 활용한 하이브리드앱
맛집 앱 : matzipApp (16장 1.1)
어떤 소프트웨어를 설치하여 사용하고 있나?
● Chrome
● Aptana Studio 3 standalone 버전
● JDK 1.8.0
● Eclipse ADT 번들 23.0.2
● MDS AppLaud 폰갭 이클립스 플러그인 1.2
● jQuery Mobile 1.1.0
● jQuery 1.6.4
● PhponeGap 2.9.0
첫째마당 HTML5와 CSS3를 이용한 모바일 웹
Chapter 01 모바일 웹 환경
1. 웹의 진화
1.1 웹 환경의 변화
1.2 웹 기술의 발전
2. HTML5
2.1 HTML5의 등장
2.2 HTML5의 특징
3. 플랫폼이 된 웹 브라우저
3.1 웹 브라우저
3.2 웹 브라우저 엔진
4. 모바일 웹 환경
4.1 데스크톱 웹과 모바일 웹
4.2 모바일앱
4.3 모바일앱 프레임워크
Chapter 02 HTML5 기초 다지기
1. HTML5 개요
1.1 HTML5 문서
1.2 HTML5의 기본 요소
1.3 HTML5 마크업 명세 규칙
2. HTML5 태그
2.1 기본 태그
2.2 글자 태그
2.3 목록 태그
2.4 링크 태그
2.5 테이블 태그
3. HTML5 미디어 태그
3.1 이미지 관련 태그
3.2 오디오 관련 태그
3.3 비디오 관련 태그
4. HTML5 공간분할 태그와 시맨틱 태그
4.1 공간 분할 태그
4.2 시맨틱 태그
4.3 HTML5 레이아웃의 변화
4.4 시맨틱 레이아웃 작성하기
Chapter 03 CSS3 기초 다지기
1. CSS3 개요
1.1 스타일시트 기초
1.2 CSS3 스타일 선언 방법
2. 선택자(Selector)
2.1 기본 선택자 유형
2.2 확장 선택자 유형
3. 스타일시트 선언 방식
3.1 스타일시트 선언 방식
3.2 스타일시트 선언 방식 적용 예
4. 스타일 속성
4.1 CSS3의 글자 스타일 속성
4.2 CSS3의 색상(배경) 스타일 속성
4.3 CSS3의 목록 스타일 속성
4.4 CSS3의 테이블 스타일 속성
5. 박스 모델
5.1 박스 모델 구조
5.2 박스 모델 스타일 속성
6. CSS3 레이아웃
6.1 컨테이너
6.2 화면 배치 스타일 속성
6.3 float 모드 관련 스타일 속성
7. 확장 폰트
7.1 웹 폰트
7.2 사용자 정의 폰트
Chapter 04 모바일 웹 개발
1. 뷰포트
1.1 뷰포트
1.2 뷰포트 메타 태그
2. 미디어 유형
2.1 미디어 유형
2.2 미디어 유형 종류
3. 미디어 쿼리
3.1 미디어 쿼리 속성
3.2 미디어 쿼리 적용 예
4. [실습] 모바일 웹 개발
4.1 개인 포트폴리오 모바일 웹 : mportpolio
4.2 실습 예제 코드
둘째마당 제이쿼리 모바일을 이용한 웹앱
Chapter 05 제이쿼리 모바일 기초 다지기
1. 제이쿼리 모바일 개요
1.1 모바일 웹앱 개발
1.2 프레임워크 연결 방식
1.3 프레임워크 기본 구성 형식
2. 화면 구성 및 페이지 연결
2.1 웹앱 화면 구성
2.2 페이지 연결 방식
2.3 페이지 도메인 링크 방식
3. 페이지 전환
3.1 페이지 전환 효과
3.2 외부 프로그램 링크
Chapter 06 제이쿼리 모바일 헤더바와 푸터바
1. 헤더바
1.1 툴바
1.2 헤더바
2. 푸터바
3. 네비게이션바와 툴바
3.1 네비게이션바
3.2 툴바 위치 설정
Chapter 07 제이쿼리 모바일 버튼과 리스트뷰
1. 버튼
1.1 버튼 생성
1.2 기본 버튼 종류
1.3 아이콘 버튼의 변형
1.4 확장 버튼 종류
2. 리스트뷰 기초
2.1 기본 리스트뷰
2.2 연결 리스트뷰
2.3 중첩 리스트뷰
2.4 순서 리스트뷰(ordered listview)
2.5 인셋 리스트뷰
2.6 분할 리스트뷰
3. 리스트뷰 고급
3.1 카운트 버블
3.2 리스트 구분자
3.3 썸네일 리스트뷰
3.4 아이콘 리스트뷰
3.5 여러 줄 리스트뷰
3.6 검색 필터 리스트
3.7 제이쿼리 리스트뷰 활용 예
Chapter 08 제이쿼리 모바일 대화상자와 폼
1. 대화상자
1.1 대화상자
1.2 페이지 테마
2. 콘텐츠 영역의 레이아웃
2.1 기본 레이아웃 형식
2.2 그리드 레이아웃 형식
3. 접이식 패널 레이아웃
3.1 기본 접이식 패널
3.2 중첩 접이식 패널
3.3 그룹 접이식 패널
4. 폼 요소
4.1 HTML5 표준 폼 태그
4.2 네이티브 폼 컨트롤
4.3 모바일 폼 컨트롤 : 입력 상자
4.4 모바일 폼 컨트롤: 선택 메뉴
5, [실습] 독도 소개 웹앱 개발
5.1 독도 소개 웹앱: dokdoApp
5.2 실습 예제 코드
셋째마당 제이쿼리를 이용한 동적인 웹앱
Chapter 09 제이쿼리 기초 다지기
1. 제이쿼리 개요
1.1 제이쿼리
1.2 자바스크립트
1.3 제이쿼리 연동
1.4 DOM
2. 제이쿼리 함수
2.1 제이쿼리의 기본 기능
2.2 jQuery( ) 함수
3. 제이쿼리 선택자
3.1 제이쿼리 선택자
3.2 제이쿼리 선택자 유형
Chapter 10 제이쿼리 응용 다지기
1. 제이쿼리 메소드
1.1 제이쿼리 스타일 관련 메소드
1.2 DOM 트리 관련 메소드
1.3 기타 메소드
2. 제이쿼리 이벤트
2.1 제이쿼리 이벤트
2.2 이벤트 핸들러 연결 및 해제
2.3 이벤트 메소드
2.4 이벤트 활용 예
3. 제이쿼리 효과
3.1 제이쿼리 효과
3.2 사용자 정의 효과 생성하기
3.3 제이쿼리 효과 활용
Chapter 11 XML, Ajax, 제이쿼리 활용
1. XML 개요
1.1 XML
1.2 HTML5과 XML
1.3 XML의 특성
2. XML 문서 작성
2.1 XML 문서 구조
2.2 XML 코딩 규칙
2.3 XML 기본 요소
2.4 XML 문서 작성
3. 네임스페이스
3.1 네임스페이스
3.2 네임스페이스 선언 방법
4. XML 문서의 CSS 적용
5. 제이쿼리 Ajax
5.1 제이쿼리 Ajax
5.2 $.ajax( ) 메소드의 XML 문서 적용 예
5.3 $.getJSON( ) 메소드의 JSON 형식 데이터 적용 예
5.4 $.load( ) 메소드의 HTML 문서 적용 예
6. 제이쿼리 활용 예제
6.1 관광지 안내 앱 : tourApp
6.2 예제 코드
Chapter 12 데이터베이스와 제이쿼리 활용
1. [실습] 도서관리 웹앱 개발
1.1 로컬 DB 기반의 도서관리 앱: bookApp
1.2 UI 화면 구성
1.3 내부 스크립트 함수 구성
1.4 데이터베이스 관련 함수 정의
1.5 실습 예제 코드
넷째마당 폰갭을 이용한 하이브리드앱
Chapter 13 하이브리드맵과 PhoneGap
1. 하이브리드앱 개요
1.1 하이브리드앱
1.2 하이브리드 프레임워크
2. 폰갭 개요
2.1 폰갭
2.2 폰갭 개발 절차
3. 폰갭 안드로이드 개발 환경
3.1 안드로이드 개발 환경 구축
3.2 폰갭 프로젝트 개발 환경 구축
4. 폰갭 프로젝트 생성 및 실행
4.1 폰갭 기본 프로젝트 생성하기
4.2 폰갭 패키징
4.3 폰갭 프로젝트 실행하기
Chapter 14 폰갭 API를 활용한 앱 만들기 I
1. 폰갭 API
1.1 폰갭 API 개요
2. 장치관리 하이브리드앱 개발
2.1 장치관리 앱: deviceApp
2.2 단말기 정보 확인하기
2.3 진동 시키기
2.4 방위각 정보 확인하기
2.5 배터리 정보 확인하기
2.6 네트워크 연결 정보 확인하기
2.7 위치 정보 확인하기
3. 사진관리 하이브리드앱 개발
3.1 사진관리 앱: cameraApp
3.2 사진 촬영하기
3.3 사진 불러오기
3.4 실습 예제 코드
Chapter 15 폰갭 API를 활용한 앱 만들기 II
1. [실습] 연락처 관리 하이브리드앱 개발
1.1 연락처 관리 앱: contactApp
1.2 연락처 정보 검색하기
1.3 연락처 리스트뷰 표시하기
1.4 연락처 상세 정보 표시하기
1.5 연락처 추가하기
1.6 실습 예제 코드
2. [실습] 지도(맵) 활용 하이브리드앱 개발
2.1 jquery-ui-map 플러그인
2.2 구글맵 지도활용 앱 : mapApp
2.3 현 위치 지도 표시하기
2.4 검색 위치 지도 표시하기
2.5 검색 경로 지도 표시하기
2.6 실습 예제 코드
Chapter 16 실전 프로젝트 : 맛집 앱 만들기
1. 맛집 관리 하이브리드앱 개발
1.1 맛집 앱: matzipApp
1.2 맛집 앱 시작하기
1.3 맛집 정보 등록하기
1.4 맛집 정보 수정하기
1.5 맛집 목록 조회하기
1.6 맛집 상세정보 조회하기
1.7 맛집 추가정보 조회하기
1.8 실습 예제 코드 545
1
