서브메뉴
검색
본문
Powered by NAVER OpenAPI
-
인터랙티브 웹 콘텐츠 제작 프로젝트 (HTML5 CSS3 JavaScript로의 코드 여행)
저자 : 이명희
출판사 : 제이펍
출판년 : 2013
ISBN : 9788994506746
책소개
웹 콘텐츠 프로그래밍을 친절하게 안내하는 코드 위주 실전 입문서 『인터랙티브 웹 콘텐츠 제작 프로젝트』. 이 책은 7개의 프로젝트를 HTML5, CSS3, JavaScript를 이용하여 프로그래밍하는 과정과 방법을 담고 있다.
[교보문고에서 제공한 정보입니다.]
출판사 서평
웹 콘텐츠 프로그래밍을 친절하게 안내하는 코드 위주 실전 입문서!
사람을 끌어들이는 인터랙티브 콘텐츠를 위한 아주 친절한 설명서가 여기 있다. 제목만 봐도 궁금해지는 7개의 프로젝트를 HTML5, CSS3, JavaScript를 이용하여 프로그래밍해 보자!
이 책의 주요 내용
춤추는 꽃 프로젝트: HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애니메이션을 구현하는 방법을 이해하고 학습합니다.
중력 브라우저 프로젝트: Box2dWeb 물리 라이브러리와 다음(daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던 ‘google gravity’와 비슷한 콘텐츠를 만들어봅니다.
비디오 크로마키 프로젝트: HTML5에서 비디오를 사용하는 방법을 익혀봅니다. 또한, 비디오를 캔버스와 접목하여 픽셀을 조작하는 방법 또한 익혀봅니다.
우쿨렐레 프로젝트: HTML5에서 오디오를 사용하는 방법을 학습합니다. 또한, 비동기 리소스 로더인 yepnope.js의 사용법을 익히며 왜 비동기적인 리소스 로더가 필요한지 살펴봅니다.
코믹 스타일 프로젝트: CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작합니다. 이때 2D 변형에 대해 이해할 수 있습니다.
팝업북 프로젝트: CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다.
춤추는 꽃, 모바일 프로젝트: 첫 프로젝트에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만 사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 학습합니다.
사람을 끌어들이는 인터랙티브 콘텐츠를 위한 아주 친절한 설명서가 여기 있다. 제목만 봐도 궁금해지는 7개의 프로젝트를 HTML5, CSS3, JavaScript를 이용하여 프로그래밍해 보자!
이 책의 주요 내용
춤추는 꽃 프로젝트: HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애니메이션을 구현하는 방법을 이해하고 학습합니다.
중력 브라우저 프로젝트: Box2dWeb 물리 라이브러리와 다음(daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던 ‘google gravity’와 비슷한 콘텐츠를 만들어봅니다.
비디오 크로마키 프로젝트: HTML5에서 비디오를 사용하는 방법을 익혀봅니다. 또한, 비디오를 캔버스와 접목하여 픽셀을 조작하는 방법 또한 익혀봅니다.
우쿨렐레 프로젝트: HTML5에서 오디오를 사용하는 방법을 학습합니다. 또한, 비동기 리소스 로더인 yepnope.js의 사용법을 익히며 왜 비동기적인 리소스 로더가 필요한지 살펴봅니다.
코믹 스타일 프로젝트: CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작합니다. 이때 2D 변형에 대해 이해할 수 있습니다.
팝업북 프로젝트: CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다.
춤추는 꽃, 모바일 프로젝트: 첫 프로젝트에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만 사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 학습합니다.
[교보문고에서 제공한 정보입니다.]
목차정보
첫 번째 프로젝트 《춤추는 꽃》
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의 요소 사용 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
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의 요소 사용 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
[교보문고에서 제공한 정보입니다.]