HTML5란? HTML5가 걸어온 길 - 진정한 HTML5 규격이 정해질 수 있을까? 왜 HTML5에 관심을 가져야 할까? CSS3란? 왜 CSS3에 관심을 가져야 할까? '실전'이란 무엇을 의미하는가? - 다양한 브라우저 시장 - 성장하는 모바일 시장 실전 내용으로 들어가면서
02장 마크업, HTML5 스타일
HTML5 헤럴드 소개 기본 HTML5 템플릿 - 독타입 - html 요소 - head 요소 - 대등한 상황으로 만들기 - 나머지는 알고 있는 그대로다 HTML5 FAQ - 왜 이러한 변경사항이 이전 브라우저에서도 여전히 작동하는 걸까? - 모든 태그를 닫지 말아야 할까? - 다른 XHTML 기반 문법 규칙은 어떨까? 페이지의 구조 정의 - header 요소 - section 요소 - article 요소 - nav 요소 - aside 요소 - footer 요소 HTML5 헤럴드 구조화 정리
03장 HTML5의 의미적 표현 더 알아보기
콘텐츠 타입의 새로운 측면 문서의 개요 뉴스 속보 - hgroup 요소 새로운 요소 더 알아보기 - figure와 figcaption 요소 - mark 요소 - progress와 meter 요소 - time 요소 기존 기능의 변화 - '폐기된'이라는 용어는 폐기됐다 - Link 내의 블록 요소 - 굵은 글씨체 - 이탤릭체 - 큰 글씨와 작은 글씨 - 기다려왔던 cite 요소 - (정의가 아닌) 설명 목록 다른 새로운 요소와 기능 - details 요소 - 맞춤형 순서 있는 목록 - 범위가 지정된 스타일 - 스크립트를 위한 async 속성 HTML5 문서의 유효성 검사 요약
04장 HTML5 폼
툴박스의 믿을 만한 도구들 HTML5 폼 속성 - required 속성 - placeholder 속성 - pattern 속성 - disabled 속성 - readonly 속성 - multiple 속성 - form 속성 - autocomplete 속성 - datalist 요소와 list 속성 - autofocus 속성 HTML5의 새로운 폼 입력 타입 - Search - 이메일 주소 - URL - 전화번호 - 숫자 - 범위 - 색상 날짜와 시간 HTML5에서의 다른 새로운 폼 컨트롤 - output 요소 - keygen 요소 기존 폼 컨트롤과 속성의 변화 - form 요소 - optgroup 요소 - textarea 요소 결론
05장 HTML5 오디오와 비디오
탄생 배경 기능 지원의 현재 상태 - 비디오 컨테이너 포맷 - 비디오 코덱 - 오디오 코덱 - 현재 브라우저에서는 어떤 조합이 작동할까? 마크업 - 내장 컨트롤 사용 - autoplay 속성 - loop 속성 - preload 속성 - poster 속성 - audio 속성 - 다중 비디오 포맷 지원 - source 순서 - 인터넷 익스플로러 6~8은 어떻게 될까? - MIME 타입 웹용 비디오 파일 인코딩 맞춤 컨트롤 생성 - 첫 시작을 위한 몇 가지 마크업과 스타일 - 미디어 요소 API 소개 - 비디오의 재생과 중지 - 비디오의 오디오 트랙에 대한 음소거 및 음소거 해제 - 비디오 재생이 끝났을 때의 반응 - 비디오 재생에 따른 시간 업데이트 - 미디어 요소 API의 추가적인 기능 오디오는 어떤가? 접근 가능한 미디어 쇼타임
06장 CSS3 소개
이전 브라우저 지원하기 CSS3 선택자 - 관계형 선택자 - 속성 선택자 - 가상 클래스(Pseudo-classes) - 구조적 가상 클래스 - 가상 요소와 생성된 콘텐츠 CSS3 색 - RGBA - HSL과 HSLA - 불투명도 실전 적용 둥근 모서리: border-radius 그림자 효과 - Inset과 여러 개의 그림자 효과 텍스트 그림자 효과 더 많은 그림자 효과 다음으로
07장 CSS3 그라디언트와 다중 배경
선형 그라디언트 - W3C 문법 - 이전의 웹킷 문법 - 종합 예제 - SVG를 이용한 선형 그라디언트 - IE 필터를 이용한 선형 그라디언트 - 이용 가능한 도구 방사형 그라디언트 - W3C 문법 - 이전의 웹킷 문법 - 모든 내용을 통합하면 반복 그라디언트 다중 배경 이미지 배경 크기 배경으로
08장 CSS3 변형과 전환
변형(Transform) - 이동(Translation) - 크기변환 - 회전 - 비틀기 - 변형의 원점 변경 - 인터넷 익스플로러 8과 그 이전 버전을 위한 지원 전환(Transition) - transition-property - transition-duration - transition-timing-function - transition-delay - transition 약칭표기 속성 - 다중 전환 애니메이션 - 키 프레임 - 애니메이션 속성 넘어가면서
09장 웹 폰트와 다단 레이아웃
@font-face를 이용한 웹 폰트 - @font-face 구현 - 폰트 소스 선언 - 폰트 속성 기술자 - 유니코드 범위 - 폰트 적용 - 법적 고려 사항 - 다양한 폰트 파일 생성: 폰트 스쿼럴 - 다른 고려 사항 CSS3 다단 레이아웃 - column-count 속성 - column-gap 속성 - column-width 속성 - columns 약칭표기 속성 - 단과 height 속성 - 그 밖의 단 기능 - 다른 고려 사항 - 점진적 향상 미디어 쿼리 - 미디어 쿼리란? - 문법 - 미디어 쿼리의 유연성 - 브라우저 지원 - 추가 참고 자료 스타일리시하게 살기
10장 위치 정보, 오프라인 웹 앱, 그리고 웹 스토리지
위치 정보 - 프라이버시에 대한 배려 - 위치 정보 메서드 - Modernizr를 이용한 지원 여부 확인 - 현재 위치 조회 - 위치 정보의 Position Object - 위도와 경도 얻기 - 지도 불러오기 - 이전의 모바일 기기에 대한 마지막 한마디 오프라인 웹 애플리케이션 - 작동 방법: HTML5 애플리케이션 캐시 - 오프라인에서 작동하도록 사이트 설정하기 - 사이트를 오프라인으로 저장하기 위한 허가 얻기 - 오프라인 테스트 - 오프라인에서도 이용 가능한 HTML5 헤럴드 만들기 - 오프라인 웹 애플리케이션 저장 공간의 제약 - Fallback 섹션 - 캐시 리프레싱 - 지금 온라인 상태일까? - 추가 참고 자료 웹 스토리지 - 두 종류의 웹 스토리지 - 웹 스토리지 데이터의 모습 - 데이터 저장하기와 읽기 - 저장 데이터 변환 - 좀 더 간단한 사용법 - 특정 항목 제거와 전체 데이터 지우기 - 스토리지 제한 - 보안 고려사항 - HTML5 헤럴드에 웹 스토리지 추가 - 웹 인스펙터를 이용한 웹 스토리지 값 열람 추가적인 HTML5 API - 웹 워커 - 웹 소켓 - Web SQL과 IndexedDB 그림 그리기로 되돌아가 보자
11장 캔버스, SVG와 드래그 앤 드롭
캔버스 - 캔버스의 역사 - canvas 요소 생성 - 캔버스에 그리기 - 컨텍스트 얻기 - 브러시에 색 입히기 - 캔버스에 사각형 그리기 - 캔버스 좌표 시스템 - fillStyle의 변형 - Path를 이용해 다른 모양 그리기 - 캔버스 그림 저장하기 - 이미지를 캔버스에 그리기 - 이미지 조작하기 - 컬러에서 흑백으로 이미지 변환하기 - getImageData에서의 보안 오류 - 캔버스로 비디오 조작하기 - 캔버스에 텍스트 표시하기 - 접근성에 대한 우려 - 추가 참고 자료 목록 SVG - SVG에서 그리기 - SVG 이미지 생성을 위한 잉크스케이프 활용 - SVG 필터 - 라파엘 라이브러리 활용 - 캔버스 vs. SVG 드래그 앤 드롭 - WAI-ARIA 고양이에게 먹이주기 - 드래그 가능한 요소 만들기 - DataTransfer 객체 - 드롭된 요소 받기 - 참고 자료 여기까지입니다!
부록A Modernizr
CSS에서 Modernizr 이용하기 자바스크립트에서 Modernizr 이용하기 인터넷 익스플로러 8과 그 이전 버전에서의 HTML5 요소에 대한 스타일 적용 지원 추가 참고 자료
부록B WAI-ARIA
WAI-ARIA가 어떻게 의미적 표현을 보완하는가 WAI-ARIA의 현재 상태 추가 참고 자료 목록
부록C 마이크로데이터
HTML5의 의미적 표현은 충분하지 않은가? 마이크로데이터 문법 이름-값 쌍 이해하기 마이크로데이터 네임스페이스 추가 참고 자료
HTML5 & CSS3, 이제는 실전이다!
책 제목인 [HTML5 & CSS3 실전에서는 이렇게 쓴다!]에서 느낄 수 있듯이 이 책은 웹 프로그래머와 디자이너가 실제로 사이트를 제작하면서 궁금해 하거나 참고할 수 있는 HTML5와 CSS3와 관련된 내용을 기본 뼈대로 삼는다. 이제 막 초보 딱지를 떼고 HTML과 CSS에 대한 개념을 익힌 프로그래머뿐 아니라 HTML5와 CSS3의 최신 기술을 직접 확인해보고 싶은 중급 프로그래머에게 이 책의 군더더기 없는 설명이 도움될 것이다.
이 책에서는 'HTML5 헤럴드'라는 구식 신문(www.thehtml5herald.com에 실제로 구현돼 있다) 웹 사이트를 HTML5와 CSS3의 새로운 기술을 이용해 실제로 하나씩 만들어 가는 식으로 구성돼 있으며, 새로운 기술을 설명할 때마다 다양한 브라우저에서의 지원 여부와 하위호환성에 대한 상세한 설명을 덧붙여 프로그래머가 새로운 기술을 자유롭게 적용할 수 있게 배려한다.
HTML5와 CSS3의 새로운 기능 외에도 Modernizr, WAI-ARAI 및 마이크로데이터와 같이 HTML5와 함께 쓰이는 필수 기술은 부록에서 자세히 다루고 있으며, 새로운 기능에 대해 좀 더 심도 있게 살펴보고 싶은 독자를 위해 꼼꼼하게 준비한 참고자료도 제공한다.
이 책에서 다루는 내용 -자체 HTML5 video를 이용해 귀찮은 플래시를 없애는 방법 -@font-face를 이용해 메시지의 의미를 부각시키는 폰트 타입 설정 -사용자가 좋아할 만한 지능적이고 자체 유효성 검사를 실시하는 웹 폼 제작 -모바일 환경에서 빛을 발하는 최신 웹 앱 제작 -SVG와 캔버스를 이용한 동적이고 효과적인 그래픽의 실시간 생성 -새로운 API를 이용한 위치 정보와 오프라인 기능 추가
총 
바보 빅터
