HTML5 API 완전정복(Web Mobile web 개발자들을 위한)

준비된 개발자를 위한 웹 & 모바일 웹 실무 지침서!

얼마 전까지만 해도 HTML은 마크업 언어에 불과했는데 어떻게 HTML5는 이렇게 다양한 기능들을 가진 표준이 되어버린 것일까? 이제는 웹 개발자들뿐만 아니라 디자이너 그리고 애플리케이션 개발자들까지도 HTML5를 이야기하고 있습니다. 하지만 어디서부터 어떻게 접근해야할지 몰라 필요성은 느끼지만 정작 시작은 하지 못하고 있는 경우가 많습니다.



이 책은 기존 웹 개발자나 모바일 개발을 시작하려는 개발자들을 위한 자세한 설명과 실제 사용할 수 있는 예제를 통해 새로운 기술에 대한 진입장벽을 최대한 낮추기 위해 노력하였습니다. 또 HTML5의 오프라인 앱 캐시 기능의 경우 IE에서는 지원이 안 되는데 IE 점유율이 90% 이상을 차지하고 있는 국내에서 상대적으로 지원이 많이 되고 있는 모바일 브라우저들을 대상으로 활용할 수 있도록 내용을 구성하는 방식으로 좀 더 국내 실정에 맞는 최신 기술들을 전해 줄 수 있도록 구성하였습니다.



HTML5의 중요성과 인기가 높아지기 시작하면서 자바스크립트의 인기 또한 급격하게 높아지고 있습니다. 하지만 자바스크립트는 항상 저평가 되어왔던 언어로, 제대로 이해하여 개발 하는 개발자가 많지 않습니다. 이런 어려움을 쉽게 극복할 수 있게 돕기 위해 자바스크립트와 세계적으로 가장 인기있는 자바스크립트 라이브러리인 jQuery 개발에 대한 내용과 노하우들도 담았습니다. 개발에 필요한 툴 사용법과 웹 개발에 필요한 기본적인 내용들도 함께 다루어 프론트엔드 웹 개발을 처음 해보는 사람일지라도 어렵지 않게 시작할 수 있도록 구성하였습니다.



[추천사]

스티브 잡스의 "우린 플래시 대신 웹표준 기술인 HTML5를 쓰겠다"라는 발언 때문에 HTML5에 대한 관심이 아주 높아졌습니다. HTML5에서는 CSS와 자바스크립트의 비중이 아주 높아졌습니다. 웹 애플리케이션에 목적을 두었기 때문에 마크업만으로는 부족하기 때문입니다. HTML5의 표준 확정은 2012년이지만 현재 모바일 웹 분야에서 HTML5의 활약은 무시할 수 없는 수준입니다. 이 책은 HTML5의 기초부터 모바일 웹까지 코드와 개발 도구를 잘 설명해 놓은 책입니다. 새로운 웹의 세계를 만들어 가는데 좋은 가이드가 될 것입니다.

okjsp.pe.kr 운영자 허광남



개발자, 디자이너뿐만 아니라 미디어나 세미나에서까지 HTML5의 시대가 오는 것에 대해 부정하는 사람은 없습니다. HTML5 관련된 도서도 많이 출간되고 있기는 하지만 우리나라 실정에 맞고 HTML5를 기웃거리는 사람들을 만족시킬 만한 도서들이 아쉽게도 없었습니다. 이 책은 아직 표준화되지는 않았지만 우리나라 실정에 맞는 HTML5 기본 사용법과 실무 활용법을 가이드하고 있어 실제 웹이나 웹앱 개발자들에게 많은 도움이 될 것이라고 믿어 의심치 않습니다.

줌프론트개발팀장 서동균

Chapter 01 HTML5란

1.1 HTML5의 개요

1.1.1 HTML5의 역사

1.1.2 HTML5의 목표

1.2 HTML5의 범위

1.3 HTML5는 언제부터 사용 가능한가

1.4 HTML5 관련 참고 사이트

1.4.1 표준 문서

1.4.2 브라우저 지원현황 확인

1.4.3 글, 강좌 관련

1.4.4 그외 사이트



Chapter 02 HTML5의 마크업

2.1 HTML5 마크업의 변화

2.1.1 DOCTYPE의 변화

2.1.2 인코딩 지정 방법의 변화

2.1.3 새로 등장한 시맨틱 엘리먼트들

2.1.4 사용할 수 없게 된 엘리먼트들

2.1.5 HTML5의그 밖의 변화들

2.2 HTML5 마크업을 이용하여 사이트 구성하기

2.2.1 HTML4 마크업을 HTML5로 변환하기

2.2.2 브라우저 호환성 문제 해결하기



Chapter 03 HTML5와 자바스크립트

3.1 자바스크립트의 필요성

3.1.1 자바스크립트의 사용 범위

3.2 자바스크립트의 기본

3.2.1 자바스크립트 추가하기

3.2.2 변수 선언

3.2.3 연산자

3.2.4 조건문

3.2.5 반복문

3.3 자바스크립트 활용

3.3.1 논리연산자의 활용

3.3.2 형변환

3.3.3 변수의 범위(Scope)

3.3.4 HTML5에 추가된 Selector 함수들

3.4 자바스크립트 디버깅 툴

3.4.1 크롬인스팩터

3.4.2 파이어버그

3.4.3 IE8 개발자도구

3.5 HTML5 관련 자바스크립트 라이브러리

3.5.1 Modernizr

3.5.2 jQuery



Chapter 04 Canvas API로 플래시와 같은 효과 내기

4.1 HTML5 Canvas API의 개요

4.1.1 Canvas API란?

4.1.2 Canvas API와 플래시

4.2 HTML5 Canvas의 각 브라우저 지원 현황

4.3 HTML5 Canvas API 이용하기

4.3.1 Canvas 좌표계

4.3.2 가로선과 세로선 그리기

4.3.3 곡선 그리기

4.3.4 색 채워 넣기

4.3.5 선 스타일 지정하기

4.3.6 원 그리기

4.3.7 그라데이션 효과 넣기

4.3.8 이미지 넣기

4.3.9 글자 넣기

4.3.10 간단한 애니메이션 효과 넣기

4.3.11 그림자 효과 넣기와 상태 저장하기

4.3.12 그림 변형하기

4.4 HTML5 Canvas API 활용하기

4.4.1 페이지 구성

4.4.2 초기값 설정하기

4.4.3 파티클 생성하기

4.4.4 파티클에 애니메이션 효과 추가하기

4.4.5 파티클 탄성 연결선 추가하기



Chapter 05 HTML5의 Video와 Audio

5.1 HTML5의 Video와 Audio 개요

5.1.1 HTML5 Video의 장단점

5.1.2 코덱 살펴보기

5.2 HTML5 Video, Audio의 각 브라우저 지원 현황

5.3 HTML5 Video, Audio 사용하기

5.3.1 HTML5 Video 제어하기

5.3.2 HTML5 Audio 제어하기

5.3.3 HTML5 Video와 Audio API의 공통 속성과 함수들

5.3.4 모든 브라우저에서 재생가능한 Video, Audio 만들기

5.4 HTML5 Video, Audio 활용하기

5.4.1 HTML5 Audio를 이용한 Music Play List 만들기

5.4.2 HTML5 Video, Canvas와 연동하기



Chapter 06 다양한 기능의 HTML5 Forms

6.1 HTML5 Forms의 개요

6.2 HTML5 Forms 각 브라우저 지원 현황

6.3 HTML5 Forms 이용하기

6.3.1 HTML4의 Forms

6.3.2 HTML5의 Forms

6.3.3 그 외HTML5의 Forms



Chapter 07 드래그 앤 드롭

7.1 드래그 앤 드롭의 개요

7.2 드래그 앤 드롭 브라우저 지원 현황

7.3 드래그 앤 드롭 이용하기

7.3.1 드래그 앤 드롭 구현하기

7.3.2 jQuery를 이용하여 드래그 앤 드롭 구현하기

7.4 드래그 앤 드롭 활용하기



Chapter 08 쿠키의 한계를 극복한 HTML5 Web Storage

8.1 HTML5 Web Storage API의 개요

8.1.1 쿠키와 Web Storage

8.1.2 Web SQL Database와 Indexed Database

8.2 HTML5 Web Storage API의 브라우저 지원 현황

8.3 HTML5 Web Storage API 이용하기

8.3.1 Web Storage의 종류에 따른 특징

8.3.2 Web Storage API

8.3.3 트위터에서 사용하고 있는 Web Storage

8.3.4 Web Storage 데이터 확인 가능 툴

8.4 HTML5 Web Storage API 활용하기

8.4.1 트위터 타임라인 생성하기

8.4.2 Web Storage에 타임라인 객체 저장하기

8.4.3 Web Storage에 타임라인 HTML 저장하기



Chapter 09 Geolocation API

9.1 HTML5 Geolocation API의 개요

9.1.1 위치기반 서비스의 활용

9.1.2 Geolocation API와 개인정보

9.1.3 Geolocation API가 위치를 알아내는 방법

9.2 HTML5 Geolocation API의 각 브라우저 지원 현황

9.3 HTML5 Geolocation API 이용하기

9.3.1 페이지 구성

9.3.2 위도와 경도 표시하기

9.3.3 위도와 경도 실시간으로 업데이트하기

9.4 HTML5 Geolocation API 활용하기

9.4.1 구글지도API

9.4.2 Daum 지도API



Chapter 10 HTML5 모바일 웹 개발

10.1 모바일웹 개발 환경

10.1.1 모바일 브라우저의 환경

10.1.2 웹앱과 네이티브앱의 장단점

10.1.3 모바일웹 개발 기술들

10.2 iPhone용 웹앱 개발하기

10.2.1 아이폰을 위한 웹앱 아이콘

10.2.2 CSS3의 미디어 쿼리

10.2.3 아이폰 웹앱 테스트하기

10.2.4 Device Orientation API를 활용한 개발

10.2.5 jQTouch 웹앱 만들기

10.2.6 웹앱에 오프라인 웹애플리케이션 기능 추가하기

이상현 저자 이상현은 현재 이스트소프트에서 웹 개발자로 일하고 있으며 프론트 엔드 개발과 자바스크립트, HTML5에 많은 관심을 가지고 있다. 월간 마이크로소프트웨어에 HTML5 관련 글을 수차례 기고하였다.