쉽게 배우는 HTML5 웹 프로그래밍 입문 (개정판)

이 책의 구성

이 책의 구성은 전체 13개 장이며, 크게 4개 부로 구분되어 있다.

제1부는 HTML5 기본 태그를 설명하고 있으며 1장에서 인터넷과 웹 환경의 발전에 대한 설명으로 시작하고 있다. 2장에서는 문서의 내용이나 문서구조를 표현하는데 필요한 HTML5의 기본 태그들을 설명하고 있다. 3장에서는 HTML의 가장 큰 특징 중의 하나인 하이퍼링크의 표현과 이미지/오디오/비디오 등 멀티미디어의 표현 방법을 설명한다. 4장과 5장에서는 CSS3 스타일시트의 기본적인 사용방법에서 다양한 기능까지 설명하고 있다. 6장에서는 웹 페이지에서 사용자의 다양한 입력을 처리해 주는 입력 폼을 설명한다.

제2부는 CSS3 스타일시트와 입력 폼 및 전반부의 실습을 다루고 있다. 7장에서는 전반부에서 설명한 HTML 태그와 CSS3를 실습할 수 있도록 인터넷 서점 사이트를 구축하는 프로젝트를 제시하고 있다.

제3부에서는 자바스크립트 프로그래밍을 다루고 있다. 8장에서 자바스크립트의 기본적인 프로그래밍 방법을 설명하고, 9장에서 자바스크립트 객체와 DOM 문서구조, 10장에서는 이벤트 처리 등 다양한 활용 방법을 설명하고 있다. 11장에서는 자바스크립트로 화면에 그림을 그리는 HTML5 캔버스라는 새로운 기능을 소개하고 있다.

제4부는 웹 애플리케이션 개발을 위한 HTML5의 다양한 API를 다루고 있다. 12장은 인터페이스 개발에 관련된 API를 설명하고, 13장에서는 저장 관련 API와 그 외에 다양한 API를 소개하고 있다. 14장에서는 후반부에서 배운 내용의 실습이 가능하도록 프로젝트를 제시하였다. 이 프로젝트는 전반부에 구축한 인터넷 서점 웹 사이트에서 도서를 대출하고 정보를 저장하는 모바일 웹 애플리케이션을 구현하는 내용으로 후반부 실습이 가능하도록 하였다.

개정판의 주요 개정 내용

1) 기술 발전 및 설명의 흐름에 맞도록 장/절 구성의 변경했다.
- CSS 스타일시트를 먼저 설명하고 입력폼을 6장에서 설명하였다.
- 입력폼을 서버에서 처리하기 위한 PHP 프로그래밍 기법을 추가했다.
- 1.3절 인터넷의 기본 개념 및 3.4절 객체 포함하기를 추가했다.
- 13장 고급 API의 설명에서 최신 내용의 API로 변경하였다.

2) 내용의 이해도를 높이기 위하여 설명을 보완하였다.
- 자바스크립트 설명을 이전 2개 장에서 8~10장의 3개로 늘려 자바스크립트 프로그래밍의 이해가 쉽도록 예제와 설명을 대폭 보강하였다.
- 내용의 이해를 더욱 향상시키기 위하여 2장, 12장, 13장의 설명을 전면 재작성하였다.
- 일부 내용의 설명 순서를 변경하였다.4장 및 5장에서 〈div〉, 〈span〉, 박스모델, 목록/표 스타일 등을 변경하였다.
- 일부 어려운 내용을 축소하였다.5장 키프레임, 6장 〈keygen〉, 11장 캔버스 고급 기능 등을 축소하였다.
3) 실습 수업이 용이하게 진행될 수 있도록 보강하였다.
- 각 장의 연습문제에서 실습문제를 5~6개로 확장하여 2시간의 실습 수업이 진행될 수 있도록 하였다.
- 모든 예제는 웹 사이트(webclass.me)에서 직접 실행하거나 소스코드를 볼 수 있도록 하였다(http://webclass.me).

 

임순범
서울대학교 계산통계학과 졸업
한국과학기술원(KAIST) 전산학과(공학박사)
현재 숙명여자대학교 IT공학과 교수

주요 경력
- 휴먼컴퓨터 창업/연구소장
- 삼보컴퓨터 프린터개발부 부장
- 건국대학교 컴퓨터과학과 교수
- University of Colorado 교환교수
- 한국멀티미디어학회 회장, 명예회장
- 한국전자출판학회 회장, 명예회장
- 한국정보과학회 부회장
- 한국컴퓨터그래픽스학회 부회장
- ISO/IEC 국제표준제정위원회 SC34 WG2 분과위원장

관심분야: 컴퓨터그래픽스, 전자출판, 모바일 멀티미디어, 웹3D, HCI

박희민
서강대학교 컴퓨터공학과 졸업
University of California, Los Angeles 전자공학과(공학박사)
현재 상명대학교 소프트웨어학과 조교수

주요 경력
- 삼성전자 시스템LSI 수석

관심분야: 웹기반정보시스템, 크랄우드컴퓨팅, 유비쿼터스, 센서네트워크

CHAPTER 01 인터넷과 웹 환경의 발전
1.1 인터넷의 역사
1.1.1 인터넷의 발전과정
1.1.2 웹의 발전
1.2 HTML의 발전
1.2.1 마크업 언어 및 HTML 언어의 역사
1.2.2 HTML5 언어의 특징
1.3 인터넷의 기본 개념
1.3.1 클라이언트-서버 모델
1.3.2 인터넷의 전송방식
1.3.3 주소체계
1.4 웹 브라우저의 종류
1.4.1 웹 브라우저의 소개
1.4.2 대표적인 웹 브라우저들
연습문제

CHAPTER 02 HTML5 문서 기본
2.1 기본 문서 만들기
2.1.1 HTML 요소와 속성
2.1.2 HTML 문서의 기본 구조
2.2 단락과 텍스트 꾸미기
2.2.1 단락의 제목과 줄
2.2.2 단락 꾸미기
2.2.3 다양한 텍스트 표현
2.3 목록 및 표 작성하기
2.3.1 목록 나열하기
2.3.2 표의 기본 구성
2.3.2 표의 구조적 표현
2.4 문서 구조화하기
2.4.1 문서 구조화 요소
2.4.2 문서 구조에 스타일시트 적용하기
연습문제

CHAPTER 03 링크와 멀티미디어
3.1 링크 달기
3.1.1 하이퍼텍스트와 링크
3.1.2 문서 간 이동
3.1.3 문서 내 특정 위치로 이동
3.2 이미지 사용하기
3.2.1 이미지 파일 종류
3.2.2 이미지 삽입
3.3 오디오와 비디오 다루기
3.3.1 지원하는 오디오/비디오 파일 형식
3.3.2 오디오 삽입하기
3.3.3 비디오 삽입하기
3.4 객체 포함하기
3.4.1 〈iframe〉으로 다른 문서의 내용 표시하기
3.4.2 〈embed〉로 외부객체 포함하기
3.4.3 특정 콘텐츠 요소 포함하기
연습문제

CHAPTER 04 CSS3 스타일시트 기초
4.1 CSS3 시작하기
4.1.1 스타일시트와 CSS3 기본 개념
4.1.2 HTML 요소에 CSS 스타일 속성 설정
4.1.3 문서 일부분에 CSS 속성 설정
4.2 CSS 기본 사용법
4.2.1 HTML 문서에서 스타일시트 선언 방법
4.2.2 CSS 선택자의 종류
4.3 문자와 색상 지정하기
4.3.1 폰트의 지정
4.3.2 문자의 조정
4.3.3 색상 및 배경의 지정
4.4 목록과 표 장식하기
4.4.1 목록의 스타일 설정
4.4.2 표의 스타일 설정
연습문제

CHAPTER 05 고급 표현을 위한 CSS3 활용
5.1 박스 모델 설정하기
5.1.1 영역설정을 위한 박스 모델
5.1.2 박스 모델 유형의 지정
5.2 레이아웃 설정하기
5.2.1 콘텐츠의 위치 지정 방법
5.2.2 플로팅 박스 배치하기
5.2.3 콘텐츠 박스의 크기 조정하기
5.3 다양한 효과 설정하기
5.3.1 박스에 효과 주기
5.3.2 객체의 투명도 및 가시성 설정
5.4 움직임 설정하기
5.4.1 전환 효과
5.4.2 좌표변환
연습문제

CHAPTER 06 다양한 입력 폼
6.1 폼 이해하기
6.2 기본 형식으로 입력하기
6.2.1 텍스트 입력
6.2.2 선택항목의 입력
6.2.3 버튼 입력
6.2.4 기타 입력 필드
6.2.5 입력 필드의 그룹화
6.3 고급 형식으로 입력하기
6.3.1 서식이 있는 텍스트 입력
6.3.2 날짜와 시간 입력
6.3.3 색상 및 숫자 입력
6.3.4 데이터 목록에서 선택
연습문제

CHAPTER 07 HTML5와 CSS3를 이용한 웹 사이트 제작 실습
7.1 웹 사이트 설계
7.1.1 웹 사이트 전체 구성
7.1.2 인터넷 서점 사이트 기능과 페이지 구상
7.2 페이지별 구현
7.2.1 메인 페이지
7.2.2 로그인 및 회원가입 페이지
7.2.3 도서목록 페이지
7.2.4 주문 페이지
7.3 CSS3를 이용한 웹 사이트 스타일 설계
7.3.1 요소의 크기 설정
7.3.2 요소의 배치
7.3.3 스타일 효과 추가하기
연습문제

CHAPTER 08 자바스크립트 프로그래밍 기초
8.1 자바스크립트 시작하기
8.1.1 자바스크립트 개요와 특징
8.1.2 자바스크립트 작성하기
8.1.3 자바스크립트 실행 및 디버깅
8.2 자바스크립트 기본 문법
8.2.1 자바스크립트 기본 변수
8.2.2 기본 연산자와 변수 형 변환
8.2.3 화면 출력 및 키보드 입력
8.3 자바스크립트 제어문 및 반복문
8.3.1 자바스크립트 제어문
8.3.2 자바스크립트 반복문
8.4 자바스크립트 함수
연습문제

CHAPTER 09 자바스크립트 객체와 DOM
9.1 자바스크립트 내장 객체 다루기
9.1.1 자바스크립트 내장 객체
9.1.2 배열 객체
9.1.3 브라우저 제공 내장 객체
9.2 자바스크립트 사용자 정의 객체 다루기
9.2.1 사용자 정의 객체 생성
9.2.2 객체 생성자
9.3 DOM으로 HTML 문서 다루기
9.3.1 DOM의 정의 및 문서 구조
9.3.2 DOM을 통한 HTML 문서 접근
연습문제

CHAPTER 10 이벤트 처리와 동적 웹 문서
10.1 이벤트 처리하기
10.1.1 이벤트 처리 개요
10.1.2 이벤트의 종류
10.1.3 이벤트 핸들링 및 이벤트 등록
10.2 폼 다루기
10.3 동적 웹 문서 만들기
10.3.1 스타일 속성 변경을 통한 동적 문서 만들기
10.3.2 요소의 콘텐츠 변경을 통한 동적 문서 만들기
10.4 다양한 방법으로 폼 다루기
연습문제

CHAPTER 11 HTML5 캔버스 그리기 API
11.1 캔버스 이해하기
11.1.1 캔버스의 특징
11.1.2 캔버스 시작하기
11.2 캔버스 기본 API 사용하기
11.2.1 기본 도형 그리기
11.2.2 기본 도형 꾸미기
11.2.3 이미지와 글자 그리기
11.3 캔버스 고급 기능 사용하기
11.3.1 그리기 효과
11.3.2 변환 효과
11.3.3 기타 고급 기능
연습문제

CHAPTER 12 HTML5 인터페이스 관련 API
12.1 위치정보 사용하기
12.1.1 지오로케이션 API의 개요
12.1.2 단발성 위치 요청하기
12.1.3 반복적 위치 요청하기
12.2 드래그 앤 드롭 사용하기
12.2.1 드래그 앤 드롭 API의 개요
12.2.2 드래그 이벤트 사용하기
12.2.3 드롭 이벤트 사용하기
12.3 오디오 및 비디오 제어하기
12.3.1 오디오 및 비디오 API의 개요
연습문제

CHAPTER 13 HTML5 고급기능 API
13.1 웹 스토리지 사용하기
13.1.1 로컬 스토리지
13.1.2 세션 스토리지
13.1.3 로컬 스토리지와 세션 스토리지의 비교
13.2 그 외 저장관련 API
13.2.1 파일 API
13.2.2 애플리케이션 캐시 API
13.2.3 인덱스드 데이터베이스 API
13.3 기타 API
13.3.1 웹 소켓 API
13.3.2 웹 워커 API
연습문제

CHAPTER 14 HTML5를 이용한 모바일 웹 제작 실습
14.1 위치정보를 이용한 현재 위치 지도
14.1.1 모바일 웹 사이트를 위한 폰트 크기 조정
14.1.2 이벤트 등록하기
14.1.3 구글 지도 상에 현재 위치 표시하기
14.2 웹스토리지 활용
14.2.1 관심 도서 저장
14.2.2 회원가입
14.2.3 로그인
14.3 캔버스를 이용한 메모 작성
14.3.1 모바일기기를 위한 이벤트 등록
14.3.2 메모의 작성
14.3.3 메모의 저장과 복원
연습문제

부록 웹 서버 구축하기
A.1 웹 서버 시스템
A.2 PHP 사용하기
A.3 데이터베이스 연결하기
A.4 웝서버 예제 (인터넷 서점 주문하기)