자료검색

책소개

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로 웹 사이트 및 웹 애플리케이션을 개발하는 데 가장 기본적으로 필요한 지식을 이해시키고자 하였다. - 저자의 말 중에서

목차

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