• jQuery를 활용한 인터랙티브 웹 콘텐츠 제작
  • 기초부터 실전활용까지

  • 김춘경 지음

  • 웹동네 시리즈 _ 001
  • ISBN: 9788992939393
  • 30,000원 | 2012년 02월 29일 발행 | 652쪽



웹 기술을 이용해 플래시와 같은 인터랙티브한 웹 콘텐츠(메뉴, 롤링배너, 갤러리 등)를 만들고 싶은가?! 그렇다면 이 책이 좋은 안내자가 될 것이다!

이 책은 수많은 웹 기술 가운데 인터랙티브한 웹 콘텐츠 제작을 위한 웹 기술만을 뽑아 우선순위별로 학습할 수 있게 정리했으며, 학습한 내용을 다시 한 번 확인할 수 있는 미션 단계, 그리고 마지막으로 학습한 내용이 실전에서는 어떻게 활용되는지 알 수 있는 실전 활용 단계로 나눠서 진행한다. 아울러 인터랙티브한 웹 콘텐츠 제작 방법과 실전에서 바로 활용할 있는 다양한 실전 예제도 실려 있다.

또한, 이 책에서는 웹 콘텐츠 개발자, 모바일 웹앱 개발자, 웹앱 개발자라면 반드시 알고 있어야 하는 주제인 자바스크립트 DOM, 자바스크립트 Ajax, jQuery DOM, jQuery Ajax 등이 담겨 있다.

웹 기술을 이용해 플래시와 같은 인터랙티브한 웹 콘텐츠(메뉴, 롤링배너, 갤러리 등)를 만들고 싶은가?! 그렇다면 이 책이 좋은 안내자가 될 것이다!

이 책은 수많은 웹 기술 가운데 인터랙티브한 웹 콘텐츠 제작을 위한 웹 기술만을 뽑아 우선순위별로 학습할 수 있게 정리했으며, 학습한 내용을 다시 한 번 확인할 수 있는 미션 단계, 그리고 마지막으로 학습한 내용이 실전에서는 어떻게 활용되는지 알 수 있는 실전 활용 단계로 나눠서 진행한다. 아울러 인터랙티브한 웹 콘텐츠 제작 방법과 실전에서 바로 활용할 있는 다양한 실전 예제도 실려 있다.

또한, 이 책에서는 웹 콘텐츠 개발자, 모바일 웹앱 개발자, 웹앱 개발자라면 반드시 알고 있어야 하는 주제인 자바스크립트 DOM, 자바스크립트 Ajax, jQuery DOM, jQuery Ajax 등이 담겨 있다.

인터랙티브한 웹 콘텐츠 제작을 기초부터 실전 활용까지 배울 수 있는 길잡이!

이 책은 웹의 여러 분야 중 플래시가 지금까지 차지하고 있던 인터랙티브 웹 콘텐츠 분야를 개척하는 데 필요한 웹 기술과 활용법을 쉽고 빠르게 알려줍니다. 아울러 1단 메뉴, 롤링배너, 아코디언 메뉴, 상품 배너, 이미지 갤러리 등 실전에서 바로 활용할 수 있는 예제가 수록돼 있습니다.

★ 이 책에서 다루는 내용 ★

  • 자바스크립트 DOM
  • jQuery DOM
  • 자바스크립트 Ajax
  • jQuery Ajax

김춘경

딴동네라는 아이디로 10여 년 동안 플래시 RIA 개발자로 일하다 HTML5의 매력에 빠져 현재는 개발 프리랜서와 IT 학원에서 웹앱과 관련된 강의를 하고 있으며, 네이버 카페 ‘웹앱을 만드는 사람들의 모임(http://cafe.naver.com/webappdev)’과 딴동네(http://www.ddandongne.com) 사이트를 운영하고 있다.

 

책속에서..

1990년대 중반 즈음 웹의 발달로 사람들은 단순한 텍스트 형태가 좀더 다이나믹한 뭔가를 원하기 시작했으며 그 흐름에 맞춰 인기를 얻었던 것 중에 하나가 바로 자바 애플릿이었습니다. 자바 애플릿의 등장은 지금까지 웹에서 볼 수 없었던 동적이면서도 화려한 웹 콘텐츠 제작을 가능하게 했으며 자바 언어의 든든한 지원하에 가히 하늘을 찌를듯한 인기를 얻을 수 있었습니다. 허나 모든 건 영원할 수 없는 법! 고리타분한 프로그래밍 언어를 힘겹게 배우지 않아도 아주 쉽게 인터랙티브한 콘텐츠를 만들 수 있는 도구가 등장했으니 그건 바로 어도비 플래시였습니다. (이 당시에는 매크로미디어사의 플래시였습니다.) 플래시의 위력은 핵폭탄만큼 폭발적이었으며 자바 애플릿이 차지하고 있던 영역을 하루가 다르게 하나 둘씩 잠식해 나갔습니다. 그리고 어느덧 사람들의 기억 속에서 자바 애플릿이 서서히 잊혀져 갔으며 그 자리에는 플래시가 완전히 자리를 차지하게 되었습니다.

이후 근 10년이 흐른 현재의 웹 세상은 또 다른 변화를 예고하고 있습니다. 그 주인공은 바로 천덕꾸러기로만 알고 있던 순수 웹 기술입니다.

변화의 시작은 작게는 롤링 배너나 메뉴, 갤러리 같은 기존 플래시만의 전유물로 여겨졌던 인터랙티브한 웹 콘텐츠부터 시작해 크게는 제법 규모가 있는 RIA(Rich Internet Application)까지 순수 웹 기술만을 이용해 만들어지고 있습니다.

이는 아마도 하드웨어와 웹 브라우저의 발달로 인해 기존에는 구현하고 싶어도 할 수 없는 것들이 이제는 다른 플러그인 기술의 도움 없이 표준 웹 기술만으로도 충분히 인터랙티브한 웹 콘텐츠를 제작할 수 있는 환경이 만들어졌기 때문일 것입니다.

이런 흐름에 맞추어 이 책에는 인터렉티브 웹 콘텐츠 제작을 위해서 반드시 알고 있어야 하는 핵심 기술과 활용 방법이 담겨 있습니다. 이 책이 안내하는 순서대로 하나씩 진행해 나간다면 이제 막 인터랙티브 웹 콘텐츠에 흥미를 느끼거나 제작을 시작한 분들도 쉽고 재미있게 핵심 기술과 활용 방법을 익힐 수 있을 것입니다.

자! 그럼 시작해 볼까요!?

  • 1장 자바스크립트 DOM
    • 01 핵심 내용 길잡이
      • 자바스크립트를 배운다는 건?
      • DOM이란?
      • DOM은 지켜야 할 약속만 적혀 있는 문서
      • DOM과 HTML 페이지와의 관계
      • 노드와 DOM 객체와의 관계
      • 핵심 DOM 객체 소개
      • DOM 객체 간의 관계
      •  
    • 02 핵심 내용
      • 노드 다루기
      • 스타일 다루기
      • 속성 다루기
      • 이벤트 다루기
      • 위치 및 크기와 관련된 프로퍼티와 메서드
      •  
    • 03 미션 도전
      • 미션 1 - 핵심 내용 확인 1
      • 미션 2 - 핵심 내용 확인 2
      • 미션 3 - 이미지 변경하기
      • 미션 4 - 특정 영역에서 이미지 움직이기
      • 미션 5 - 이미지 스크롤
      • 미션 6 - 사각형 영역에서 이미지 움직이기
      •  
    • 04 실전 활용 예제
      • 실전 활용 예제 만들기 1 경품 추첨기
      • 실전 활용 예제 만들기 2 롤링 배너
      •  
  • 2장 jQuery DOM
    • 01 핵심 내용 길잡이
      • jQuery를 사용하는 이유는?
      • jQuery의 기능
      • jQuery와 CSS와의 관계
      • jQuery의 정체
      •  
    • 02 jQuery 핵심 내용
      • jQuery 첫 걸음, 개발 환경 구축
      • 노드 다루기
      • 스타일 다루기
      • 속성 다루기
      • 이벤트 다루기
      • 위치 및 크기와 관련된 프로퍼티와 메서드
      • jQuery 효과 다루기
      •  
    • 03 미션 도전
      • 미션1 - 핵심 내용 확인 1 : jQuery 버전으로 만들기
      • 미션2 - 핵심 내용 확인 2: jQuery 버전으로 만들기
      • 미션3 - 이미지 변경:jQuery 버전으로 만들기
      • 미션4 - 특정 영역에서 이미지 움직이기: jQuery 버전으로 만들기
      • 미션5 - 이미지 스크롤: jQuery 버전으로 만들기
      • 미션6 - 사각형 영역에서 이미지 움직이기: jQuery 버전으로 만들기
      •  
    • 04 실전 활용 예제
      • 실전 활용 예제 1 - 경품 추첨기: jQuery 버전으로 만들기
      • 실전 활용 예제 2 - 롤링 배너 만들기: jQuery 버전으로 만들기
      •  
  • 3장 자바스크립트 Ajax
    • 01 핵심 내용 길잡이
      • Ajax이란?
      • 왜 Ajax인가?
      • 기존 웹의 통신 vs. Ajax를 이용한 통신
      • Ajax를 이용한 웹 페이지의 통신
      • Ajax에서 반드시 알고 있어야 할 내용
      • Ajax를 이용한 클라이언트와 서버 간의 데이터 연동
      • XMLHttpRequest란?
      • 응답 이벤트 처리
      • GET 방식, POST 방식
      • Ajax 동기/비동기 응답 설정
      • 응답 형식
      •  
    • 02 핵심 내용
      • XMLHttpRequest 객체 생성
      • Ajax 작업을 위한 개발 환경 설정
      • GET 방식으로 데이터 보내고 서버에서 동기식으로 CSV 형식의 데이터 응답 받기
      • POST 방식으로 데이터 보내고 서버에서 비동기식으로 CSV 형식의 데이터 응답 받기
      • POST 방식으로 데이터 보내고 서버에서 비동기식으로 XML 형식의 데이터 응답 받기
      • POST 방식으로 데이터 보내고 서버에서 비동기 방식으로 JSON 형식의 데이터 응답 받기
      • 외부 XML 파일 읽기
      • 외부 JSON 파일 읽기
      •  
    • 03 도전 미션
      • 미션1 - Ajax를 활용한 동적 이미지 노드 생성(XML 버전)
      • 미션2 - Ajax를 활용한 동적 이미지 노드 생성(JSON 버전)
      • 미션3 - Ajax를 활용한 롤링 배너 제작
      •  
    • 04 실전 활용 예제
      • 실전 활용 예제 1 - 외부 페이지 연동
      • 실전 활용 예제 2 - 1단 메뉴 만들기
      •  
  • 4장 jQuery Ajax
    • 01 핵심 내용 길잡이
      • jQuery Ajax를 사용하는 이유는?
      • jQuery Ajax를 이용한 클라이언트와 서버 간의 데이터 연동을 위한 일반적인 작업 순서
      • jQuery Ajax의 핵심 메서드
      •  
    • 02 핵심 내용
      • jQuery Ajax 활용을 위한 개발 환경 설정
      • GET 방식으로 데이터 보내고 서버에서 동기식으로 CSV 형식의 응답 받기: jQuery Ajax 버전
      • POST 방식으로 데이터 보내고 비동기식으로 CSV 형식의 데이터 응답 받기: jQuery Ajax 버전
      • POST 방식으로 데이터 보내고 비동기식으로 XML 형식의 데이터 응답 받기: jQuery Ajax 버전
      • POST 방식으로 데이터 보내고 비동기식으로 JSON 형식의 데이터 응답 받기: jQuery Ajax 버전
      • 외부 XML 파일 읽기: jQuery Ajax 버전
      • 외부 JSON 파일 읽기: jQuery Ajax 버전
      •  
    • 03 도전 미션
      • 미션 1 - jQuery Ajax 버전으로 만들기
      • 미션 2 - jQuery Ajax 버전으로 만들기
      • 미션 3 - Ajax를 적용한 롤링 배너 만들기: jQuery Ajax 버전으로 만들기
      •  
    • 04 실전 활용 예제
      • 실전 활용 예제 만들기 1 - 외부 페이지 연동: jQuery Ajax 버전으로 만들기
      • 실전 활용 예제 2 - 1단 메뉴 만들기: jQuery Ajax 버전으로
      •  
  • 5장 실전 활용 예제 만들기
    • 01 실전 활용 예제 만들기1 - 배너 슬라이더
      • 사용자 요구사항
      • 핵심 기능 및 구현 방법 찾기
      • 단계 나누기
      • 구현
      •  
    • 02 실전 활용 예제 만들기2 - 아코디언 메뉴
      • 요구사항 분석 및 기능 정의
      • 핵심 기능 및 구현 방법 찾기
      • 단계 나누기
      • 구현
      •  
    • 03 실전 활용 예제 만들기 3 - 이미지 갤러리
      • 요구사항 분석 및 기능 정의
      • 핵심 기능 및 구현 방법 찾기
      • 단계 나누기
      • 구현
  • 79쪽 예제 코드에서

    if(e.cacelable) --> if(e.cancelable)

예제코드 관련 GitHub 페이지

관련 글