본문 바로가기

도서 소개

인터랙티브 웹 콘텐츠 제작 프로젝트: HTML5, CSS3, JavaScript로의 코드 여행


이 책은 현재 절판입니다. 그간 읽어주신 독자들께 감사드립니다. 


웹 콘텐츠 프로그래밍을 친절하게 안내하는 코드 위주 실전 입문서!


출판사 제이펍

저자명 이명희

출판일 2013년 9월 6일

페이지 340쪽

판  형 46배판 변형(188*245), 반양장(soft cover)

정  가 25,000원

ISBN 978-89-94506-74-6 (93000)

키워드 HTML5 / CSS3 / JavaScript  

분야 웹 프로그래밍 / HTML5 / JavaScript / CSS


관련 사이트

저자 운영 카페

 

관련 포스트

■ 2013/09/04 - [출간전 책소식] - 구글의 두들 효과를 내볼까요?


관련 동영상

■  



관련 시리즈

■  (없음)

 

소스 코드 

■ https://github.com/happpylee/book-code-html5/archive/first.edition.zip

 

강의 자료

■ 교재로 채택하신 분들에게는 강의교안을 제작할 수 있는 그림 등의 자료를 보내드리도록 하겠습니다(출판사로 메일이나 전화로 연락주세요).

 

관련 도서

세르게이의 HTML5 & CSS3 퀵 레퍼런스

HTML5, CSS3, WebGL로 재미있게 배우는 HTML5 게임 프로그래밍

머리에 쏙쏙 들어오는 jQuery 입문

자바스크립트 마스터 북

하루 1시간 3일 만에 배우는 HTML5

 

샘플 PDF(차례, 이 책에 대하여, 감사의 말, 1장 춤추는 꽃의 이론학습)(찾아보기)

인터랙티브웹콘텐츠제작프로젝트_sample.pdf

인터랙티브웹콘텐츠제작프로젝트_index.pdf


정오표 페이지

■ (등록되는 대로 링크를 걸어드리겠습니다)

 

도서구매 사이트(가나다순)


도서 소개

웹 콘텐츠 프로그래밍을 친절하게 안내하는 코드 위주 실전 입문서!


사람을 끌어들이는 인터랙티브 콘텐츠를 위한 아주 친절한 설명서가 여기 있다. 제목만 봐도 궁금해지는 7개의 프로젝트를 HTML5, CSS3, JavaScript를 이용하여 프로그래밍해 보자!


이 책의 주요 내용

  • 춤추는 꽃 프로젝트: HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애니메이션을 구현하는 방법을 이해하고 학습합니다.
  • 중력 브라우저 프로젝트: Box2dWeb 물리 라이브러리와 다음(daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던 ‘google gravity’와 비슷한 콘텐츠를 만들어봅니다. 
  • 비디오 크로마키 프로젝트: HTML5에서 비디오를 사용하는 방법을 익혀봅니다. 또한, 비디오를 캔버스와 접목하여 픽셀을 조작하는 방법 또한 익혀봅니다.
  • 우쿨렐레 프로젝트: HTML5에서 오디오를 사용하는 방법을 학습합니다. 또한, 비동기 리소스 로더인 yepnope.js의 사용법을 익히며 왜 비동기적인 리소스 로더가 필요한지 살펴봅니다.
  • 코믹 스타일 프로젝트: CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작합니다. 이때 2D 변형에 대해 이해할 수 있습니다.
  • 팝업북 프로젝트: CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다.
  • 춤추는 꽃, 모바일 프로젝트: 첫 프로젝트에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만 사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 학습합니다.


저자 소개

이명희

자바 프로그래머로 소프트웨어 개발을 시작했지만, 플래시의 강한 비주얼과 액션스크립트의 용이한 사용성에 반해 플래시 개발자로 영역을 바꾼 후 ㈜유클립과 ㈜게임하이에서 RIA 애플리케이션과 웹 게임을 개발하였다. 플래시 시장이 많이 위축될 때쯤 ㈜팬갈로어의 HTML5 게임 개발팀에 합류하여 현재까지 HTML5 게임 개발을 진행하고 있다. 


단국대학교 연극영화과에서 영화를 전공한 후 경인방송, 한국경제신문사 등에서 7년 이상의 시간을 영상 제작에 매진했던 특이한 경력의 소유자이기도 하다. 93년에 처음으로 C 언어를 만나 사랑에 빠졌고, 그해에 아이콘 Drawer, 횡 스크롤 아케이드 게임, VGA 카드를 컨트롤한 한글 처리 라이브러리 등을 개발할 만큼 프로그래밍이라는 매력에 빠졌던 준비된 프로그래머였다. 지금은 HTML5와 관련한 모든 웹 기술에 관심을 두며 자바스크립트와 뒤늦은 연애를 하고 있다. 


차례

첫 번째 프로젝트 <춤추는 꽃>

1 이론학습

1-1 브라 우저에 이미지를 출력하는 방법 21

1-1-1 HTML의 <img> 요소 사용 21

1-1-2 CSS의 background-image 속성 사용 22

1-1-3 JavaScript의 createElement 메소드 사용 24

1-2 캔버스를 생성하는 방법 25

1-2-1 HTML의 <canvas> 요소 사용 25

1-2-2 JavaScript의 createElement 메소드 사용 26

1-3 캔버스에 이미지를 그리는 방법 27

1-3-1 <canvas> 요소를 HTML에서 생성했을 때, 캔버스의 참조 값 얻기 27

1-3-2 <canvas> 요소를 동적으로 생성했을 때, 캔버스의 참조 값 얻기 28

1-3-3 drawImage 메소드 29

1-4 캔버스에서 이미지를 변환하는 방법 34

1-4-1 컨텍스트 상태 저장 34

1-4-2 변환행렬을 단위행렬로 초기화 37

1-4-3 변환하려는 요소의 중심으로 컨텍스트 이동 39

1-4-4 적용하고 싶은 변환의 실행 43

1-4-5 저장했던 컨텍스트 상태 복구 44

1-5 캔버스에서 애니메이션 루프를 수행하는 방법 47

1-5-1 일반적인 방법: 타이머 사용 47

1-5-2 새로운 방법: requestAnimationFrame 메소드 사용 48

2 실전학습

2-1 HTML5 51

2-2 CSS3 52

2-3 JavaScript 54

2-4 도전과제 65

3 프로젝트정리 66