소장자료검색

책소개

HTML5와 CSS3을 도입하여 사용자 경험을 강화하려고 해도, 막상 사용자의 브라우저가 이를 지원하지 못하는 현실에 좌절하기가 십상이다. 이 책은 HTML5와 CSS3의 다양한 기능과 함께, 기존 브라우저에서도 최신 브라우저와 거의 같은 사용자 경험을 제공하는 방법(폴백)을 알려준다. 그동안 브라우저 호환성 문제로 HTML5와 CSS3을 도입하기 꺼려했던 웹 개발자라면, 이 책에서 명쾌한 해결책을 얻을 수 있을 것이다.

1부에서는 사용자 인터페이스와 관련된 태그, 웹 폼, 접근성 부분을 다루며, 2부에서는 캔버스, 비디오/오디오 임베딩 등의 보고 들을 수 있는 기술, 마지막 3부에서는 HTML5는 아니지만 관련 있는 웹 기술인 웹스토리지, 웹소켓, 지오로케이션(Geolocation) 등을 소개한다. 각 장의 마지막에서는 각 기술들이 가까운 미래에 어떻게 발전할지도 간략하게 살펴본다.

이 책에 수록된 모든 예제 코드는 출판사 스프링노트인 http://insightbook.springnote.com/pages/7669159에서 다운받을 수 있습니다.

목차

옮긴이의 글
지은이의 글
HTML5: 플랫폼 vs 명세
책의 구조
이 책에서 다루는 것
먼저 알아야 할 것
온라인 자원
감사의 글

1장 HTML5와 CSS3의 개요
1.1 웹 개발의 플랫폼
더 분명한 마크업
플러그인에 덜 의존하는 멀티미디어
더 나은 애플리케이션
문서 간 데이터 교환
웹 소켓
클라이언트 측 스토리지
더 좋은 인터페이스
더 좋은 폼
향상된 접근성
개선된 선택자
시각 효과
1.2 하위 호환성
1.3 아직 걸림돌이 남아 있습니다
인터넷 익스플로러
접근성
폐기된 태그들
회사들의 이해 관계
HTML5와 CSS3은 아직 진행 중인 명세입니다

1부 사용자 인터페이스 개선


2장 새로운 구조적 태그와 속성
Tip 1) 시맨틱 마크업으로 블로그 리뉴얼하기
모든 것은 올바른 독타입에서 시작합니다
헤터
푸터
내비게이션
내용과 섹션
article
aside와 사이드바
aside는 페이지의 사이드바가 아닙니다
스타일링
지원되지 않을 때는...
Tip 2) 커스텀 데이터 속성을 사용한 팝업
내용과 동작의 분리, 또는 온클릭이 왜 나쁜지
접근성을 개선해야 합니다
onclick을 없앱니다
커스텀 데이터 속성이 우리를 구원합니다!
지원되지 않을 때는...
미래에는
3장 사용자 중심의 웹 폼 만들기
Tip 3) 새로운 입력 필드로 데이터 설명하기
AwesomeCo의 프로젝트 폼 개선
기본적인 폼
range로 슬라이더 만들기
숫자와 스핀박스 다루기
날짜
이메일
URL
색깔
지원되지 않을 때는...
색상 선택기 교체
모더나이저
Tip 4) autofocus: 자동 포커스 이동
지원되지 않을 때는...
Tip 5) placeholder 속성으로 힌트 제공하기
간단한 회원가입 폼
자동완성 방지
지원되지 않을 때는...
Tip 6) contenteditable을 이용한 즉석 편집
프로필 폼
데이터 유지
지원되지 않을 때는...
편집 페이지를 만듭니다
미래에는
4장 CSS3로 더 나은 사용자 인터페이스 만들기
Tip 7) 가상 클래스로 테이블에 스타일 주기
주문서 개선
:nth-of-type으로 스트라이프 만들기
열에 따라 정렬하기 :nth-child
마지막 행을 굵게 하기 :last-child
거꾸로 찾기 :nth-last-child
지원되지 않을 때는...
HTML 마크업 변경
자바스크립트를 쓰세요
Tip 8) 링크 주소 프린트 - :after, content
CSS
지원되지 않을 때는...
Tip 9) 다단 레이아웃 만들기
단 나누기
지원되지 않을 때는...
Tip 10) 미디어 쿼리를 이용해 모바일 인터페이스 만들기
지원되지 않을 때는...
미래에는
5장 접근성 향상시키기
Tip 11) ARIA 역할을 이용해 내비게이션 힌트 주기
표지판(landmark) 역할
문서 구조 역할
지원되지 않을 때는...
Tip 12) 갱신할 수 있는 영역을 접근성 있게 만들기
페이지 만들기
공손합 업데이트 대 고압적 업데이트
전체 업데이트
영역 숨기기
지원되지 않을 때는...
미래에는

2부 보는 것과 듣는 것을 새롭게

6장 캔버스에 그리기
Tip 13) 로고 그리기
로고 그리기
텍스트 넣기
선 그리기
시작점 옮기기
색칠하기
지원되지 않을 때는...
Tip 14) RGraph 라이브러리로 통계 그래프 그리기
HTML로 데이터 표현
HTML을 막대그래프로 바꾸기
대체 내용 보여주기
지원되지 않을 때는...
미래에는
7장 오디오와 비디오
7.1 역사
7.2 컨테이너와 코덱
비디오 코덱
코덱과 지원 브라우저
H.264
테오라
VP8
오디오 코덱
코덱과 지원 브라우저
AAC
Vorbis (OGG)
MP3
컨테이너와 코덱
Tip 15) 오디오 다루기
간단한 리스트 만들기
지원되지 않을 때는...
Tip 16) 비디오 다루기
지원되지 않을 때는...
HTML5 비디오의 한계
오디오, 비디오, 접근성
미래에는
8장 눈을 즐겁게
Tip 17) 테두리를 둥글게
로그인 폼을 부드럽게
브라우저 전용 규칙
지원되지 않을 때는...
브라우저 지원 확인
jQuery Corners
formCorners 플러그인을 만들어봅시다
둥글게 둥글게
미세 조정
Tip 18) 그림자, 그래디언트, 변형 다루기
기본적인 구조
그래디언트 넣기
그림자 넣기
이름표 회전
반투명한 배경
지원되지 않을 때는...
회전
그래디언트
투명도
합치기
Tip 19) 진짜 서체 사용하기
@font-face
서체 포맷
형식과 지원 브라우저
서체 바꾸기
지원되지 않을 때는...
미래에는

3부 HTML5를 넘어서

9장 클라이언트 측 데이터로 작업하기
Tip 20) localStorage로 사용자 설정 저장하기
사용자 설정 폼 만들기
설정 저장하고 부르기
설정 적용하기
지원되지 않을 때는...
서버에 보관
쿠키와 자바스크립트
Tip 21) 클라이언트 측 관계형 데이터베이스
브라우저에서 CRUD
노트 인터페이스
데이터베이스 연결하기
노트 테이블 만들기
노트 불러오기
특정 레코드 가져오기
레코드의 삽입, 업데이트, 삭제
감싸기
지원되지 않을 때는...
Tip 22) 오프라인으캷 작업하기
매니페스트로 캐시 정의하기
매니페스트와 캐시
미래에는
10장 다른 API 이용하기
Tip 23) 히스토리 보존하기
현재 상태 저장하기
이전 상태 불러오기
초기화
지원되지 않을 때는...
Tip 24) 도메인 사이의 대화
고객지원 리스트
메시지 작성
고객지원 사이트
메시지 받기
지원되지 않을 때는...
Tip 25) 채팅과 웹소켓
채팅 인터페이스
서버에게 말하기
지원되지 않을 때는...
소켓.. 뭐라고요?
서버
Tip 26) 지오로케이션: 여긴 어딘가
AwesomeCenter 찾아가기
사용자 찾기
지원되지 않을 때는...
미래에는
11장 곧 우리 곁으로 올 것
11.1 CSS3 트랜지션
타이밍 함수
11.2 웹 워커
11.3 내장된 드래그 앤 드롭 지원
드래그 앤 드롭 이벤트
요소 드롭하기
스타일 바꾸기
파일 드래깅
제대로 되는 게 없습니다
11.4 WebGL
11.5 색인된 데이터베이스 API
11.6 폼 유효성 검사
11.7 아직 걸림돌이 남아 있습니다
부록 A 기능 색인
A.1 새로운 요소
A.2 속성
A.3 폼
A.4 폼 필드 속성
A.5 접근성
A.6 멀티미디어
A.7 CSS3
A.8 클라이언트 측 스토리지
A.9 기타 API
부록 B jQuery 기초
B.1 jQuery 불러오기
B.2 jQuery 기본
B.3 내용을 수정하는 메서드
hide와 show
html, val, attr
append, prepend, wrap
CSS와 클래스
체인
B.4 요소 만들기
B.5 이벤트
bind
원래 이벤트
B.6 문서가 준비되었을 때
부록 C 오디오와 비디오 인코딩
C.1 음악 인코딩
C.2 동영상 인코딩
부록 D 참고 자료
D.1 웹