임순범
ㆍ서울대학교계산통계학과졸업
한국과학기술원(KAIST)전산학과(공학박사)
현재숙명여자대학교IT공학과교수
ㆍ주요경력
-휴먼컴퓨터창업/연구소장
-삼보컴퓨터프린터개발부부장
-건국대학교컴퓨터과학과교수
-UniversityofColorado교환교수
-한국멀티미디어학회회장,명예회장
-한국전자출판학회회장,명예회장
-한국정보과학회부회장
-한국컴퓨터그래픽스학회부회장
-ISO/IEC국제표준제정위원회SC34WG2분과위원장
-2021년정보문화유공녹조근정훈장수상
ㆍ관심분야:컴퓨터그래픽스,전자출판,모바일멀티미디어,웹3D,HCI
CHAPTER01인터넷과웹환경의발전
1.1인터넷의역사16
1.1.1인터넷의발전과정16
1.1.2웹의발전18
1.2HTML의발전21
1.2.1마크업언어및HTML언어의역사21
1.2.2HTML5언어의특징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
CHAPTER02HTML5문서기본
2.1기본문서만들기40
2.1.1HTML요소와속성40
2.1.2HTML문서의기본구조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
CHAPTER03링크와멀티미디어
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
CHAPTER04CSS3스타일시트기초
4.1CSS3시작하기108
4.1.1스타일시트와CSS3기본개념108
4.1.2HTML요소에CSS스타일속성설정110
4.1.3문서일부분에CSS속성설정113
4.2CSS기본사용법117
4.2.1HTML문서에서스타일시트선언방법117
4.2.2CSS선택자의종류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
CHAPTER05고급표현을위한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
CHAPTER06다양한입력폼
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
CHAPTER07HTML5와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.3CSS3를이용한웹사이트스타일설계224
7.3.1요소의크기설정225
7.3.2요소의배치226
7.3.3스타일효과추가하기229
■연습문제233
CHAPTER08자바스크립트프로그래밍기초
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.1if-else문251
8.3.2switch문253
8.4자바스크립트반복문255
8.4.1while반복문255
8.4.2for반복문257
8.4.3do-while반복문259
■연습문제261
CHAPTER09자바스크립트함수와객체
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
CHAPTER10HTML문서와DOM
10.1DOM의정의및문서구조294
10.1.1DOM과HTML웹문서의관계294
10.1.2DOM메소드와속성297
10.2DOM을통한HTML문서접근298
10.2.1DOM접근방법298
10.2.2태그이름이나클래스이름으로DOM에접근하는방법301
10.2.3메소드를이용한DOM속성접근방법302
10.2.4DOM을통한스타일속성접근방법304
10.3자바스크립트를이용한DOM의생성,수정및삭제305
■연습문제308
CHAPTER11이벤트처리와동적웹문서
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
CHAPTER12드래그앤드롭,위치정보,외부웹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
CHAPTER13웹스토리지,오디오및비디오,기타웹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기타웹API383
13.3.1파일API384
13.3.2웹소켓API385
13.3.3웹워커API387
13.3.4애플리케이션캐시388
13.3.5인덱스드데이터베이스389
■연습문제390
CHAPTER14HTML5를이용한모바일웹제작실습
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.2PHP시작하기421
A.3PHP로폼다루기428
A.4데이터베이스연결하기433
A.5웝서버예제(인터넷서점주문하기)438
찾아보기445
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개정도씩보충했습니다.
이책으로가르치거나학습하는분들께최대한도움이되는개정판이되도록노력하였으며,이책이웹프로그래밍입문서로서좋은지침서가되기를계속기대합니다.