간편결제, 신용카드 청구할인
삼성카드 6% (21,150원)
(삼성카드 6% 청구할인)
인터파크 롯데카드 5% (21,380원)
(최대할인 10만원 / 전월실적 40만원)
북피니언 롯데카드 30% (15,750원)
(최대할인 3만원 / 3만원 이상 결제)
NH쇼핑&인터파크카드 20% (18,000원)
(최대할인 4만원 / 2만원 이상 결제)
Close

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

소득공제

2013년 9월 9일 이후 누적수치입니다.

판매지수 11
?
판매지수란?
사이트의 판매량에 기반하여 판매량 추이를 반영한 인터파크 도서에서의 독립적인 판매 지수입니다. 현재 가장 잘 팔리는 상품에 가중치를 두었기 때문에 실제 누적 판매량과는 다소 차이가 있을 수 있습니다. 판매량 외에도 다양한 가중치로 구성되어 최근의 이슈도서 확인시 유용할 수 있습니다. 해당 지수는 매일 갱신됩니다.
Close
공유하기
  • 저 : 이명희
  • 출판사 : 제이펍
  • 발행 : 2013년 09월 06일
  • 쪽수 : 340
  • 제품구성 : 전1권
  • ISBN : 9788994506746
정가

25,000원

  • 22,500 (10%할인)

    1,250P (5%적립)

할인혜택
적립혜택
  • I-Point 적립은 출고완료 후 14일 이내 마이페이지에서 적립받기한 경우만 적립됩니다.
추가혜택
배송정보
주문수량
감소 증가
  • 이벤트/기획전

  • 연관도서

  • 사은품(7)

라이브북

출판사 서평

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

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

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

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

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

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

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

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

목차

첫 번째 프로젝트 [춤추는 꽃]
1 이론학습
1-1 브라 우저에 이미지를 출력하는 방법
1-1-1 HTML의 [img] 요소 사용
1-1-2 CSS의 background-image 속성 사용
1-1-3 JavaScript의 createElement 메소드 사용
1-2 캔버스를 생성하는 방법
1-2-1 HTML의 [canvas] 요소 사용
1-2-2 JavaScript의 createElement 메소드 사용
1-3 캔버스에 이미지를 그리는 방법
1-3-1 [canvas] 요소를 HTML에서 생성했을 때, 캔버스의 참조 값 얻기
1-3-2 [canvas] 요소를 동적으로 생성했을 때, 캔버스의 참조 값 얻기
1-3-3 drawImage 메소드
1-4 캔버스에서 이미지를 변환하는 방법
1-4-1 컨텍스트 상태 저장
1-4-2 변환행렬을 단위행렬로 초기화
1-4-3 변환하려는 요소의 중심으로 컨텍스트 이동
1-4-4 적용하고 싶은 변환의 실행
1-4-5 저장했던 컨텍스트 상태 복구
1-5 캔버스에서 애니메이션 루프를 수행하는 방법
1-5-1 일반적인 방법: 타이머 사용
1-5-2 새로운 방법: requestAnimationFrame 메소드 사용
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript
2-4 도전과제
3 프로젝트정리

두 번째 프로젝트 [중력 브라우저]
1 이론학습
1-1 Box2DWeb 물리 엔진의 이해와 활용
1-1-1 Box2DWeb 엔진 다운받기
1-1-2 Box2DWeb 엔진의 기본 사용환경 구성하기
1-1-3 World 생성
1-1-4 Box2DWeb 엔진의 핵심 콘셉트
1-1-5 간단한 물리 현상 재현하기
1-1-6 이벤트 연결하기
1-1-7 조인트
1-2 오픈 API를 활용하여 검색 정보 활용하는 법
1-2-1 Daum으로부터 키 발급하기
1-2-2 jQuery.ajax() API로 HTTP 질의 보내기
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript
2-4 도전과제
3 프로젝트정리

세 번째 프로젝트 [비디오 크로마키]
1 이론학습
1-1 비디오를 생성하고 재생하는 방법
1-1-1 HTML의 [video] 요소 사용
1-1-2 JavaScript의 createElement 메소드 사용
1-1-3 비디오의 로딩에 따른 이벤트
1-1-4 비디오의 재생
1-1-5 HTML5에서 지원하는 비디오 포맷
1-1-6 비디오 타입 체크
1-2 비디오 인코딩하기
1-2-1 Miro Video Converter 다운받기
1-2-2 동영상 파일 끌어다 놓기
1-2-3 컨버팅하기
1-3 캔버스에 비디오 그리기
1-4 캔버스의 픽셀을 조작하는 방법
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript
2-4 도전과제
3 프로젝트정리

네 번째 프로젝트 [우쿨렐레]
1 이론학습
1-1 오디오를 생성하고 재생하는 방법
1-1-1 HTML의 [audio] 요소 사용
1-1-2 JavaScript의 createElement 메소드 사용
1-1-3 오디오 로딩에 따른 이벤트
1-1-4 오디오의 재생
1-1-5 HTML5에서 지원하는 오디오 포맷
1-1-6 오디오 타입 체크
1-2 오디오 인코딩하기
1-2-1 Miro Video Converter로 오디오 불러오기
1-2-2 오디오 컨버팅하기
1-3 패스를 생성하는 방법
1-3-1 현재 기본 패스
1-3-2 moveTo(x, y)
1-3-3 lineTo(x, y)
1-3-4 quadraticCurveTo(cpx, cpy, x, y)
1-3-5 1차 베지어 곡선
1-3-6 2차 베지어 곡선
1-4 외부 스크립트를 로드하는 방법
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript ukulelePathCreator.js
2-4 JavaScript ukuleleSound.js
2-5 JavaScript ukulelePath.js
2-6 도전과제
3 프로젝트정리

다섯 번째 프로젝트 [코믹 스타일]
1 이론학습
1-1 스프라이트 시트를 CSS로 조작하는 방법
1-1-1 CSS background 속성
1-1-2 CSS background 속성을 사용한 간단한 예제
1-2 CSS3의 2D Transform
1-2-1 이동하기 : translate(x, y)
1-2-2 회전하기 : rotate(angle)
1-2-3 확대/축소하기 : scale(scaleX, scaleY)
1-2-4 비스듬히 틀기 : skew(angleX, angleY)
1-2-5 행렬변환하기 : matrix(a, b, c, d, e, f)
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript
2-4 도전과제
3 프로젝트정리

여섯 번째 프로젝트 [팝업북]
1 이론학습
1-1 3D 이론
1-1-1 3차원 공간의 이해
1-1-2 perspective 속성
1-2 CSS3의 3D Transform
1-2-1 이동하기: translate3d(x, y, z)
1-2-2 확대/축소하기: scale3d(scaleX, scaleY, scaleZ)
1-2-3 회전하기: rotate3d(x, y, z, angle)
1-2-4 행렬변환하기: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript
2-4 도전과제
3 프로젝트정리

일곱 번째 프로젝트 [춤추는 꽃, 모바일 편]
1 이론학습
1-1 브라우저 종류를 확인하는 방법
1-2 모바일 브라우저를 위한 디버깅
1-2-1 모바일 크롬 브라우저에서 디버깅 사용하기
1-2-2 모바일 사파리 브라우저에서 디버깅 사용하기
1-2-3 모바일 브라우저의 종류 알아내기
1-3 모바일을 위한 터치 이벤트
1-3-1 터치에 사용되는 이벤트 타입
1-3-2 TouchList 인터페이스와 Touch 인터페이스
1-4 미디어 쿼리
1-4-1 미디어 타입
1-4-2 미디어 쿼리 문법
1-4-3 미디어 특징
2 실전학습
2-1 HTML5
2-2 CSS3
2-3 JavaScript
2-4 도전과제
3 프로젝트정리

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

본문중에서

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

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

컨텍스트는 한글로 번역하면 ‘문맥’이나 ‘맥락’ 정도가 될 겁니다. ...(중략)... 자바스크립트를 사용하다 보면 이 ‘맥락’이 혼란스러울 때가 있습니다. 특히 this를 사용하려고 할 때 그런 경험을 하지요. 분명히 나는 ‘요런 맥락 내에서’ 사용을 했는데, 실제로는 ‘다른 맥락 내’에서 사용된 것처럼 작동될 때가 있다는 것이지요. 많은 곳에서 이런 혼란이 있기는 하지만 가장 많이 일어나는 곳이 이벤트 핸들러 내부일 것입니다. 핸들러가 비동기로 작동되는 특성이 있으니 그럴 만도 하겠지요. 자, 너무 말로만 떠들어대니 무슨 뜻인지 잘 이해가 안 가죠? 그래서 코드 하나를 준비해 봤습니다.
(/ p.191)

모바일 브라우저에서 작업을 하다 보면 정말 불편할 때가 너무도 많습니다. 그 중 가장 불편한 것은 에러를 잡아내기가 생각보다 쉽지 않다는 점이지요. 이럴 때면 PC 브라우저에서처럼 디버깅이 잘 되면 얼마나 좋을까 하는 생각을 하게 됩니다. 그런데 저의 바람이 통했는지 크롬 모바일 브라우저와 사파리 모바일 브라우저에서 이제는 디버깅을 쉽게 할 수 있게 되었습니다. 예전에는 와이너리(Weinre)와 같은 원격 디버깅 툴을 사용하였지만, 개인적으로는 만족스럽지 못했습니다. 이번 절에서는 모바일을 위한 크롬과 사파리의 디버깅 툴에 대해서 알아보고, 앞서 언급했던 모바일 디바이스의 User Agent도 함께 살펴보도록 하겠습니다.
(/ p.289)

저자소개

생년월일 -
출생지 -
출간도서 0종
판매수 156권

자바 프로그래머로 소프트웨어 개발을 시작했지만 플래시의 강한 비주얼과 액션스크립트의 용이한 사용성에 반해 플래시 개발자로 영역을 바꾼 후 ㈜유클립과 ㈜게임하이에서 RIA 어플리케이션과 웹 게임을 개발하였다. 단국대학교 연극영화과에서 영화를 전공한 후 경인방송, 한국경제신문사 등에서 7년 이상의 시간을 영상 제작에 올인 했던 특이한 경력의 소유자이기도 하다. 93년에 처음으로 C 언어를 만나 사랑에 빠졌고, 그해에 아이콘 Drawer, 횡

펼쳐보기

이 책과 내용이 비슷한 책 ? 내용 유사도란? 이 도서가 가진 내용을 분석하여 기준 도서와 얼마나 많이 유사한 콘텐츠를 많이 가지고 있는가에 대한 비율입니다.

    리뷰

    0.0 (총 0건)

    구매 후 리뷰 작성 시, 북피니언 지수 최대 600점

    리뷰쓰기

    기대평

    작성시 유의사항

    평점
    0/200자
    등록하기

    기대평

    0.0

    교환/환불

    교환/환불 방법

    ‘마이페이지 > 취소/반품/교환/환불’ 에서 신청함, 1:1 문의 게시판 또는 고객센터(1577-2555) 이용 가능

    교환/환불 가능 기간

    고객변심은 출고완료 다음날부터 14일 까지만 교환/환불이 가능함

    교환/환불 비용

    고객변심 또는 구매착오의 경우에만 2,500원 택배비를 고객님이 부담함

    교환/환불 불가사유

    반품접수 없이 반송하거나, 우편으로 보낼 경우 상품 확인이 어려워 환불이 불가할 수 있음
    배송된 상품의 분실, 상품포장이 훼손된 경우, 비닐랩핑된 상품의 비닐 개봉시 교환/반품이 불가능함

    소비자 피해보상

    소비자 피해보상의 분쟁처리 등에 관한 사항은 소비자분쟁해결기준(공정거래위원회 고시)에 따라 비해 보상 받을 수 있음
    교환/반품/보증조건 및 품질보증 기준은 소비자기본법에 따른 소비자 분쟁 해결 기준에 따라 피해를 보상 받을 수 있음

    기타

    도매상 및 제작사 사정에 따라 품절/절판 등의 사유로 주문이 취소될 수 있음(이 경우 인터파크도서에서 고객님께 별도로 연락하여 고지함)

    배송안내

    • 인터파크 도서 상품은 택배로 배송되며, 출고완료 1~2일내 상품을 받아 보실 수 있습니다

    • 출고가능 시간이 서로 다른 상품을 함께 주문할 경우 출고가능 시간이 가장 긴 상품을 기준으로 배송됩니다.

    • 군부대, 교도소 등 특정기관은 우체국 택배만 배송가능하여, 인터파크 외 타업체 배송상품인 경우 발송되지 않을 수 있습니다.

    • 배송비

    도서(중고도서 포함) 구매

    2,000원 (1만원이상 구매 시 무료배송)

    음반/DVD/잡지/만화 구매

    2,000원 (2만원이상 구매 시 무료배송)

    도서와 음반/DVD/잡지/만화/
    중고직배송상품을 함께 구매

    2,000원 (1만원이상 구매 시 무료배송)

    업체직접배송상품 구매

    업체별 상이한 배송비 적용