이미지 검색을 사용해 보세요
검색창 이전화면 이전화면
최근 검색어
인기 검색어

소득공제
HTML5 핵심 API
사전처럼 바로 찾아 쓰는
베스트
IT 모바일 top100 7주
가격
32,000
10 28,800
YES포인트?
1,600원 (5%)
5만원 이상 구매 시 2천원 추가 적립
결제혜택
카드/간편결제 혜택을 확인하세요

이미 소장하고 있다면 판매해 보세요.

  •  해외배송 가능?
  •  문화비소득공제 가능

책소개

목차

추천사
옮긴이의 말
한국 독자들에게
지은이의 말
이 책의 내용과 대상 독자

CHAPTER 01 DOM 스크립팅의 기초
1.1 HTML5의 의의
1.1.1 웹 표준 명세에 없던 자바스크립트의 다양한 기능
1.1.2 기존의 API를 명세 하나로 정리한 HTML5
1.2 DOM 트리
1.2.1 DOM이란 무엇인가
1.2.2 DOM 트리란 무엇인가
1.2.3 브라우저마다 달랐던 DOM 트리
1.2.4 문법 오류가 있는 마크업 처리
1.3 DOM 트리 접근자
1.3.1 DOM 트리 접근자란 무엇인가
1.3.2 DOM 트리에 접근하는 속성
1.3.3 HTMLCollection 객체는 실시간이다
1.3.4 DOM 트리에 접근하는 함수
1.3.5 W3C에서 규정된 함수
1.4 HTML 문서 리소스의 정보
1.4.1 리소스 정보를 다루는 속성
1.4.2 URL 정보
1.4.3 최종 갱신 일시
1.4.4 렌더링 모드
1.4.5 문자 인코딩
1.4.6 문서 로딩 상태
1.5 마크업 삽입
1.5.1 마크업 추가
1.5.2 마크업 다시 쓰기
1.5.3 HTML 문서의 생성
1.5.4 보안
1.6 요소와 속성 제어
1.6.1 요소와 속성을 제어하는 API
1.6.2 요소를 제어하는 API
1.6.3 class 속성을 제어하는 classList API
1.6.4 커스텀 데이터 속성
1.7 Selectors API
1.7.1 Selectors API란 무엇인가
1.7.2 선택자
1.7.3 :visited 유사 클래스의 프라이버시 문제
1.7.4 Selectors API가 반환하는 NodeList는 실시간이 아니다
1.8 이벤트
1.8.1 웹 애플리케이션과 이벤트
1.8.2 이벤트 핸들러와 이벤트 리스너
1.8.3 load 이벤트
1.8.4 DOMContentLoaded 이벤트
1.9 타이머
1.9.1 타이머란 무엇인가
1.9.2 타이머를 이용한 예제
1.10 모달 창
1.10.1 window.alert(), window.confirm(), window.prompt()
1.10.2 커스텀 모달 창
1.11 페이지 URL을 다루는 Location API
1.11.1 Location API란 무엇인가
1.11.2 URL 분리 속성
1.12 방문 기록을 다루는 History API
1.12.1 History API란 무엇인가
1.12.2 세션 기록 관련 이벤트
1.13 Navigator 객체
1.13.1 Navigator 객체란 무엇인가
1.13.2 브라우저 식별 정보
1.13.3 네트워크 접속 정보
1.14 브라우저 인터페이스
1.14.1 각종 바가 표시되는지를 판별하는 속성
1.15 포커스
1.15.1 포커스란 무엇인가
1.15.2 문서의 포커스
1.15.3 요소의 포커스

CHAPTER 02 폼
2.1 폼의 기초
2.1.1 HTML5에서 더욱 충실해진 UI
2.1.2 새로운 컨트롤
2.1.3 입력값을 제한하는 속성
2.1.4 유효성 검사
2.1.5 유효성 검사 대상이 되는 요소
2.1.6 유효성 검사를 피하는 방법
2.2 폼 이벤트
2.2.1 폼과 관련된 이벤트
2.2.2 change 이벤트와 formchange 이벤트
2.2.3 input 이벤트와 forminput 이벤트
2.2.4 invalid 이벤트
2.2.5 select 이벤트
2.2.6 submit 이벤트
2.3 폼 유효성 검사 API
2.3.1 폼 유효성 검사 API란
2.3.2 유효성 검사를 임의의 시점에 실행
2.3.3 유효성 검사 오류 안내 수정
2.3.4 유효성 검사의 결과를 실시간으로 획득
2.3.5 유효성 검사 오류의 원인
2.3.6 독자적인 유효성 검사를 정의
2.3.7 폼 유효성 검사 API의 주의점
2.4 텍스트 필드 선택
2.4.1 텍스트 필드를 선택하는 API
2.4.2 전체 선택
2.4.3 선택 텍스트의 시작 위치와 종료 위치
2.4.4 범위를 지정하여 텍스트를 선택하기
2.5 HTML5에서 새로 도입된 폼 요소
2.5.1 새 폼 요소 세 가지
2.5.2 output 요소
2.5.3 progress 요소
2.5.4 meter 요소
2.6 폼 API 레퍼런스
2.6.1 크게 늘어난 폼 관련 API
2.6.2 HTMLFormControlsCollection 객체
2.6.3 RadioNodeList 객체
2.6.4 HTMLOptionsCollection 객체
2.6.5 DOMSettableTokenList 객체
2.6.6 ValidityState 객체

CHAPTER 03 Canvas
3.1 Canvas의 특징
3.1.1 Canvas란 무엇인가
3.1.2 비트맵 그래픽
3.1.3 Canvas의 장점
3.1.4 Canvas의 명세
3.2 canvas 요소
3.2.1 canvas 요소 준비
3.2.2 canvas 요소의 지원 여부 판단
3.3 좌표계
3.3.1 Canvas의 좌표계
3.4 2D 컨텍스트
3.4.1 2D 컨텍스트 객체 얻기
3.4.2 부모 canvas 요소의 노드 객체 참조
3.5 사각형
3.5.1 사각형 그리기
3.6 색
3.6.1 색 지정하기
3.7 반투명
3.7.1 투명도 지정하기
3.8 그라데이션
3.8.1 그라데이션 지정하기
3.8.2 선형 그라데이션
3.8.3 원형 그라데이션
3.9 패스를 이용한 복잡한 도형
3.9.1 사각형 이외의 도형을 그리는 방법
3.9.2 패스란
3.9.3 서브패스란
3.9.4 서브패스가 교차했을 때의 채우기
3.9.5 원호
3.9.6 베지에르 곡선
3.9.7 사각형
3.10 선의 스타일
3.10.1 선의 스타일에 관한 Canvas의 기능
3.10.2 선의 굵기
3.10.3 선끝의 모양
3.10.4 연결 모양
3.11 텍스트
3.11.1 Canvas의 텍스트 그리기
3.11.2 텍스트 그리기
3.11.3 웹 폰트의 이용
3.11.4 정렬
3.11.5 문자의 길이 측정
3.12 섀도우
3.12.1 선의 스타일에 관한 Canvas의 기능
3.13 패턴
3.13.1 패턴으로 채우기
3.14 이미지의 사용
3.14.1 외부 이미지를 Canvas 안에 사용하기
3.14.2 레이어
3.15 합성
3.15.1 Porter-Duff 합성
3.15.2 Canvas의 이미지 합성 패턴
3.15.3 합성을 사용한 이미지
3.16 픽셀 조작
3.16.1 비트맵 정보에 직접 접근하기
3.16.2 보안
3.17 클리핑
3.17.1 클리핑 영역 정하기
3.18 좌표 공간의 변환
3.18.1 도형 변환하기
3.18.2 변환 조합하기
3.18.3 변환 매트릭스
3.18.4 변환 매트릭스의 응용
3.19 그리기 상태 관리
3.19.1 그리기 상태를 한 번에 관리하기
3.20 도형의 내부, 외부 구별
3.20.1 도형의 안과 밖 구별하기
3.21 Canvas의 이미지 출력
3.21.1 canvas 요소의 노드 객체의 이미지 출력에 관한 API
3.22 애니메이션
3.22.1 Canvas를 이용한 애니메이션의 구현
3.22.2 성능

CHAPTER 04 비디오와 오디오
4.1 마크업의 개요
4.1.1 HTML5에서 새롭게 추가된 요소
4.2 video 요소
4.2.1 video 요소의 마크업
4.2.2 불리언 속성의 프로퍼티
4.2.3 표시 크기와 실제 크기
4.2.4 preload와 autobuffer
4.2.5 video 요소의 지원 여부 판별
4.3 audio 요소
4.3.1 audio 요소의 마크업
4.3.2 Audio()
4.3.3 audio 요소의 지원 여부 판별
4.4 코덱
4.4.1 코덱과 컨테이너
4.4.2 MIME 형식
4.5 source 요소
4.5.1 source 요소란 무엇인가
4.6 MIME 형식으로부터 재생 가능 여부를 판단
4.6.1 재생 가능한 형식을 판별
4.7 선택된 파일 확인
4.7.1 어떤 파일이 선택되었는지 확인하기
4.8 네트워크 이용 상태 파악
4.8.1 내려받기까지의 변화를 실시간으로 파악
4.9 재생과 정지
4.9.1 미디어 리소스의 재생과 정지
4.9.2 iOS의 사파리에서 무효화되어 있는 기능
4.10 미디어 리소스 로드
4.10.1 강제로 미디어 요소를 재설정하기
4.10.2 미디어 데이터 획득 순서
4.11 미디어 데이터의 로드 상태 파악
4.11.1 미디어 데이터의 로드 상태를 실시간으로 파악하기
4.12 재생 속도
4.12.1 재생 속도 변경하기
4.13 길이와 재생 위치
4.13.1 길이와 재생 위치 파악하기
4.14 재생 완료와 버퍼링 완료의 범위
4.14.1 재생된 범위와 버퍼링 완료 범위를 파악하기
4.14.2 버퍼 삭제
4.15 탐색
4.15.1 탐색 상태 파악하기
4.16 음량 조절
4.16.1 음량 변경하기
4.17 오류 처리
4.17.1 오류 파악하기
4.18 이벤트
4.18.1 미디어 요소의 이벤트
4.18.2 로딩부터 재생 전까지의 이벤트
4.18.3 재생 및 일시 정지에서 발생하는 이벤트
4.18.4 조작에 의한 이벤트
4.18.5 오류에 의한 이벤트
4.19 커스텀 플레이어
4.19.1 더 편리한 기능을 포함한 플레이어 만들기
4.20 비디오와 Canvas의 조합
4.20.1 Canvas 안에 비디오 넣기
4.21 자막 넣기
4.21.1 비디오나 오디오에 자막 넣기

CHAPTER 05 텍스트 편집
5.1 편집 가능한 문서와 요소
5.1.1 웹 콘텐츠의 텍스트 편집
5.1.2 요소를 편집 가능하게 하기
5.1.3 문서 전체를 편집 가능하게 하기
5.2 Text Selection API
5.2.1 선택한 텍스트 정보 얻기
5.2.2 선택한 영역 추출하기
5.2.3 복수 영역 선택하기
5.2.4 선택 영역의 시작 위치와 종료 위치
5.2.5 선택 영역의 지정과 해제
5.2.6 선택 영역을 해제하고 커서의 위치 이동하기
5.2.7 여러 개의 선택 영역 다루기
5.3 Editing API
5.3.1 WISYWIG 편집기를 구현하는 Editing API
5.3.2 생성되는 HTML 코드
5.3.3 iframe을 사용하는 이유
5.4 명령
5.4.1 commandID
5.4.2 볼드체
5.4.3 이탤릭체
5.4.4 아래 첨자
5.4.5 위 첨자
5.4.6 커서 앞의 문자를 제거
5.4.7 커서 뒤의 문자를 제거
5.4.8 이미지 삽입
5.4.9 HTML 코드 삽입
5.4.10 텍스트 삽입
5.4.11 줄바꿈 삽입
5.4.12 순서 목록 삽입
5.4.13 비순서 목록 삽입
5.4.14 블록 요소의 치환
5.4.15 블록 분할
5.4.16 링크 생성
5.4.17 링크 해제
5.4.18 전체 선택
5.4.19 선택 해제
5.4.20 실행 취소
5.4.21 다시 실행
5.5 커스텀 WISYWIG 편집기
5.5.1 Text Selection API와 Editing API를 사용한 WISYWIG 편집기

CHAPTER 06 드래그 앤 드롭
6.1 드래그 앤 드롭의 개요
6.1.1 드래그 앤 드롭 API
6.2 드래그 앤 드롭의 이벤트
6.2.1 드래그 앤 드롭의 이벤트
6.3 기본 액션
6.3.1 기본 액션이란 무엇인가
6.4 임의의 요소를 드래그하기
6.4.1 draggable 속성
6.5 선택한 텍스트를 드래그하기
6.5.1 선택한 텍스트의 드래그 앤 드롭
6.6 데이터 전송
6.6.1 데이터 전송에 관한 API
6.7 다른 애플리케이션과의 연동
6.7.1 브라우저 이외의 애플리케이션과의 데이터 송수신
6.8 드래그 중인 아이콘을 지정
6.8.1 드래그 중인 아이콘
6.9 선택 텍몽트의 드래그 포인터
6.9.1 드래그 중인 마우스 포인터를 변경하기
6.10 PC의 파일을 드롭하기
6.10.1 PC에 있는 파일을 드롭

CHAPTER 07 File API
7.1 File API란
7.1.1 PC의 파일을 스크립트로 읽기
7.2 File 객체
7.2.1 파일 정보 얻기
7.3 FileReader 객체
7.3.1 파일 데이터 읽기
7.4 이벤트
7.4.1 파일을 읽는 과정에서 발생하는 이벤트
7.5 로드 상태
7.5.1 파일을 읽는 상태를 파악하기
7.6 파일 로드의 진행률
7.6.1 실시간으로 파일 읽기 처리의 진행률을 표시하기
7.7 오류 처리
7.7.1 오류의 원인 파악하기
7.8 파일 URI 생성하기
7.8.1 고유 URI를 생성하기

CHAPTER 08 웹 워커
8.1 웹 워커란
8.1.1 웹 워커란 무엇인가
8.1.2 프로세스, 스레드, 워커
8.1.3 블로킹
8.2 웹 워커 퀵 스타트
8.2.1 웹 워커의 사용 방법
8.3 웹 워커의 용도
8.3.1 웹 워커는 어디서 사용하는가
8.3.2 Ajax를 이용한 동적인 콘텐츠 로드
8.3.3 자동 완성
8.3.4 로직 분리
8.4 Worker 생성자와 Worker 객체
8.4.1 Worker 객체 얻기
8.4.2 메시지 보내기
8.4.3 워커 종료
8.4.4 이벤트 핸들러
8.5 워커의 전역 범위
8.5.1 전역 범위란 무엇인가
8.5.2 메시지 보내기
8.5.3 워커에서 외부의 자바스크립트의 파일 로드하기
8.5.4 이벤트 핸들러
8.5.5 워커의 종료
8.5.6 브라우저 정보 얻기
8.5.7 워커 자바스크립트 파일의 URL 정보 얻기
8.5.8 타이머
8.6 웹 워커에서 이용할 수 있는 다른 API
8.6.1 워커 안에서 사용할 수 있는 API
8.7 워커를 여러 개 실행하기
8.7.1 워커를 여러 개 실행하기
8.7.2 웹 워커의 성능
8.8 공유 워커
8.8.1 전용 워커와 공유 워커
8.8.2 공유 워커의 사용법
8.8.3 페이지의 API
8.8.4 공유 워커의 API
8.8.5 공유되는 값과 공유되지 않는 값

CHAPTER 09 Geolocation API
9.1 Geolocation API란
9.1.1 Geolocation API란 무엇인가
9.1.2 사용 허가
9.1.3 측지계
9.2 Geolocation API 퀵 스타트
9.2.1 위치 정보 얻기
9.3 현재 위치 얻기
9.3.1 getCurrentPosition() 함수
9.3.2 위치 정보를 얻었을 때의 처리
9.3.3 위치 정보를 얻지 못했을 때의 처리
9.3.4 옵션 매개변수
9.4 위치 정보를 연속해서 얻기
9.4.1 연속해서 위치 정보 얻기
9.4.2 GPS 고도
9.4.3 실시간 감시의 정지

INDEX

지은이 소개

저자 소개

저자 : 하타노 후토미(羽田野 太巳, はたの ふとみ)
유한 회사 futomi 대표 이사
주로 Perl로 호스팅 서버(공유 서버)에서도 사용할 수 있는 웹 애플리케이션 개발 및 판매를 하고 있다. 맞춤 웹 애플리케이션을 제작하거나 웹 서버 관리 업무도 한다. 2007년 http://html5.jp를 개설하여 Canvas를 사용한 자바스크립트 라이브러리 개발, HTML5 최신 정보 제공, HTML5 관련 명세 번역을 하고 있다.
역자 : 윤준
숭실대 미디어 학부를 졸업하고 동 대학원 모바일 랩에서 미디어 공학을 전공했다. 2007년부터 .NET과 실버라이트에 심취해 있으며, 사용자를 생각하는 UI/UX에 관심이 많다. 현재는 아이폰 개발 및 기획을 하고 있으며 스마트폰 열풍이 끝나면 브라우저의 세상이 오리라 믿으며 HTML5를 주시하고 있다. 웹 표준 커뮤니티 클리어보스(http://www.clearboth.org)에서는 번역 작업을, 웹 컨퍼런스 CSS Nite in Seoul(http://www.cssniteseoul.com)에서는 일본어 통역을 하며 웹을 공부하고 재능을 나누고 있다.

품목정보

발행일
2011년 11월 30일
쪽수, 무게, 크기
688쪽 | 1226g | 183*235*35mm
ISBN13
9788979148732

책 속으로

[한국 독자들에게]

안녕하세요, 한국에서 이 책을 출간하게 되어 매우 기쁩니다. 저는 1년 전에 HTML5 강연을 하려고 서울에 방문했었습니다. 듣던 대로 한국은 IT를 활용한 인프라, 스마트폰의 보급, 인터넷 통신 환경이 다른 나라보다 앞섰다는 것을 실감했습니다. 아시다시피 HTML5는 웹의 변화를 주도하지만 변화가 웹 페이지에만 국한된 것은 아닙니다. 점점 HTML5는 애플리케이션의 기반(플랫폼)으로 활용될 것입니다. 앞으로는 넓은 의미의 디스플레이의 뒷면에는 HTML5를 비롯한 웹 기술이 사용될 것입니다. 그야말로 HTML5가 웹 페이지를 넘어 다양한 애플리케이션에 사용되는 환경입니다. 한국은 이미 기반 준비를 끝낸 걸로 보입니다. 한국에서는 다른 나라보다 앞서 HTML5를 비롯한 웹 기술이 다양한 상황에서 빠르게 사용되리라 확신합니다. 한국의 웹 개발자들의 활약을 진심으로 기대하고 있습니다. 그리고 이 책이 웹 기술을 주도하는 분들에게 도움이 되면 좋겠습니다. 마지막으로 분량이 많은 이 책을 번역하느라 고생한 윤준 씨에게 감사의 뜻을 전하고 싶습니다. 그리고 이 책을 선택해 주신 모든 분들께 진심으로 감사드립니다.
- 2011년 11월 14일 일본에서, 하타노 후토미

[옮긴이 서문]
제가 HTML5를 접한 것은 2009년도에 CSS Nite in Seoul 행사에서 통역을 하면서 처음 알게 되었습니다. 당시 저는 실버라이트, RIA, UX에 심취해 있었는데 HTML5의 몇 가지 데모를 보면서(이 책에도 있는 움직이는 공 예제) "아니 저런 게 HTML과 자바스크립트만으로 가능하다니!"라며 큰 충격을 받았습니다. 2010년에도 CSS Nite in Seoul 행사에서 통역을 했었는데 당시 발표자였던 이 책의 저자인 하타노씨의 강의는 지금도 기억에 남습니다. 하타노씨는 근본적인 원리와 이 기술이 왜 나왔는지부터 아주 자세히 설명했었습니다. 이 책에는 저자의 그런 성향이 고스란히 담겨 있습니다. 이 책은 "어떤 API는 이런 기능과 동작을 하며 어떻게 쓰면 된다"가 아니라, "왜 이런 기능이 필요하며 어떠한 경위로 표준으로 책정 되었으며 그렇기 때문에 사용할 때는 이런저런 점에 주의해야 한다."로 전개됩니다. 이 책은 HTML5의 API 위주로 설명합니다. HTML5의 API라고 해도 그 양이 워낙 방대하기 때문에 그 중에서도 사용자가 직접적으로 접하는 UI와 그래픽, 오디오, 지오로케이션 등을 주된 내용으로 합니다. API 위주이다 보니 자바스크립트에 대한 내용이 많지만 1장부터 차근차근 살펴본다면 이해하는데 크게 어려움은 없을 것입니다. HTML5라는 새로운 기술이 세상에 알려진 지도 적지 않은 시간이 흘렀습니다. 갈수록 스마트폰과 함께 HTML5가 더욱 강한 영향을 끼치고 있습니다. HTML5가 웹 표준으로 자리 잡으면 앞으로 더욱 영향을 끼칠 것이기에 HTML5를 자세히 아는 것은 꼭 필요한 일입니다. 이미 HTML5를 많이 아는 분에게도, HTML5를 처음 접하는 분에게도 이 책은 도움이 되리라 생각합니다. 독자분들이 이 책을 읽고 HTML5를 좀 더 깊이 이해를 하실 수 있다면 저에게도 큰 기쁨일 것입니다. 이 책은 저의 첫 번역서입니다. 부족한 저에게 이런 큰 기회를 주신 한빛미디어의 조희진 씨에게 우선 감사를 전합니다. 그리고 CSS Nite in Seoul 행사 때 많은 도움을 주신 추지호 씨, 전승엽 씨에게 감사를 드리고, 이번 번역 일을 시작하는데 직접적으로 도움을 주신 이유미 씨에게도 감사드립니다. HTML5를 함께 공부하던 클리어보스의 HTML5 스터디 모임 멤버 여러분에게도 감사드립니다. 대학원 시절부터 함께하고 베타 리딩 때 도움을 준 이인석, 김선호 씨에게도 감사를 전합니다. 회사 일이 바쁜 와중에도 항상 신경써서 챙겨주는 박원형 씨, 지금은 함께 하지 않지만 저 때문에 마음 고생 심했을 허광남 팀장님께도 이 자리를 빌어 고마움을 전합니다. 얼굴은 뵙지 못했지만 분량이 많음에도 세세하게 베타 리딩을 해주신 한빛 리더스의 구혜정, 김현근, 전철욱, 지정수, 한윤석 씨에게도 진심으로 감사를 전합니다. 번역에 도움을 주고 추천사를 써주신 검은 태양-한선용 님께도 감사드립니다. 끝으로 항상 저의 마음에 안식을 주는 토기장이 식구들에게도 고마움을 전하고 싶습니다. 이 외에도 여기에 다 쓰지는 못하지만 제 주변에서 항상 저를 도와주시는 모든 분들께 감사를 드립니다.
_ 윤준

---옮긴이 서문 중에서

출판사 리뷰

어떤 독자를 위한 책인가?
-. 웹 애플리케이션의 기초를 배우려는 초보자
-. 웹 개발자 중 HTML5의 API를 중점적으로 배우고자 하는 개발자
-. 자바스크립트 개발을 전문으로 하는 개발자

리뷰/한줄평7

리뷰

8.8 리뷰 총점

한줄평

첫번째 한줄평을 남겨주세요.