01장 HTML5의 개요
지금까지의 이야기-HTML5의 역사
2022년 신화와 그것이 중요하지 않은 이유
누가 HTML5를 개발하는가?
새로운 비전
- 호환성과 소길 내기
- 유용성과 사용자 우선 주의
- 상호 호환성과 단순화
- 보편적인 접근성
플러그인이 필요없는 패러다임
- 무엇이 추가되고 무엇이 없어졌나?
HTML5의 새로운 특징
- 새로운 DOCTYPE과 문자셋
- 새로운 요소와 비권장 요소
- 의미 있는 마크업
- 선택자 API로 간단히 선택하기
- 자바스크립트 로깅과 디버깅
- window.JSON
- DOM 레벨 3
- 빠른 자바스크립트 엔진들
정리
02장 HTML5 캔버스 API 사용하기
HTML5 캔버스 개요
- 역사
- 캔버스란?
- 캔버스 좌표
- 캔버스를 사용해서는 안 되는 경우
- 대체 콘텐츠
- CSS와 캔버스
- HTML5 캔버스를 지원하는 브라우저
HTML5 캔버스 API 사용하기
- 브라우저 지원 여부 확인
- 페이지에 캔버스 추가하기
- 그림 변환하기
- 패스 다루기
- 선 스타일 사용하기
- 면 스타일 다루기
- 사각형 콘텐츠 채우기
- 곡선 그리기
- 캔버스에 이미지 넣기
- 그라디언트 사용하기
- 배경 패턴 사용하기
- 캔버스 객체 크기 조절하기
- 캔버스 변형 이용하기
- 캔버스 텍스트 사용하기
- 그림자 적용
- 픽셀 데이터 다루기
- 캔버스 보안 구현하기
HTML5 캔버스 애플리케이션 만들기
- 기타 예제: 전체 페이지를 덮는 유리 패널
정리
03장 HTML5 오디오와 비디오
HTML5 오디오와 비디오 개요
- 비디오 컨테이너
- 오디오 및 비디오 코덱
- 오디오 및 비디오의 제한사항
- HTML5 오디오와 비디오를 지원하는 브라우저
HTML5 오디오 및 비디오 API 사용하기
- 브라우저 지원 여부 확인하기
- 미디어 요소 이해하기
- 오디오 사용하기
- 비디오 다루기
- 기타 예제
정리
04장 HTML5 지오로케이션 API 사용하기
위치 정보란?
- 위도, 경도 좌표
- 위치 정보의 근원
- IP 주소 기반 지오로케이션 데이터
- 위성 위치 확인 시스템의 지오로케이션 데이터
- Wi-Fi 기반 지오로케이션 데이터
- 휴대전화 지오로케이션 데이터
- 사용자 정의 지오로케이션 데이터
HTML5 지오로케이션을 지원하는 브라우저
개인 정보
- 개인 정보 보호 메커니즘
- 위치 정보 사용하기
HTML5 지오로케이션 API 사용하기
- 브라우저 지원 여부 확인하기
- 위치 요청
HTML5 지오로케이션을 이용한 실시간 애플리케이션 제작
- HTML 화면 작업
- 지오로케이션 데이터 처리
- 최종 코드
기타 예제
- 내 위치는 어디일까?
- 구글 맵에서 내 위치 보기
요약
05장 커뮤니케이션 API 사용하기
다른 도메인 문서 간 메시징
- 도메인 보안의 이해
- 다른 도메인 간의 문서 메시징을 위한 브라우저 지원
- postMessage API 사용하기
- postMessage API로 애플리케이션 만들기
XMLHttpRequest 레벨 2
- 다른 도메인 간 XMLHttpRequest
- 단계적 응답 이벤트
- HTML5 XMLHttpRequest 레벨 2를 지원하는 브라우저
- XMLHttpRequest API 사용하기
- XMLHttpRequest로 애플리케이션 만들기
기타 예제
- 구조적 데이터
- 프레임버스팅
정리
06장 HTML5 웹소켓 API
HTML5 웹소켓 개요
- 실시간과 HTTP
- HTML5소켓의 이해
HTML5 웹소켓의 브라우저 지원
간단한 에코 웹소켓 서버 만들기
HTML5 웹소켓 API
- 브라우저 지원 여부 확인
- 기본 API사용법
HTML5 웹소켓으로 애플리케이션 만들기
- HTML파일 작성
- 웹소켓 코드 추가
- 지오로케이션코드 추가
- 총정리
최종 코드
정리
07장 HTML5 폼 API
HTML5 폼의 개요
- HTML Forms vs. XForms
- 기능적인 폼
- HTML5 폼의 브라우저 지원
- Input 목록
HTML5 Form API의 활용
- 새로운 폼 속성과 기능
- 폼 유효성 검사
- 유효성 피드백
HTML5 Form을 이용한 애플리케이션 구축
- 기타 예제
정리
08장 HTML5 웹워커 API
HTML5 Web Workers의 브라우저 지원
HTML5 웹워커API의 사용
- 브라우저 지원 여부 검사
- HTML5 Web Workers 생성
- 추가 자바스크립트의 로딩과 실행
- HTML5 Web Workers와의 통신
메인 페이지 코드
- HTML5 Web Worker중지
- 타이머 사용
- 예제 코드
HTML5 웹워커를 이용한 애플리케이션 구축
- blur.js 도우미 스크립트
- blur.html 애플리케이션 페이지
- blurWorker.js Web Worker 스크립트
- 웹워커와의 통신
- 애플리케이션 실행
- 예제 코드
정리
09장 HTML5 웹스토리지 API
HTML5 웹스토리지의 개요
HTML5 웹스토리지의 브라우저 지원
HTML5 웹스토리지 API 사용
- 브라우저 지원 여부 확인
- 값 설정과 조회
- 데이터 누출 방지
- 로컬 스토리지와 세션 스토리지
- 기타 웹스토리지 API속성과 함수
- 웹스토리지 업데이트
- 웹스토리지 살펴보기
HTML5 웹스토리지를 이용한 애플리케이션 만들기
브라우저 데이터베이스 스토리지의 미래
- JSON 객체 스토리지
- 윈도우 간의 공유
정리
10장 HTML5 오프라인 웹 애플리케이션 만들기
HTML5 오프라인 웹 애플리케이션의 개요
- HTML5 오프라인 웹 애플리케이션의 브라우저 지원
HTML5 오프라인 웹 애플리케이션 API의 사용.
- 브라우저 지원 여부 검사
- 간단한 오프라인 애플리케이션 만들기
- 오프라인 이벤트
- 매니페스트 파일
- applicationCache API
HTML5 오프라인 웹 애플리케이션으로 애플리케이션 만들기
- 애플리케이션 리소스를 위한 매니페스트 파일 만들기
- UI를 위한 HTML 구조와 CSS 만들기
- 오프라인 자바스크립트 만들기
- ApplicationCache 지원 여부 확인
- 업데이트 버튼 핸들러 추가
- 지오로케이션 추적 코드 추가
- 스토리지 코드 추가
- 오프라인 이벤트 핸들러 추가
정리
11장 HTML5의 미래
HTML5의 브라우저 지원
HTML의 발전
WebGL
- 기기
- 오디오 데이터 API
- 비디오의 발전
- 터치스크린 기기 이벤트
- P2P 네트워크
- 최종 목표
정리
지금까지의 이야기-HTML5의 역사
2022년 신화와 그것이 중요하지 않은 이유
누가 HTML5를 개발하는가?
새로운 비전
- 호환성과 소길 내기
- 유용성과 사용자 우선 주의
- 상호 호환성과 단순화
- 보편적인 접근성
플러그인이 필요없는 패러다임
- 무엇이 추가되고 무엇이 없어졌나?
HTML5의 새로운 특징
- 새로운 DOCTYPE과 문자셋
- 새로운 요소와 비권장 요소
- 의미 있는 마크업
- 선택자 API로 간단히 선택하기
- 자바스크립트 로깅과 디버깅
- window.JSON
- DOM 레벨 3
- 빠른 자바스크립트 엔진들
정리
02장 HTML5 캔버스 API 사용하기
HTML5 캔버스 개요
- 역사
- 캔버스란?
- 캔버스 좌표
- 캔버스를 사용해서는 안 되는 경우
- 대체 콘텐츠
- CSS와 캔버스
- HTML5 캔버스를 지원하는 브라우저
HTML5 캔버스 API 사용하기
- 브라우저 지원 여부 확인
- 페이지에 캔버스 추가하기
- 그림 변환하기
- 패스 다루기
- 선 스타일 사용하기
- 면 스타일 다루기
- 사각형 콘텐츠 채우기
- 곡선 그리기
- 캔버스에 이미지 넣기
- 그라디언트 사용하기
- 배경 패턴 사용하기
- 캔버스 객체 크기 조절하기
- 캔버스 변형 이용하기
- 캔버스 텍스트 사용하기
- 그림자 적용
- 픽셀 데이터 다루기
- 캔버스 보안 구현하기
HTML5 캔버스 애플리케이션 만들기
- 기타 예제: 전체 페이지를 덮는 유리 패널
정리
03장 HTML5 오디오와 비디오
HTML5 오디오와 비디오 개요
- 비디오 컨테이너
- 오디오 및 비디오 코덱
- 오디오 및 비디오의 제한사항
- HTML5 오디오와 비디오를 지원하는 브라우저
HTML5 오디오 및 비디오 API 사용하기
- 브라우저 지원 여부 확인하기
- 미디어 요소 이해하기
- 오디오 사용하기
- 비디오 다루기
- 기타 예제
정리
04장 HTML5 지오로케이션 API 사용하기
위치 정보란?
- 위도, 경도 좌표
- 위치 정보의 근원
- IP 주소 기반 지오로케이션 데이터
- 위성 위치 확인 시스템의 지오로케이션 데이터
- Wi-Fi 기반 지오로케이션 데이터
- 휴대전화 지오로케이션 데이터
- 사용자 정의 지오로케이션 데이터
HTML5 지오로케이션을 지원하는 브라우저
개인 정보
- 개인 정보 보호 메커니즘
- 위치 정보 사용하기
HTML5 지오로케이션 API 사용하기
- 브라우저 지원 여부 확인하기
- 위치 요청
HTML5 지오로케이션을 이용한 실시간 애플리케이션 제작
- HTML 화면 작업
- 지오로케이션 데이터 처리
- 최종 코드
기타 예제
- 내 위치는 어디일까?
- 구글 맵에서 내 위치 보기
요약
05장 커뮤니케이션 API 사용하기
다른 도메인 문서 간 메시징
- 도메인 보안의 이해
- 다른 도메인 간의 문서 메시징을 위한 브라우저 지원
- postMessage API 사용하기
- postMessage API로 애플리케이션 만들기
XMLHttpRequest 레벨 2
- 다른 도메인 간 XMLHttpRequest
- 단계적 응답 이벤트
- HTML5 XMLHttpRequest 레벨 2를 지원하는 브라우저
- XMLHttpRequest API 사용하기
- XMLHttpRequest로 애플리케이션 만들기
기타 예제
- 구조적 데이터
- 프레임버스팅
정리
06장 HTML5 웹소켓 API
HTML5 웹소켓 개요
- 실시간과 HTTP
- HTML5소켓의 이해
HTML5 웹소켓의 브라우저 지원
간단한 에코 웹소켓 서버 만들기
HTML5 웹소켓 API
- 브라우저 지원 여부 확인
- 기본 API사용법
HTML5 웹소켓으로 애플리케이션 만들기
- HTML파일 작성
- 웹소켓 코드 추가
- 지오로케이션코드 추가
- 총정리
최종 코드
정리
07장 HTML5 폼 API
HTML5 폼의 개요
- HTML Forms vs. XForms
- 기능적인 폼
- HTML5 폼의 브라우저 지원
- Input 목록
HTML5 Form API의 활용
- 새로운 폼 속성과 기능
- 폼 유효성 검사
- 유효성 피드백
HTML5 Form을 이용한 애플리케이션 구축
- 기타 예제
정리
08장 HTML5 웹워커 API
HTML5 Web Workers의 브라우저 지원
HTML5 웹워커API의 사용
- 브라우저 지원 여부 검사
- HTML5 Web Workers 생성
- 추가 자바스크립트의 로딩과 실행
- HTML5 Web Workers와의 통신
메인 페이지 코드
- HTML5 Web Worker중지
- 타이머 사용
- 예제 코드
HTML5 웹워커를 이용한 애플리케이션 구축
- blur.js 도우미 스크립트
- blur.html 애플리케이션 페이지
- blurWorker.js Web Worker 스크립트
- 웹워커와의 통신
- 애플리케이션 실행
- 예제 코드
정리
09장 HTML5 웹스토리지 API
HTML5 웹스토리지의 개요
HTML5 웹스토리지의 브라우저 지원
HTML5 웹스토리지 API 사용
- 브라우저 지원 여부 확인
- 값 설정과 조회
- 데이터 누출 방지
- 로컬 스토리지와 세션 스토리지
- 기타 웹스토리지 API속성과 함수
- 웹스토리지 업데이트
- 웹스토리지 살펴보기
HTML5 웹스토리지를 이용한 애플리케이션 만들기
브라우저 데이터베이스 스토리지의 미래
- JSON 객체 스토리지
- 윈도우 간의 공유
정리
10장 HTML5 오프라인 웹 애플리케이션 만들기
HTML5 오프라인 웹 애플리케이션의 개요
- HTML5 오프라인 웹 애플리케이션의 브라우저 지원
HTML5 오프라인 웹 애플리케이션 API의 사용.
- 브라우저 지원 여부 검사
- 간단한 오프라인 애플리케이션 만들기
- 오프라인 이벤트
- 매니페스트 파일
- applicationCache API
HTML5 오프라인 웹 애플리케이션으로 애플리케이션 만들기
- 애플리케이션 리소스를 위한 매니페스트 파일 만들기
- UI를 위한 HTML 구조와 CSS 만들기
- 오프라인 자바스크립트 만들기
- ApplicationCache 지원 여부 확인
- 업데이트 버튼 핸들러 추가
- 지오로케이션 추적 코드 추가
- 스토리지 코드 추가
- 오프라인 이벤트 핸들러 추가
정리
11장 HTML5의 미래
HTML5의 브라우저 지원
HTML의 발전
WebGL
- 기기
- 오디오 데이터 API
- 비디오의 발전
- 터치스크린 기기 이벤트
- P2P 네트워크
- 최종 목표
정리