길벗·이지톡

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 프로젝트 사용하기