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

1990년대 초 웹 브라우저가 등장하면서 인터넷이 전 세계에 널리 보급된 지 벌써 20년이 지났습니다. 그 동안 웹 브라우저에서 기본 문서를 표현하는 형식으로 사용되던 HTML은 기능이 부족함에도 불구하고 웹 사이트를 구축하는데 사용하기 매우 쉽고 간단하다는 장점으로 널리 애용되어 왔습니다. 그러나 최근 모바일 및 스마트 기기 시대를 맞이하면서 HTML 문서에서도 다양한 기능이 요구되고 있습니다. 이러한 요구에 부응하기 위하여 새로운 기능으로 대폭 개선된 HTML5가 선보이게 되었습니다.

HTML5는 단순히 웹 페이지 문서를 표현하는 용도에서 많이 발전하여 의미 기반의 태그가 보강되고 더 나아가 오디오/비디오, 캔버스, SVG 등 멀티미디어 제어 기능이 대폭 강화되었습니다. 또한 위치 센서 등 주변장치 API, 로컬 스토리지 및 서버 연동 API 등 다양한 기능이 포함되었습니다. HTML5가 이제는 단순히 문서표현 언어가 아니라 모바일 웹을 포함하는 웹 애플리케이션을 개발하는 언어로 발전한 것입니다. HTML이 웹 페이지 작성에 주로 이용되었다면, HTML5는 웹 사이트에서 필요한 기능을 모두 구현할 수 있는 개발 언어로 많은 관심을 끌고 있습니다.

그 동안 HTML은 너무 간단하여 대학 교과목에서 점차 멀어졌지만 향후 웹 환경에서 기술의 핵심이 될 HTML5는 대학 교과과정에 반드시 포함되어야 할 교과목이 되리라 여겨집니다. 그러나 현재 HTML5를 다루는 서적들은 전문 개발자를 대상으로 하거나 이미 HTML을 잘 알고 있는 사람을 대상으로 집필되어 있는 경우가 많습니다. 혹은 기존의 HTML 교재에서 단순히 HTML5 기능을 추가해 놓은 경우도 있습니다. 그래서 우리 저자들은 일반 대학교의 교과목으로 HTML을 처음 배우는 사람에게 HTML5의 기능을 고르게 이해시키는 것을 목적으로 이 책을 집필하게 되었습니다.

이러한 이유로 이 책의 이름을 《HTML5 웹 프로그래밍 입문》으로 하였습니다. 기본적인 HTML5의 개념 및 다양한 태그를 설명하고 CSS3 스타일시트의 적용 방법을 설명하여 HTML을 처음 배우는 사람들이 쉽게 HTML5 개념 및 사용법을 배울 수 있게 하였습니다. 그리고 자바스크립트의 프로그래밍 방법과 몇 가지 주요 API를 설명하여 웹 애플리케이션을 개발할 능력을 갖출 수 있도록 하였습니다. 즉, 이 책의 목표는 웹 환경의 초보자가 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장에서는 후반부에서 배운 내용의 실습이 가능하도록 프로젝트를 제시하였습니다. 이 프로젝트는 전반부에 구축한 인터넷 서점 웹사이트에서 도서를 대출하고 정보를 저장하는 모바일 웹 애플리케이션을 구현하는 내용으로 후반부 실습이 가능하도록 하였습니다.

이 책은 대학교의 강의 교재로서만이 아니라 HTML5 환경을 처음 배우는 웹 개발자, 웹 기획자, 웹 디자이너에게도 매우 유용한 교재로 사용될 수 있습니다. 더 나아가 HTML5가 단순히 웹 애플리케이션을 개발하는 용도에서 더욱 다양한 분야에 활용될 것이 예상되므로 각종 소프트웨어 개발자들에게도 HTML5 기술의 입문서로 적합하리라 판단됩니다. 이 책의 가장 큰 특징은 HTML5 태그와 API, CSS3 그리고 자바스크립트까지 여러 권이 아니라 이 책 한 권으로 기본 개념을 익힐 수 있는 입문서라는 점입니다. 또한, 실습 프로젝트까지 제시하고 있으므로 실습 시간의 교재로까지 사용할 수 있으며, 다양한 형태의 연습문제를 풍부히 제공하여 강의를 진행하는데 큰 도움이 되도록 하였습니다.

앞으로 HTML5를 처음 배우는 사람들에게 이 책이 좋은 지침서 역할을 하리라 기대를 하고 있습니다. 끝으로, 이 책의 출판을 위하여 적극적으로 후원하여 주신 생능출판사 김승기 사장님과 직원 여러분께 감사드립니다.

개정3판에서 변경된 내용
최근 4차산업의 발전은 IT기술에 기반하고 있으며, 그 중에서도 인터넷 및 웹 관련 기술이 가장 중요한 환경을 구축하고 있습니다. 이러한 4차산업 기술은 발전속도가 매우 빨라서 핵심 기술의 변화도 많이 있습니다. 이러한 기술발전에 따른 변화를 반영하고 보다 쉽게 내용을 이해할 수 있도록 수정하여 개정판을 출간하게 되었습니다. 이번 개정판에 보완된 핵심 내용은 다음과 같습니다.

1) 자바스크립트 프로그래밍의 중요성이 계속 커짐에 따라 8장~11장으로 대폭 보강했습니다.
ㆍ8장에서 제어문과 반복문의 예제를 추가하여 설명을 보강했습니다.
ㆍ9장은 이전 8.4절의 함수, 9.1절의 내장 객체, 9.2절의 사용자 정의 객체로 구성했습니다.
ㆍ10장은 중요성이 커지고 있는 DOM에 대해 집중적으로 설명하여 한 장으로 구성했습니다.
ㆍ11장은 기존 10장의 내용인 이벤트 처리와 동적 웹문서입니다.

2) 그 외에도 기술 발전 및 환경 변화에 따라 일부 내용의 구성을 변경했습니다.
ㆍ1장에서 웹브라우저의 설명을 줄이고 편집기 및 작업 환경에 대한 설명을 추가했습니다.
ㆍ5장에서 CSS에서 다양한 효과와 좌표변환을 제외하고 반응형 웹을 5.4절로 추가했습니다.
ㆍ자바스크립트 API는 최근 활용도에 따라 11장 캔버스를 제외하고 12.3절에 외부 제3자 제공 웹 API를 추가했습니다. 기존 12.3절은 13.2절로 이동했습니다.
ㆍ14.1절에서 카카오 지도 API 사용으로 교체하였고, 14.3절은 캔버스 대신 드래그 앤 드롭을 이용한 사진앨범 만들기 예제로 변경했습니다.
ㆍ부록 A.3절에서는 PHP 프로그램에서 입력폼의 데이터를 다루는 내용을 추가했습니다.

3) 코드와 실행 결과의 이해도를 높이기 위하여 그림 설명을 대폭 보강했습니다.
ㆍ프로그램 코드에는 이해를 도와주는 설명을 막대 풍선의 형태로 보여주고 있습니다.
ㆍ실행 결과 화면에서 코드의 어떤 부분에 해당되는지 설명을 구름 풍선 형태로 보여줍니다.

4) 수업이나 실습이 보다 알차게 진행될 수 있도록 내용을 보완했습니다.
ㆍ본문의 일부 내용을 간결하게 나열식으로 보여주어 이해가 쉽도록 수정했습니다.
ㆍ일부 예제 및 코드를 내용 이해에 도움이 되는 방향으로 보완했습니다.
ㆍ각 장의 연습문제를 2~3개 정도씩 보충했습니다.
이 책으로 가르치거나 학습하는 분들께 최대한 도움이 되는 개정판이 되도록 노력하였으며, 이 책이 웹 프로그래밍 입문서로서 좋은 지침서가 되기를 계속 기대합니다.

CHAPTER 01 인터넷과 웹 환경의 발전
1.1 인터넷의 역사 16
1.1.1 인터넷의 발전과정 16
1.1.2 웹의 발전 18
1.2 HTML의 발전 21
1.2.1 마크업 언어 및 HTML 언어의 역사 21
1.2.2 HTML5 언어의 특징 23
1.3 인터넷의 기본 개념 25
1.3.1 클라이언트-서버 모델 26
1.3.2 인터넷의 전송방식 26
1.3.3 주소체계 28
1.4 웹 브라우저의 종류 29
1.4.1 웹 브라우저의 소개 29
1.4.2 대표적인 웹 브라우저들 30
1.5 작업환경 준비하기 32
1.5.1 코드 편집하기 32
1.5.2 웹브라우저에서 실행하기 33
1.5.3 웹브라우저 개발자 도구 사용하기 35
■ 연습문제 36

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

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

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

CHAPTER 05 고급 표현을 위한 CSS3 활용
5.1 박스 모델 설정하기 146
5.1.1 영역설정을 위한 박스 모델 146
5.1.2 박스 모델 유형의 지정 150
5.2 레이아웃 설정하기 152
5.2.1 콘텐츠의 위치 지정 방법 153
5.2.2 플로팅 박스 배치하기 156
5.2.3 콘텐츠 박스의 크기 조정하기 158
5.3 전환 효과 설정하기 161
5.3.1 속성값 변경으로 전환 효과 161
5.3.2 점진적으로 변하는 전환 효과 163
5.4 반응형 웹 제작하기 164
5.4.1 미디어 유형을 판단하기 위한 미디어 쿼리 165
5.4.2 화면 영역을 지정하기 위한 뷰포트 설정 168
5.4.3 미디어 쿼리를 이용한 반응형 웹 디자인 170
■ 연습문제 173

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

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

CHAPTER 08 자바스크립트 프로그래밍 기초
8.1 자바스크립트 시작하기 236
8.1.1 자바스크립트 개요와 특징 236
8.1.2 자바스크립트 작성하기 238
8.1.3 자바스크립트 실행 및 디버깅 240
8.2 자바스크립트 기본 문법 242
8.2.1 자바스크립트 기본 변수 243
8.2.2 기본 연산자와 변수 형 변환 244
8.2.3 화면 출력 및 키보드 입력 247
8.3 자바스크립트 제어문 251
8.3.1 if-else 문 251
8.3.2 switch 문 253
8.4 자바스크립트 반복문 255
8.4.1 while 반복문 255
8.4.2 for 반복문 257
8.4.3 do-while 반복문 259
■ 연습문제 261

CHAPTER 09 자바스크립트 함수와 객체
9.1 자바스크립트 함수 266
9.1.1 자바스크립트 내장 함수 266
9.1.2 사용자 정의 함수 269
9.2 자바스크립트 내장 객체 다루기 271
9.2.1 자바스크립트 내장 객체 271
9.2.2 배열 객체 274
9.2.3 브라우저 제공 내장 객체 280
9.3 자바스크립트 사용자 정의 객체 다루기 283
9.3.1 사용자 정의 객체 생성 283
9.3.2 객체 생성자 287
■ 연습문제 289

CHAPTER 10 HTML 문서와 DOM
10.1 DOM의 정의 및 문서 구조 294
10.1.1 DOM과 HTML 웹 문서의 관계 294
10.1.2 DOM 메소드와 속성 297
10.2 DOM을 통한 HTML 문서 접근 298
10.2.1 DOM 접근 방법 298
10.2.2 태그 이름이나 클래스 이름으로 DOM에 접근하는 방법 301
10.2.3 메소드를 이용한 DOM 속성 접근 방법 302
10.2.4 DOM을 통한 스타일 속성 접근 방법 304
10.3 자바스크립트를 이용한 DOM의 생성, 수정 및 삭제 305
■ 연습문제 308

CHAPTER 11 이벤트 처리와 동적 웹문서
11.1 이벤트 처리하기 312
11.1.1 이벤트 처리 개요 312
11.1.2 이벤트의 종류 313
11.1.3 이벤트 핸들링 및 이벤트 등록 315
11.2 폼 다루기 320
11.3 동적 웹 문서 만들기 323
11.3.1 스타일 속성 변경을 통한 동적 문서 만들기 324
11.3.2 요소의 콘텐츠 변경을 통한 동적 문서 만들기 330
11.4 다양한 방법으로 폼 다루기 332
■ 연습문제 335

CHAPTER 12 드래그 앤 드롭, 위치정보, 외부 웹 API
12.1 드래그 앤 드롭 사용하기 340
12.1.1 드래그 앤 드롭 API의 개요 340
12.1.2 드래그 이벤트 사용하기 342
12.1.3 드롭 이벤트 사용하기 344
12.2 위치정보 사용하기 349
12.2.1 지오로케이션 API의 개요 349
12.2.2 단발성 위치 요청하기 351
12.2.3 반복적 위치 요청하기 354
12.3 외부 웹 API 사용하기 358
12.3.1 제3자 API의 특징 358
12.3.2 카카오 지도 웹 API 사용하기 359
12.3.3 카카오 지도 API의 추가 기능 361
■ 연습문제 365

CHAPTER 13 웹 스토리지, 오디오 및 비디오, 기타 웹 API
13.1 웹 스토리지 사용하기 370
13.1.1 로컬 스토리지 371
13.1.2 세션 스토리지 376
13.1.3 로컬 스토리지와 세션 스토리지의 비교 378
13.2 오디오 및 비디오 제어하기 379
13.2.1 오디오 및 비디오 API의 개요 379
13.2.2 비디오 제어 예제 381
13.3 기타 웹 API 383
13.3.1 파일 API 384
13.3.2 웹 소켓 API 385
13.3.3 웹 워커 API 387
13.3.4 애플리케이션 캐시 388
13.3.5 인덱스드 데이터베이스 389
■ 연습문제 390

CHAPTER 14 HTML5를 이용한 모바일 웹 제작 실습
14.1 위치정보를 이용한 현재 위치 지도 394
14.1.1 모바일 웹 사이트를 위한 폰트 크기 조정 394
14.1.2 이벤트 등록하기 395
14.1.3 카카오 지도 API를 이용해 현재 위치 지도상에 표시하기 396
14.2 웹스토리지 활용 399
14.2.1 관심 도서 저장 400
14.2.2 회원가입 404
14.2.3 로그인 409
14.3 드래그 앤 드롭을 이용한 앨범 만들기 410
14.3.1 이벤트 등록 411
14.3.2 드래그 앤 드롭 412
14.3.3 앨범의 저장과 복원 415
■ 연습문제 418

부록 웹 서버 구축
A.1 웹 서버 시스템 420
A.2 PHP 시작하기 421
A.3 PHP로 폼 다루기 428
A.4 데이터베이스 연결하기 433
A.5 웝서버 예제 (인터넷 서점 주문하기) 438
찾아보기 445

임순범 ㆍ 서울대학교 계산통계학과 졸업
한국과학기술원(KAIST) 전산학과(공학박사)
현재 숙명여자대학교 IT공학과 교수
ㆍ 주요 경력
- 휴먼컴퓨터 창업/연구소장
- 삼보컴퓨터 프린터개발부 부장
- 건국대학교 컴퓨터과학과 교수
- University of Colorado 교환교수
- 한국멀티미디어학회 회장, 명예회장
- 한국전자출판학회 회장, 명예회장
- 한국정보과학회 부회장
- 한국컴퓨터그래픽스학회 부회장
- ISO/IEC 국제표준제정위원회 SC34 WG2 분과위원장
- 2021년 정보문화유공 녹조근정훈장 수상
ㆍ 관심분야 : 컴퓨터그래픽스, 전자출판, 모바일 멀티미디어, 웹3D, HCI