이미 소장하고 있다면 판매해 보세요.
|
1장 HTML5 소개
___간추린 HTML의 역사 ___HTML5가 필요한 이유 ______가려움 ______가려운 곳 긁기 ___HTML5의 새로운 면 ______내용 구조화 엘리먼트 ______양식 ______미디어 관련 엘리먼트 ___HTML5로 만든 견본 웹페이지 뜯어보기 ______한 줄씩 코드 분석 ___HTML5에 대한 오해 ______CSS3에 대한 오해 ______웹 폰트에 대한 오해 ______위치 정보에 대한 오해 ______SVG에 대한 오해 ______웹 저장소에 대한 오해 ______웹 워커에 대한 오해 ______웹 소켓에 대한 오해 ___정리 ______HTML5 관련 추가 정보 2장 자바스크립트 기초 ___자바스크립트 훑어보기 ___제이쿼리 ______제이쿼리란? ______제이쿼리를 쓰는 이유 ______속임수일까? ______자바스크립트를 제대로 이해하지 못했다는 뜻인가? ______제이쿼리를 사용하려면 어떻게 해야 할까? ___HTML 페이지에 자바스크립트 추가 ___웹페이지 탑재 후 자바스크립트 실행 ______잘못된 방법(window.onload 이벤트 방식) ______어려운 방법(DOM 방식) ______쉬운 방법(제이쿼리 방식) ___변수와 데이터 타입 ______변수 ______데이터 타입 ___제어문 ______if문 ______비교 연산자 ______if문과 복합 조건 ______else문과 else if문 ___함수 ______함수 작성 ______함수 호출 ___객체 ______객체란? ______객체 생성과 사용 ___배열 ______배열 작성 ______배열 접근과 수정 ___반복문 ___타이머 ______일회용 타이머 설정 ______일회용 타이머 해제 ______반복 타이머 설정 ______반복 타이머 해제 ___DOM ______HTML 웹페이지 예 ______자바스크립트만으로 DOM에 접근하는 방법 ______제이쿼리로 DOM에 접근하는 방법 ______DOM 조작 ___정리 3장 캔버스 기초 학습 ___canvas 엘리먼트와 친해지기 ______캔버스를 지원하는 브라우저 ___2차원 렌더링 컨텍스트 ______좌표계 ______2차원 렌더링 컨텍스트에 접근 ___간단한 도형과 선 그리기 ______선 ______원 ___스타일 ______선의 두께 바꾸기 ___텍스트 그리기 ___캔버스를 지우기 ______너비/높이 기교 ___캔버스로 브라우저 창 채우기 ___정리 4장 캔버스 심화 학습 ___그리기 상태 저장과 복원 ______캔버스의 그리기 상태란? ______그리기 상태 저장 ______그리기 상태 복원 ______여러 그리기 상태 저장과 복원 ___변환 ______이동 ______크기 조절 ______회전 ______변환 행렬 ___합성 ______전역 투명도 ______합성 연산 ___그림자 ___그레이디언트 ___복합 경로 ______베지어 곡선 ___이미지 파일로 캔버스 내보내기 ___정리 5장 이미지와 동영상 조작 ___캔버스에 이미지 탑재 ___이미지 크기 조절과 자르기 ______이미지 크기 조절 ______이미지 자르기 ______그림자 ___이미지 변환 ______이동 ______회전 ______크기 조절하며 뒤집기 ___픽셀 값에 접근 ______보안 문제 ___처음부터 이미지 만들기 ______픽셀 색상 무작위로 설정 ______모자이크 효과 ___이미지에 기본 효과 적용 ______색상 반전 ______회색조 ______픽셀 처리 ___동영상 조작 ______HTML5의 video 엘리먼트 생성 ______HTML5 동영상 API에 접근 ______캔버스 설정 ___정리 6장 사물 움직이기 ___캔버스에서의 애니메이션 ___애니메이션 루프 작성 ______애니메이션 루프 ______수정하고, 지우고, 그리기 ___그릴 도형 기억 ______잘못된 방법 ______올바른 방식 ______도형을 무작위로 만들기 ___방향 전환 ___원을 따라 움직이기 ______삼각법 ______모든 것을 한 자리에 놓기 ___경계선에서 객체 튕기기 ___정리 7장 향상된 애니메이션 구현 ___물리학 개론 ______물리학이란? ______이미지를 처리하는 데 도움이 되는 이유 ______기본 용어 ______뉴턴의 운동 법칙 ___물리학을 이용한 애니메이션 ______사전 준비 ______속도 ______경계선 추가 ______가속도 ______마찰력 ___충돌 처리 ______충돌 검출 ______서로 부딪힌 객체끼리 튕겨내기 ______운동량 보존 ___정리 8장 우주 볼링 게임 제작 ___게임 개요 ______요구 사항 ___핵심 기능 설정 ______HTML 표시 ______멋지게 만들기 ______자바스크립트 설정 ___사용자 인터페이스 활성화 ___게임 객체 생성 ______기지 생성 ______소행성 설정 ______플레이어의 소행성 설정 ______UI 갱신 ___사물 움직이기 ___사용자 상호 작용의 검출 ______모두 설정 ______플레이어 소행성 선택 ______추진력 증가 ______놓아주기 ______사용자 입력 시각화 ___플레이어 재설정 ___플레이어가 이기게 하기 ______점수 갱신 ______플랫폼에서 소행성 제거 ___정리 9장 소행성 회피 게임 시작 ___게임 개요 ______요구 사항 ___핵심 기능 설정 ______HTML 표시 ______멋지게 만들기 ______자바스크립트 설정 ___게임 객체 생성 ______소행성 설정 ______플레이어의 로켓 설정 ___키보드 입력 감지 ______키 코드 ______키보드 이벤트 ___사물 움직이기 ___횡스크롤 효과 꾸미기 ______소행성 재활용 ______경계 추가 ______로켓이 계속 이동하게 하기 ___소리 추가 ___게임 마무리 ______점수 매기기 ______로켓 파괴 ___난이도 높이기 ___정리 10장 캔버스의 미래 ___캔버스와 SVG ______접근성 ______비트맵과 벡터 ___캔버스와 플래시 ______자바스크립트 개발자는 플래시 개발자에게 배울 수 있다 ______플래시처럼 사용자 친화적인 편집기가 캔버스에는 없다 ___캔버스와 성능 ______성능 시험 ___캔버스 게임 라이브러리와 애니메이션 라이브러리 ___삼차원 세계 ___주변 기기와 통합 ______무지개 프로젝트 ___웹 소켓으로 멀티플레이 구현 ___영감을 주는 게임 ______스케치 아웃(Sketch Out) ______Z-타입 ______꼬불이(Sinous) ___정리 |
|
몇 년 전에 나에게 책을 쓰는 것을 상상할 수 있겠냐고 물어 봤다면 나는 불가능하다고 대답했을 테다. 하지만 어느덧 나는 HTML5 캔버스에 관한 한은 아주 유용한 책의 저자가 됐다. 내가 캔버스를 배우기 시작했을 때부터 지금까지 2년간 지녀왔던 소원은 책을 집필하는 것이었다. 그 당시에는 캔버스와 관련된 참조 자료가 매우 드물었다. 다행히도 지금은 상황이 많이 개선됐다.
지난 2년 동안 캔버스를 경험하고, 막 빛을 보기 시작한 새로운 웹 기술을 실험하는 일에 많은 시간을 할애했다. 2010년 9월 인터랙티브한 공 모양으로 만들어본 구글 로고 디자인 작업부터 HTML5 캔버스와 웹 소켓으로 본적인 멀티플레이어 게임을 작성하는 일에 이르기까지 다양한 시도를 해왔다. 이와 같은 경험 덕분에 이 책을 쓰고 내가 얻은 교훈을 다른 이에게 가르치는 데 필요한 경험과 지식을 쌓을 수 있었다. 나는 캔버스나 자바스크립트 같은 기술로 애니메이션이나 게임을 개발하는 일에 완전히 매료됐다. 이 책이 내가 지녔던 열정을 똑같이 독자에게 불러 일으켜주고, 독자가 HTML5 캔버스를 숙달하려는 여행에 동반자가 되어주기를 간절히 바란다. ---저자 서문 중에서 사람이 살아가면서 무언가를 해보겠다고 마음먹는 일에 이유가 있어야만 하는 것은 아니다. 그러나 굳이 내가 번역을 시작해보겠다고 마음먹은 이유 중 하나를 들어보라고 한다면 좋은 지식을 내 자신이 흡수할 뿐만 아니라 다른 이에게도 빨리 소개하고 싶은 마음이 들었다는 점을 들 수 있다. 『HTML5 캔버스 첫걸음』을 번역하면서 내 소원대로 됐다. 내 자신이 좋은 지식을 얻었을 뿐만 아니라 이 책을 읽을 독자들도 좋은 지식을 얻게 되리라 생각할 수 있었다. 모든 경제 행위에서 부가가치를 창출하는 유일한 요소가 '지식'이라고 가정한다면 번역하는 행위는 사회에 부가가치를 안겨주는 행위일 것이다. 이런 점에서 이 책을 번역한 보람을 느낀다. 『HTML5 캔버스 첫걸음』은 자세히 소개할 필요가 없을 정도로 잘 구성된 책이다. 표지 뒷면에 실린 소개말이 내가 소개할 수 있는 것보다 책을 더 잘 소개한다. 그리고 목차를 훑어보기만 해도 이 책으로 무엇을 할 수 있는지 쉽게 알 수 있다. 그만큼 잘 구성된 책이다. 그러므로 나는 따로 책을 소개하는 말을 쓰지 않는다. 대신 당부하고 싶은 말을 전한다. 이 책에 실린 코드를 직접 작성해보기 바란다. 그러면 읽기만 할 때보다 책에 실린 내용을 몇 배나 더 잘 이해할 수 있다. ---옮긴이의 말 중에서 |
|
★ 이 책에서 다루는 내용 ★
■ HTML5가 제공하는 흥미로운 새 기능과 활용 방법 ■ 자바스크립트로 프로그램을 만드는 데 필요한 기초 기술과 사용자 입력을 감지하는 기술 ■ canvas 엘리먼트가 중요한 이유와 써야 하는 이유 ■ 캔버스의 특징을 기초부터 고급 수준까지 활용하는 방법 ■ 캔버스와 물리적 튕김 현상을 사용해 실감나는 애니메이션을 만드는 방법 ■ 캔버스와 자바스크립트와 기타 HTML5 기능으로 인터랙티브 게임을 만드는 방법 ★ 이 책의 대상 독자 ★ 『HTML5 캔버스 첫걸음』은 초보자든 전문가든 누구든지 쉽게 이해할 수 있도록 알기 쉽게 썼다. HTML5와 자바스크립트에 익숙하지 않은 웹 디자이너가 주요 대상 독자로서 HTML5의 캔버스 엘리먼트로 인터랙티브한 게임과 애플리케이션을 개발하기 위한 기본기를 주로 다룬다. 하지만 숙련된 웹 디자이너나 프로그래머도 캔버스의 특징을 익혀 자신의 작업에 응용하는 방법을 배울 수 있다. 웹이나 모바일 분야까지 영역을 넓히려는 플래시 개발자나 실버라이트 개발자도 이 책에서 많은 정보를 얻을 수 있다. ★ 이 책의 구성 ★ HTML5나 웹으로 이끌어 주는 멋진 새 기능을 간단히 소개하며 이 책을 연다. 1장에서는 HTML5의 배경 지식과 주변 기술을 익혀 무장한다. 일단 HTML5의 기초를 확립하면 그 다음에 자바스크립트 학습으로 넘어간다. 2장에서는 HTML5 캔버스를 활용하고 놀라운 애니메이션과 게임을 만드는 데 필요한 내용을 하나씩 배워간다. 3장은 캔버스 엘리먼트를 자세히 설명하고, 캔버스 엘리먼트를 이용해 기본적인 도형과 문자를 그리는 방법을 다룬다. 이 장에서부터 본격적으로 캔버스 기능과 캔버스의 단순명료한 매력에 빠져보길 바란다. 4장은 캔버스의 고급 기능을 소개한다. 복잡한 도형(shape)을 그리는 방법과 변환(transform)하는 방법을 알아보며, 캔버스에 그린 그림을 이미지 파일로 저장하는 방법도 알아본다. 5장에서는 앞에서 배운 지식을 활용해 이미지와 동영상을 캔버스로 다루는 방법을 알아본다. 여기서부터 매우 흥미로워지기 시작하는 부분으로서, 5장에서 캔버스를 실용적으로 쓰는 방법을 실감나게 느껴보기 바란다. 6장과 7장에서는 기어를 한 단계 높여 자바스크립트와 캔버스로 애니메이션을 구현하는 방법을 배운다. 이 두 장에서 애니메이션의 기초를 배울 뿐만 아니라 애니메이션을 실감나게 만드는 물리학도 배운다. 8장과 9장은 이 책의 절정부에 해당한다. 이 두 장 모두에서 HTML5 게임을 하나씩 만들어 본다. 그리고 캔버스로 게임을 제작하는 일에 관련된 핵심 측면부터 시작해서 사용자 입력을 거쳐 HTML5 오디오로 소리를 내게 하는 일까지 살펴본다. 이 두 장의 내용으로 HTML5로 자신만의 게임을 만드는 창의력을 높이는 데 도움이 될 것이다. 이 책은 캔버스의 미래상과 더 나은 것들을 취하는 방법을 설명하는 10장으로 마무리한다. 이 마지막 장을 통해 독자들에게 이 책에서 배운 모든 내용을 취합해 영감을 불러일으키고 한 단계 높은 수준으로 끌어올릴 수 있기를 바란다. 처음부터 한 장씩 읽거나, 아니면 필요한 주제만을 골라 읽을 수 있게 책을 구성하려고 애썼다. 이 책은 자바스크립트와 캔버스를 이용해 애니메이션을 만들어 내는 일에 기준점이 될 뿐만 아니라 학습에 필요한 참고 자료의 역할도 할 수 있다. 이 책에 실린 모든 코드는 '프렌즈오브에드' 출판사가 개설한 웹페이지 http://www.friendsofed.com에서 다운로드할 수 있다. 또한 에이콘출판사 도서정보 페이지 http://www.acornpub.co.kr/book/foundation-html5-canvas에서도 다운로드할 수 있다. |