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

임순범

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

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 웹스토리지 활용 39