HTML5 솔루션

Chapter 01 HTML5 페이지 구조
Solution 1-1 | HTML5에서 DOCTYPE 만들기
Solution 1-2 | HTML5에서 문자 인코딩 선언문 만들기
Solution 1-3 | 도큐먼트를 섹션으로 나누기
Solution 1-4 | 구분할 수 있는 도큐먼트 영역 만들기
Solution 1-5 | aside 만들기
Solution 1-6 | 머리말(헤더) 만들기
Solution 1-7 | <h1> ~ <h6> 요소의 그룹화
Solution 1-8 | 꼬리말(푸터) 만들기
Solution 1-9 | HTML5 도큐먼트 내에 내비게이션 만들기
Solution 1-10 | 그림 삽입하기
Solution 1-11 | 브라우저 호환성


Chapter 02 HTML5 마크업
Solution 2-1 | HTML5에서 <hr> 태그 사용하기
Solution 2-2 | <iFrame> 태그 사용하기
Solution 2-3 | 페이지에 미디어 끼워 넣기
Solution 2-4 | <area> 태그 사용하기

Chapter 03 HTML5 구조와 시멘틱 요소
Basic | 마이크로데이터 이해하기
Solution 3-1 | itemprop와 itemscope 속성 사용하기
Solution 3-2 | 사용자 정의 어휘 목록 만들기
Solution 3-3 | 링크 타입과 관계 이해하기
Solution 3-4 | header와 hgroup 요소
Solution 3-5 | 이미지에 캡션 연결하기
Solution 3-6 | 시멘틱 구조 추가하기

Chapter 04 HTML5 Forms
Basic | 새로운 input 타입 이해하기
Solution 4-1 | e-mail input 타입 사용하기
Solution 4-2 | URL input 타입 사용하기
Solution 4-3 | 숫자에 대한 스피너 컨트롤 사용하기
Solution 4-4 | range input 타입 폼에 슬라이더 추가하기
Solution 4-5 | 다중 파일 보내기
Solution 4-6 | datalist 요소로 자동 완성 기능 만들기
Solution 4-7 | 폼 컨트롤 유효성 검사
Solution 4-8 | 정규 표현식을 이용하여 사용자 정의 input 타입 만들기
Solution 4-9 | input 필드에서 placeholder 텍스트 세팅하기
Solution 4-10 | 날짜와 시간 컨트롤 만들기

Chapter 05 HTML5의 미디어 요소, Audio와 Video
Solution 5-1 | 웹 페이지에 비디오 삽입하기
Solution 5-2 | 비디오를 지원하는 브라우저
Solution 5-3 | 사용자 정의 비디오 컨트롤러 만들기
Solution 5-4 | 비디오 프리로딩하기
Solution 5-5 | 비디오에 사용자 지정 탐색 바 만들기
Solution 5-6 | 다중 source video 요소 사용하기
Solution 5-7 | 풀 화면으로 비디오 열기
Solution 5-8 | 비디오에 마스크 적용하기
Solution 5-9 | audio 요소 사용하기


Chapter 06 HTML5 드로잉 API
Solution 6-1 | canvas 요소의 HTML5 드로잉 API 사용해서 그리기
Solution 6-2 | 패스와 좌표 사용하기
Solution 6-3 | 사각형과 원 그리기
Solution 6-4 | 단색으로 도형 채우기
Solution 6-5 | 그레이디언트 사용하여 도형 채우기
Solution 6-6 | 캔버스에 텍스트 그리기
Solution 6-7 | 상대 폰트 크기로 캔버스 텍스트 그리기
Solution 6-8 | PNG 파일로 도형 저장하기

Chapter 07 HTML5 Canvas
Solution 7-1 | 캔버스 API 이해하기
Solution 7-2 | 캔버스와 캔버스 텍스트 지원 감지
Solution 7-3 | 캔버스 변환과 표준 스크린 기반의 좌표계
Solution 7-4 | 픽셀 조작
Solution 7-5 | 그림자와 블러 효과 적용하기
Solution 7-6 | 애니메이션 캔버스

Chapter 08 HTML5 Communication API
Basic | postMessage API 이해하기
Basic | postMessage 통신 보안
Solution 8-1 | 브라우저의 postMessage API 지원 확인하기
Basic | 크로스 도큐먼트 메시징과 CORS
Solution 8-2 | 윈도우와 iframe 간 메시지 전송
Solution 8-3 | 실시간 웹 애플리케이션 구현을 위한 서버-이벤트 기술
Solution 8-4 | 메시지 채널을 이용하여 다른 브라우징 콘텍스트에서 코드 실행하기
Solution 8-5 | XMLHttpRequest Level 2를 이용한 파일 업로드
Solution 8-6 | XMLHttpRequest Level 2의 크로스 도메인 브라우저 지원 확인하기

Chapter 09 HTML5 웹소켓
Solution 9-1 | 브라우저의 웹소켓 지원 확인하기
Solution 9-2 | 웹소켓 연결 설정하기
Solution 9-3 | 웹소켓 이벤트 핸들링
Solution 9-4 | 웹소켓 API로 웹소켓 서버 사용하기

Chapter 10 HTML5 지오로케이션 API
Basic | 지오로케이션 API 이해하기
Solution 10-1 | 내비게이터 객체 사용하기
Solution 10-2 | 현재 위치 가져오기
Solution 10-3 | 위치 객체 사용하기
Solution 10-4 | 위치 에러 처리하기
Solution 10-5 | 사용자 위치 추적
Solution 10-6 | geo.js 오픈소스 라이브러리 사용하기

Chapter 11 HTML5 Local Storage
Solution 11-1 | 경우에 따라 연결되는 애플리케이션
Solution 11-2 | HTML5 스토리지 지원 확인하기
Solution 11-3 | 페이지에 manifest 선언하기
Solution 11-4 | ApplicationCache 객체 사용하기
Solution 11-5 | ApplicationCache 이벤트
Solution 11-6 | 로컬 캐시 삭제하기

Chapter 12 HTML5 접근성
Basic | 접근성의 4가지 원칙
Basic | WCAG의 목적
Solution 12-1 | nav 요소로 skip link 만들기
Solution 12-2 | 접근 가능한 표 형식의 데이터 만들기
Solution 12-3 | 접근 가능한 폼 만들기
Solution 12-4 | Video 요소를 사용하여 캡션과 주석달기
Solution 12-5 | ARIA 프로젝트 사용하기