HTML5 & CSS3 실전에서는 이렇게 쓴다!

01장 HTML5와 CSS3 소개

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의 의미적 표현은 충분하지 않은가?
마이크로데이터 문법
이름-값 쌍 이해하기
마이크로데이터 네임스페이스
추가 참고 자료