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

첫 번째 프로젝트 <춤추는 꽃>
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

두 번째 프로젝트 <중력 브라우저>
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

세 번째 프로젝트 <비디오 크로마키>
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

네 번째 프로젝트 <우쿨렐레>
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

다섯 번째 프로젝트 <코믹 스타일>
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

여섯 번째 프로젝트 <팝업북>
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

일곱 번째 프로젝트 <춤추는 꽃, 모바일 편>
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

부록 PC에 웹 서버 구성하기
1 윈도우에 웹 서버 구성하기 325
2 맥에 웹 서버 구성하기 330

이번 프로젝트는 물리 효과가 필요합니다. 그렇다고 걱정하지는 마세요. 여러분께 물리 엔진을 만들라고는 하지 않을 테니까요. 이번 프로젝트에서는 Box2DWeb이라는 물리 엔진을 사용할 겁니다. 추가 설명을 덧붙이자면, 굉장히 유명한 Box2D라는 물리 엔진이 있습니다. 이 엔진은 C++로 만들어졌는데 이 엔진이 다양한 언어로 포팅되어 왔었지요. 저도 플래시 게임을 개발할 때는 플래시로 포팅된 Box2DFlash를 많이 사용했었습니다. ... (중략) ... 플래시에서 사용할 목적으로 작성된 Box2DFlash2.1a 버전을 자바스크립트로 포팅한 Box2DWeb이라는 엔진이 등장하였습니다. 지금부터는 이 Box2DWeb에 대해서 살펴볼 것입니다.

이번 장의 <우쿨렐레> 프로젝트에서는 패스를 사용하게 됩니다. 우쿨렐레의 현을 어떻게 표현할까 고민하다가 HTML5가 제공해 주는 패스를 쓰면 되겠다는 생각을 하게 되었지요. 따라서 실제 코드로의 여행에 들어가기 전에 패스에 관해 이해하고 있는 것이 좋습니다. 특히 <우쿨렐레>에서 사용되는 패스는 휘어지는 속성이 있기 때문에, 소위 말하는 베지어 곡선(Bezier Curve)에 대한 이해도 조금은 있어야겠네요. 생소한 용어들에 너무 당황하지 마시고, 제가 차근차근 설명할 테니 잘 따라와 주세요. 아셨죠?