1장 리치 미디어 애플리케이션 구조 개요 HTML5 테스트 영역 설정 로고와 타이틀을 위한 header 태그의 사용 nav 태그로 콘텐츠 테이블 작성 페이지 영역을 정의하는 section 태그의 사용 aside 태그로 그래픽 요소 정렬 aside 태그로 여러 개의 사이드 바 표시 footer 태그의 적용 문서 개요 알고리즘 적용 HTML5로 멋진 홍보 페이지 만들기
2장 콘텐츠 구성 개요 블로그 기사 구조 만들기 mark 요소로 텍스트 강조 time 요소 사용 기사의 출간일 표시 article 요소로 주석 블록 표시 @font-face로 폰트를 동적으로 추가 폰트에 그림자 효과 추가 폰트에 그러데이션 적용 figure와 figcaption으로 시각적인 요소에 주석 달기
3장 CSS로 스타일 작성 개요 display:block을 이용한 설정 nav 블록 요소의 스타일링 배경 이미지 조절을 위한 background-size의 사용 border-radius를 이용한 둥근 모서리 추가 다수의 배경 이미지 적용 이미지에 box shadow 추가 IE 브라우저용 스타일 작성
4장 사용자 접근성 추가 개요 브라우저 지원 여부 확인 내비게이션 건너뛰기 기능 접근성을 위한 메타 태그 추가 스크린 리더를 위한 시맨틱 요소 사용 대체 사이트 뷰 지원 접근성 있는 제목 영역을 만들기 위한 hgroup 사용 브라우저 지원이 없는 경우 대체 콘텐츠의 표시 WAI-ARIA 사용
5장 HTML5 폼 요소 100% 활용 개요 플레이스홀더 텍스트 표시 폼 필드에 오토포커스 기능 추가 HTML5와 CSS3로 폼에 스타일 부여 이메일 입력 형식의 사용 URL 입력 형식으로 URL 추가 number 태그 사용 range 태그 사용 검색 영역 만들기 날짜와 시간을 표시하는 피커 만들기
6장 캔버스로 리치 미디어 애플리케이션 개발 개요 canvas 환경 설정 2D 렌더링 컨텍스트 동적으로 도형 처리 canvas로 이미지에 외곽선 그리기 둥근 모서리 상호작용하는 시각 효과 통통 튕기는 공 대비용 콘텐츠 작성
7장 자바스크립트로 만드는 상호작용성 개요 자바스크립트로 오디오 파일 실행 텍스트로 드래그앤드롭 API 사용 vid.ly와 제이쿼리로 크로스 브라우저 비디오 지원 제이쿼리를 활용해 동적으로 비디오 표시 제이쿼리로 이동 가능한 비디오 배너 작성 Easel.js와 canvas 태그를 이용한 이미지 표시 조절 Easel.js와 canvas 태그를 이용해 이미지 파일로 애니메이션 만들기 canvas 태그와 자바스크립트로 오디오가 있는 랜덤 애니메이션 만들기
8장 웹 페이지에 오디오와 비디오 적용 개요 플래시는 이제 그만 오디오와 비디오 파일 포맷 모두를 위해 비디오 표시 접근성 높은 오디오와 비디오 만들기 멋진 오디오 플레이어 만들기 모바일 기기에 오디오와 비디오 삽입
9장 데이터 스토리지 개요 브라우저에서 데이터 스토리지 테스트 웹 스토리지 확인을 위한 브라우저 개발 도구의 사용 세션 스토리지 변수의 설정과 호출 로컬 스토리지 변수의 설정과 호출 parseInt로 로컬 스토리지의 문자 데이터를 숫자 데이터로 변환 웹 SQL 데이터베이스 만들기 웹 SQL 데이터베이스 사용 오프라인 스토리지를 위한 캐시 매니페스트 파일 만들기 지오로케이션 API와 geo.js로 현재 위치 표시
HTML5의 대표적인 특징인 비디오, 오디오 등의 멀티미디어 컨텐츠 작성 방법과 각종 지원 기기의 사용자를 위한 접근성 제고 전략, 리치 미디어 애플리케이션을 만들기 위한 캔버스 API와 현대 브라우저에 직접 데이터를 저장하고, 이를 활용할 수 있게 해주는 데이터 스토리지 API의 실용 예제를 함께 만들어 가는 방식으로 구성됐다. HTML5 코딩이 처음인 기획자, 디자이너를 위해 전반부는 핵심 태그 요소를 이용한 간단한 문서 만들기로 시작하며, 이미 마크업 언어에 익숙한 UI디자이너와 개발자를 위해 중후반부는 스크립트를 활용한 API 사용 전략을 소개한다.
HTML5의 비디오, 오디오, 3D, 애니메이션, 캔버스, SVG를 바로 구현
경험이 풍부한 웹 전문가와 이제 막 웹 분야에 뛰어든 새내기 개발자, 디자이너 모두가 원하는 HTML5를 활용한 시맨틱 웹 사이트와 애플리케이션을 만들기 위한 실무 예제로 구성
이 책에서 다루는 내용
- 데이터 스토리지와 캐시 매니페스트 파일을 이용한 오프라인 웹사이트 개발 - 지오로케이션 API와 geo.js를 활용한 위치 기반 서비스 개발 - 접근성을 고려한 비디오, 오디오 소스의 제작과 스마트폰 등 모바일 기기용 미디어 콘텐츠 개발 - HTML5의 기능 향상을 위한 자바스크립트 활용법, 제이쿼리 라이브러리로 이동 가능한 비디오 배너 구현 - 캔버스 요소를 활용한 이미지 조절과 애니메이션 제작 - 캔버스 요소를 활용한 리치 미디어 애플리케이션 개발 - 캔버스 환경 설정 방법과 데이터 연동을 통한 도형 표현, 사용자와 상호작용하는 시각 효과 구현 - HTML5와 CSS3를 활용한 인터랙티브 입력 요소 만들기 - 브라우저 지원 검사로 접근성을 높이는 방법과 HTML5를 지원하지 않는 브라우저 사용자를 위한 대체 사이트나 콘텐츠 제공 방법
이 책의 대상 독자
HTML5는 취업이나 이직을 고려할 때 개발자가 최근 들어 가장 많이 검색하는 단어다. 이 책의 독자가 현재 구직 중이거나 몸담은 직장에서 다음 단계의 도약을 모색하는 경우라면 이 새로운 기술은 여러분을 더욱 돋보이게 만들어줄 것이다.
이 책의 구성
1장, '리치 미디어 애플리케이션 구조'에서는 HTML5를 지원하는 웹 브라우저를 살펴보고, HTML5의 새로운 요소(element)를 성공적으로 활용하기 위한 준비를 한다.
2장, '콘텐츠 구성'에서는 개발자가 다양한 웹 콘텐츠를 담기 위한 컨테이너 요소를 만드는 방법을 소개한다.
3장, 'CSS로 스타일 작성'에서는 HTML5를 지원하기 위한 CSS3의 사용 방법을 소개하고, 그렇게 만들어진 웹 문서가 현대 웹 브라우저와 이전 세대 브라우저에서는 어떻게 보이는지 확인한다.
4장, '사용자 접근성 추가'에서는 미국의 접근성 관련 법규인 제508조에 관한 내용 대신 수준 높은 웹 사용성을 제공하기 위해 최근에 소개된 관련 기술을 소개한다.
5장, 'HTML5 폼 요소 100% 활용'에서는 새로 소개된 HTML5의 입력 형식을 살펴보고, 웹 브라우저별로 각 폼 요소의 지원 여부를 알아본다.
6장, '캔버스로 리치 미디어 애플리케이션 개발'은 이 책의 내용 중 가장 진보된 관점으로 쓰인 장으로, 새로운 형식의 사용자 소통 방법을 개발하기 위한 방법에 중점을 두고, 캔버스와 관련된 웹 브라우저 지원에 대한 놀라운 통계 자료도 소개한다.
7장, '자바스크립트로 만드는 상호작용성'에서는 HTML5의 새로운 기능인 오디오와 비디오 요소까지 학습 영역을 확장해 살펴보고, 이 기능을 직접 활용해 볼 기회도 제공한다.
8장, '웹 페이지에 오디오와 비디오 적용'에서는 HTML의 오디오와 비디오에 대한 핵심 내용을 깊이 있게 분석하고, 웹 접근성을 지원하는 자신만의 미디어 플레이어를 만든다.
9장, '데이터 스토리지'에서는 JSON, SQL, 지오로케이션 등을 포함한 HTML5만의 특성을 세부적으로 살펴본다.
총 
바보 빅터
