HOME > 상세정보

상세정보

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

자료유형
단행본
개인저자
이명희
서명 / 저자사항
인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행 / 이명희 지음
발행사항
파주 :   제이펍,   2013  
형태사항
340 p. : 천연색삽화 ; 25 cm
ISBN
9788994506746
일반주기
부록: PC에 웹 서버 구성하기  
색인수록  
000 00694camcc2200241 c 4500
001 000045777786
005 20131212105805
007 ta
008 131007s2013 ggka 001c kor
020 ▼a 9788994506746 ▼g 93000
035 ▼a (KERIS)BIB000013286413
040 ▼a 247017 ▼d 211009
082 0 4 ▼a 005.72 ▼2 23
085 ▼a 005.72 ▼2 DDCK
090 ▼a 005.72 ▼b 2013z4
100 1 ▼a 이명희
245 1 0 ▼a 인터랙티브 웹 콘텐츠 제작 프로젝트 : ▼b HTML5, CSS3, JavaScript로의 코드 여행 / ▼d 이명희 지음
260 ▼a 파주 : ▼b 제이펍, ▼c 2013
300 ▼a 340 p. : ▼b 천연색삽화 ; ▼c 25 cm
500 ▼a 부록: PC에 웹 서버 구성하기
500 ▼a 색인수록
945 ▼a KLPA

소장정보

No. 소장처 청구기호 등록번호 도서상태 반납예정일 예약 서비스
No. 1 소장처 과학도서관/Sci-Info(1층서고)/ 청구기호 005.72 2013z4 등록번호 121227646 도서상태 대출가능 반납예정일 예약 서비스 B M

컨텐츠정보

책소개

웹 콘텐츠 프로그래밍을 친절하게 안내하는 코드 위주 실전 입문서. 사람을 끌어들이는 인터랙티브 콘텐츠를 위한 아주 친절한 설명서다. 제목만 봐도 궁금해지는 7개의 프로젝트를 HTML5, CSS3, JavaScript를 이용하여 프로그래밍해 본다.

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

이 책의 주요 내용
춤추는 꽃 프로젝트: HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애니메이션을 구현하는 방법을 이해하고 학습합니다.

중력 브라우저 프로젝트: Box2dWeb 물리 라이브러리와 다음(daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던 ‘google gravity’와 비슷한 콘텐츠를 만들어봅니다.

비디오 크로마키 프로젝트: HTML5에서 비디오를 사용하는 방법을 익혀봅니다. 또한, 비디오를 캔버스와 접목하여 픽셀을 조작하는 방법 또한 익혀봅니다.

우쿨렐레 프로젝트: HTML5에서 오디오를 사용하는 방법을 학습합니다. 또한, 비동기 리소스 로더인 yepnope.js의 사용법을 익히며 왜 비동기적인 리소스 로더가 필요한지 살펴봅니다.

코믹 스타일 프로젝트: CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작합니다. 이때 2D 변형에 대해 이해할 수 있습니다.

팝업북 프로젝트: CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다.

춤추는 꽃, 모바일 프로젝트: 첫 프로젝트에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만 사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 학습합니다.


정보제공 : Aladin

저자소개

이명희(지은이)

자바 프로그래머로 소프트웨어 개발을 시작했지만, 플래시의 강한 비주얼과 액션스크립트의 용이한 사용성에 반해 플래시 개발자로 영역을 바꾼 후 ㈜유클립과 ㈜게임하이에서 RIA 애플리케이션과 웹 게임을 개발하였다. 플래시 시장이 많이 위축될 때쯤 ㈜팬갈로어의 HTML5 게임 개발팀에 합류하여 현재까지 HTML5 게임 개발을 진행하고 있다. 단국대학교 연극영화과에서 영화를 전공한 후 경인방송, 한국경제신문사 등에서 7년 이상의 시간을 영상 제작에 매진했던 특이한 경력의 소유자이기도 하다. 93년에 처음으로 C 언어를 만나 사랑에 빠졌고, 그해에 아이콘 Drawer, 횡 스크롤 아케이드 게임, VGA 카드를 컨트롤한 한글 처리 라이브러리 등을 개발할 만큼 프로그래밍이라는 매력에 빠졌던 준비된 프로그래머였다. 지금은 HTML5와 관련한 모든 웹 기술에 관심을 두며 자바스크립트와 뒤늦은 연애를 하고 있다.

정보제공 : Aladin

목차

목차
이 책에 대하여 = 9
감사의 글 = 18
PROJECT 1 춤추는 꽃
 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 
PROJECT 2 중력 브라우저
 1 이론학습 
  1-1. Box2DWeb 물리 엔진의 이해와 활용 = 69 
   1-1-1. Box2DWeb 엔진 다운받기 = 70 
   1-1-2. Box2DWeb 엔진의 기본 사용환경 구성하기 = 71 
   1-1-3. World 생성 = 73 
   1-1-4. Box2DWeb 엔진의 핵심 콘셉트 = 77 
   1-1-5. 간단한 물리 현상 재현하기 = 80 
   1-1-6. 이벤트 연결하기 = 85 
   1-1-7. 조인트 = 86 
  1-2. 오픈 API를 활용하여 검색 정보 활용하는 법 = 96 
   1-2-1. Daum으로부터 키 발급하기 = 96 
   1-2-2. jQuery.ajax() API로 HTTP 질의 보내기 = 98 
 2 실전학습 
  2-1. HTML5 = 102 
  2-2. CSS3 = 103 
  2-3. JavaScript = 104 
  2-4. 도전과제 = 111 
 3 프로젝트정리 = 112 
PROJECT 3 비디오 크로마키
 1 이론학습 
  1-1. 비디오를 생성하고 재생하는 방법 = 117 
   1-1-1. HTML의〈video〉요소 사용 = 117 
   1-1-2. JavaScript의 createElement 메소드 사용 = 120 
   1-1-3. 비디오의 로딩에 따른 이벤트 = 121 
   1-1-4. 비디오의 재생 = 123 
   1-1-5. HTML5에서 지원하는 비디오 포맷 = 126 
   1-1-6. 비디오 타입 체크 = 130 
  1-2. 비디오 인코딩하기 = 131 
   1-2-1. Miro Video Converter 다운받기 = 131 
   1-2-2. 동영상 파일 끌어다 놓기 = 132 
   1-2-3. 컨버팅하기 = 133 
  1-3. 캔버스에 비디오 그리기 = 135 
  1-4. 캔버스의 픽셀을 조작하는 방법 = 137 
 2 실전학습 
  2-1. HTML5 = 144 
  2-2. CSS3 = 145 
  2-3. JavaScript = 146 
  2-4. 도전과제 = 151 
 3 프로젝트정리 = 152 
PROJECT 4 우쿨렐레
 1 이론학습 
  1-1. 오디오를 생성하고 재생하는 방법 = 155 
   1-1-1. HTML의〈audio〉요소 사용 = 155 
   1-1-2. JavaScript의 createElement 메소드 사용 = 157 
   1-1-3. 오디오 로딩에 따른 이벤트 = 158 
   1-1-4. 오디오의 재생 = 161 
   1-1-5. HTML5에서 지원하는 오디오 포맷 = 162 
   1-1-6. 오디오 타입 체크 = 162 
  1-2. 오디오 인코딩하기 = 164 
   1-2-1. Miro Video Converter로 오디오 불러오기 = 164 
   1-2-2. 오디오 컨버팅하기 = 165 
  1-3. 패스를 생성하는 방법 = 166 
   1-3-1. 현재 기본 패스 = 167 
   1-3-2. moveTo(x, y) = 169 
   1-3-3. lineTo(x, y) = 169 
   1-3-4. quadraticCurveTo(cpx, cpy, x, y) = 171 
   1-3-5. 1차 베지어 곡선 = 172 
   1-3-6. 2차 베지어 곡선 = 176 
  1-4. 외부 스크립트를 로드하는 방법 = 181 
 2 실전학습 
  2-1. HTML5 = 185 
  2-2. CSS3 = 186 
  2-3. JavaScript - ukulelePathCreator.js = 186 
  2-4. JavaScript - ukuleleSound.js = 188 
  2-5. JavaScript - ukulelePath.js = 197 
  2-6. 도전과제 = 204 
 3 프로젝트정리 = 205 
PROJECT 5 코믹 스타일
 1 이론학습 
  1-1. 스프라이트 시트를 CSS로 조작하는 방법 = 209 
   1-1-1. CSS background 속성 = 210 
   1-1-2. CSS background 속성을 사용한 간단한 예제 = 211 
  1-2. CSS3의 2D Transform = 214 
   1-2-1. 이동하기 : translate(x, y) = 214 
   1-2-2. 회전하기 : rotate(angle) = 216 
   1-2-3. 확대/축소하기 : scale(scaleX, scaleY) = 217 
   1-2-4. 비스듬히 틀기 : skew(angleX, angleY) = 219 
   1-2-5. 행렬변환하기 : matrix(a, b, c, d, e, f) = 220 
 2 실전학습 
  2-1. HTML5 = 223 
  2-2. CSS3 = 224 
  2-3. JavaScript = 226 
  2-4. 도전과제 = 235 
 3 프로젝트정리 = 236 
PROJECT 6 팝업북
 1 이론학습 
  1-1. 3D 이론 = 241 
   1-1-1. 3차원 공간의 이해 = 241 
   1-1-2. perspective 속성 = 243 
  1-2. CSS3의 3D Transform = 248 
   1-2-1. 이동하기 : translate3d(x, y, z) = 249 
   1-2-2. 확대/축소하기 : scale3d(scaleX, scaleY, scaleZ) = 251 
   1-2-3. 회전하기 : rotate3d(x, y, z, angle) = 253 
   1-2-4. 행렬변환하기 : matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) = 256 
 2 실전학습 
  2-1. HTML5 = 262 
  2-2. CSS3 = 263 
  2-3. JavaScript = 269 
  2-4. 도전과제 = 280 
 3 프로젝트정리 = 281
PROJECT 7 춤추는 꽃, 모바일 편
 1 이론학습 
  1-1. 브라우저 종류를 확인하는 방법 = 285 
  1-2. 모바일 브라우저를 위한 디버깅 = 289 
   1-2-1. 모바일 크롬 브라우저에서 디버깅 사용하기 = 289 
   1-2-2. 모바일 사파리 브라우저에서 디버깅 사용하기 = 295 
   1-2-3. 모바일 브라우저의 종류 알아내기 = 297 
  1-3. 모바일을 위한 터치 이벤트 = 300 
   1-3-1. 터치에 사용되는 이벤트 타입 = 300 
   1-3-2. TouchList 인터페이스와 Touch 인터페이스 = 303 
  1-4. 미디어 쿼리 = 308 
   1-4-1. 미디어 타입 = 308 
   1-4-2. 미디어 쿼리 문법 = 310 
   1-4-3. 미디어 특징 = 312 
 2 실전학습 
  2-1. HTML5 = 315 
  2-2. CSS3 = 317 
  2-3. JavaScript = 318 
  2-4. 도전과제 = 321 
 3 프로젝트정리 = 322 
APPENDIX. PC에 웹 서버 구성하기 
 1 윈도우에 웹 서버 구성하기 = 325 
 2 맥에 웹 서버 구성하기 = 330
찾아보기 = 335

관련분야 신착자료

Ramamurthy, Bina (2021)
윤관식 (2020)