인터랙티브 웹 콘텐츠 제작 (기초부터 실전활용까지)

김춘경

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

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-이미지 갤러리
요구사항 분석 및 기능 정의
핵심 기능 및 구현 방법 찾기
단계 나누기
구현

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

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

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

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

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

★ 이 책에서 다루는 내용 ★

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