명품 HTML5 + CSS3 + Javascript 웹 프로그래밍 (개정판)
황기태
저자:황기태
1986년서울대학교컴퓨터공학과를졸업하고,서울대대학원컴퓨터공학과에입학하여1988년에석사,1994년에박사학위를취득하였다.1993년뉴욕에있는IBMWatsonResearchCenter에서방문연구원을지내고1994년부터현재까지한성대학교컴퓨터공학과교수로재직중이다.1990년비트교육센터의초기센터장으로1994년까지조현정회장과함께대한민국최고의비트교육센터신화의토대를만들었다.2000년에는미국얼바인에있는캘리포니아대학에서,2011,2015년에는플로리다대학에서방문교수를지냈다.
[저서(역서)]
비트프로젝트1,2(1994,비아이티출판)
어드밴스윈도우NT(1996,대림출판사,번역)
자바스크립트웹프로그래밍(2000,대림출판사)
DHTML+자바스크립트(2003,대림출판사)
명품JAVAProgramming(개정4판,2018,㈜생능출판사)
명품C++Programming(개정판,2018,㈜생능출판사)
명품자바에센셜(개정판,2018,㈜생능출판사)
명품운영체제(2021,㈜생능출판사)
Chapter01웹프로그래밍과HTML5개요
1.웹개요
웹의기본목적과구성
인터넷과웹은다르다
웹브라우저
웹서버와웹사이트
웹문서와전자문서의차이
웹페이지의주소,URL
웹브라우저와웹서버사이의통신,HTTP
2.웹의시작과성공
웹의시작
웹의성공
모든곳에웹이있다
3.웹페이지구성
웹페이지구성3요소
3요소를분리하여웹페이지개발
HTML,CSS,Javascript
HTML,CSS,Javascript로분리된웹페이지만들기
4.HTML5
HTML언어의역사
HTML5의출현배경
HTML5표준과의의
HTML5의기능
5.HTML5웹프로그래밍개발과정
HTML5문서편집
검증(validation)
디버깅
요약01
OpenChallenge01
연습문제
Chapter02HTML5기본문서만들기
1.HTML5개요
HTML페이지기본
HTML태그
2.HTML기본문서만들기
타이틀달기,〈title〉
문단제목(장,절,소제목등)달기,〈h1〉,〈h6〉
툴팁달기,title속성
단락나누기,〈p〉
수평선긋기,〈hr〉
새로운줄로넘어가기,〈br〉
문자,기호,심볼입력
개발자포맷그대로출력하기,〈pre〉
텍스트꾸미기
블록태그와인라인태그
HTML메타데이터삽입
3.고급문서만들기
이미지삽입,〈img〉
리스트만들기,〈ol〉,〈ul〉,〈dl〉
표만들기,〈table〉
4.하이퍼링크와항해
하이퍼링크만들기,〈a〉
id속성으로앵커만들기
파일다운로드링크만들기,〈a〉의download속성
5.인라인프레임
인라인프레임만들기,〈iframe〉
인라인프레임윈도우의이름
브라우저윈도우와인라인프레임윈도우의계층관계
target속성에문서를출력할윈도우지정
6.미디어삽입
미디어의표준화,〈audio〉,〈video〉
비디오삽입,〈video〉
오디오삽입,〈audio〉
요약02
OpenChallenge02
연습문제
Chapter03HTML5문서구조화와웹폼
1.HTML5의문서구조화
문서의구조
기존HTML의한계
검색엔진이좋아하는웹페이지,시맨틱웹
HTML5문서의구조와시맨틱태그
문서의모양은구조와별개
HTML5문서구조화사례
기존HTML문서와HTML5문서비교
HTML5문서구조화연습
시맨틱블록태그
시맨틱인라인태그
2.웹폼
웹폼과폼요소
간단한로그인폼만들기
폼태그,〈form〉
네이버검색사례를통한폼전송과정의이해
3.폼만들기
텍스트입력,〈inputtype=“text|password”〉,〈textarea〉
데이터목록을가진텍스트입력창,〈datalist〉
텍스트/이미지버튼만들기
선택형입력
〈label〉로폼요소의캡션만들기
색입력,〈inputtype="color"〉
시간정보입력
스핀버튼과슬라이드바로편리한숫자입력
입력할정보의힌트보여주기
형식을가진텍스트입력
폼요소들의그룹핑,〈fieldset〉
요약03
OpenChallenge03
연습문제
Chapter04CSS3로웹페이지꾸미기
1.CSS3스타일시트개요
CSS3
CSS3맛보기예제
CSS3스타일시트구성
2.CSS3스타일시트만들기
〈style〉태그로스타일시트만들기
style속성에스타일시트만들기
외부스타일시트파일불러오기
CSS3규칙
3.셀렉터
태그이름셀렉터
class셀렉터
id셀렉터
셀렉터조합하기
전체셀렉터
속성셀렉터
가상클래스셀렉터
4.색과텍스트꾸미기
색
텍스트
CSS3의표준단위
폰트
5.박스모델
HTML태그는사각형박스로다루어진다
박스의구성
박스를제어하는CSS3프로퍼티
고급테두리꾸미기
배경
6.시각적효과
텍스트그림자,text-shadow
박스그림자,box-shadow
마우스커서제어,cursor
요약04
OpenChallenge04
연습문제
Chapter05CSS3고급활용
1.배치
블록박스와인라인박스
박스의유형제어,display
박스의배치,position
float프로퍼티를이용한유동배치
수직으로쌓기,z-index
보일것인가숨길것인가,visibility
콘텐츠를자를것인가말것인가,overflow
2.리스트꾸미기
리스트와아이템의배경
마커의위치,list-style-position
마커종류,list-style-type
이미지마커,list-style-image
리스트단축프로퍼티,list-style
응용:리스트로메뉴만들기
3.표꾸미기
표테두리제어,border
셀크기제어,widthheight
셀여백및정렬
배경색과테두리효과
줄무늬만들기
응용:마우스가올라갈때행의배경색이변하는표만들기(:hover이용)
4.폼꾸미기
input[type=text]로폼요소에스타일입히기
input[type=text]로폼요소의테두리만들기
폼요소에마우스처리
5.CSS3스타일로태그에동적변화만들기
애니메이션
전환
변환
요약05
OpenChallenge05
연습문제
Chapter06자바스크립트언어
1.자바스크립트시작
자바스크립트언어란?
웹페이지에서자바스크립트의역할
자바스크립트코드의위치
자바스크립트로HTML콘텐츠출력
자바스크립트다이얼로그:사용자입력및메시지출력
2.데이터타입과변수
자바스크립트식별자
문장구분
주석문
데이터타입
변수
let의특징
상수
리터럴
3.식과연산자
산술연산
증감연산
대입연산
비교연산
논리연산
조건연산
비트연산
문자열연산
4.조건문
if문
if-else문
다중if-else문
switch문
5.반복문
for문
while문
do-while문
break문
continue문
6.함수
함수개념
함수의구성
함수호출
자바스크립트의전역함수
요약06
OpenChallenge06
연습문제
Chapter07자바스크립트코어객체와배열
1.객체개념
자바스크립트객체
자바스크립트객체의유형
2.코어객체다루기
코어객체종류
new키워드로코어객체생성
객체접근
3.배열과Array
배열
배열을만드는방법
[]로배열만들기
Array로배열만들기
배열의원소개수,length프로퍼티
배열의특징
Array객체의메소드활용
4.Date
5.String
String객체
String객체는수정불가
문자열길이,length
[]로문자접근
String메소드
String활용
6.Math
7.사용자객체만들기
newObject()로객체만들기
리터럴표기법으로객체만들기
프로토타입의개념과사용자객체만들기
요약07
OpenChallenge07
연습문제
Chapter08HTMLDOM과Document
1.HTMLDOM개요
HTML페이지와자바스크립트객체
DOM의목적
DOM트리
DOM트리의특징
HTML태그의출력과DOM객체
DOM객체의구성요소
DOM객체들사이의관계
2.DOM객체다루기
DOM객체구분,id속성
DOM객체찾기,document.getElementById()
DOM객체의CSS3스타일동적변경
DOM객체의innerHTML프로퍼티
this
3.document객체
document개요
이벤트리스너
태그이름으로DOM객체찾기,getElementsByTagName()
class속성으로DOM객체찾기,getElementsByClassName()
document.write()와document.writeln()
document.write()사용시주의할점
document의열기와닫기,open()과close()
4.HTML문서의동적구성
DOM객체동적생성
DOM트리에삽입
DOM객체의삭제
요약08
OpenChallenge08
연습문제
Chapter09이벤트기초및활용
1.이벤트
이벤트개요
이벤트종류
이벤트리스너만들기
2.이벤트객체
이벤트객체란?
이벤트객체전달받기
이벤트객체에들어있는정보
이벤트의디폴트행동취소,preventDefault()
3.이벤트흐름
이벤트흐름과이벤트리스너
이벤트흐름사례
캡쳐리스너와버블리스너
이벤트흐름을중단시킬수있는가?YES
4.마우스핸들링
마우스이벤트객체의프로퍼티
onclick과ondblclick
onmousedown,onmouseup,onmouseover,onmouseout,onmouseenter,onmouseleave,onwheel
onmousemove
oncontextmenu
5.문서와이미지로딩,onload
문서의로딩완료와onload
이미지로딩완료와onload
newImage()로이미지로딩과출력
6.폼과이벤트활용
onblur와onfocus
라디오버튼과체크박스
select객체와onchange
키이벤트,onkeydown,onkeypress,onkeyup
onreset과onsubmit
요약09
OpenChallenge09
연습문제
Chapter10윈도우와브라우저관련객체
1.브라우저관련객체개요
BOM이란
BOM의종류
2.window객체
window객체의생성
window객체의프로퍼티와메소드
window의이벤트리스너
윈도우속성과window의프로퍼티
윈도우열기,window.open(
개정판에서수정보완한부분
1.ES6의자바스크립트표준에따라자바스크립트에서변수를선언하는방법을var대신let으로모든코드를수정하였다.
2.예제등의실행화면을갱신하였다.
3.12장HTTP통신과쿠키에대한내용을최신정보에맞게수정하였다.
4.13장2절Geolocation을보완하여위치와지도에대한실습이가능하도록하였다.
5.본문에넣기힘든세부분을부록(A.아파치웹서버설치및활용,B.2차원배열,C.비정형표만들기)으로작성하였다.
이책의특징
1.이책의범위
이책은HTML5,CSS3,자바스크립트언어,HTML5API를이용한웹애플리케이션을다룬다.HTML5의표준기술을전반적으로학습할수있는내용을갖추고있다.
2.HTML5태그와CSS3로홈페이지만들기연습
2~5장까지openchallenge문제를매주연속하여연습하도록구성하였다.2장openchallenge에서학생은자신만의주제를정하고,각장이끝날때그장에서배운내용을토대로웹페이지를완성해가면된다.2~5장의openchallenge는다음과같다.
-HTML페이지만들기(2장openchallenge):컴퓨터기술소개웹페이지만들기
-HTML5로문서구조화하기(3장openchallenge):2장에서만든웹페이지구조화
-CSS3로웹페이지꾸미기(4장openchallenge):3장에서만든웹페이지꾸미기
-CSS3의배치스타일로꾸미기(5장openchallenge):4장에서만든웹페이지를배치스타일시트로꾸미기
3.자바스크립트를포함한웹프로그래밍응용연습
14장은웹프로그래밍을모두배우고난뒤학생스스로학습할과제로주어진장이다.
4.웹프로그래밍사이트활용
이트를활용하면강의와연습을언제어디서든쉽게할수있다.직접예제를실행하고수정해볼수있다.또한Q&A게시판을통해질문과답을나눌수있다.
5.연습문제
연습문제에는그장에서배운내용을학습할수있는다양한이론실습문제가있다.문제가모호하지않도록명확히출제하였다.
이책의내용
1장웹프로그래밍과HTML5개요에서는웹이가지는근본적인목적과간단한배경지식,역사,작동메커니즘,구성등에대해익히고앞으로웹프로그래밍을공부하는데있어어떤방향으로공부해나가야할것인지학습하게된다.또한간략한예제를통해웹프로그래밍을어떠한방식으로하게되는지맛볼수있다.
2장HTML5기본문서만들기에서는HTML을이용하여웹페이지의기본적인골격을만드는방법과자주쓰이는다양한주요태그에대해공부한다.HTML4에서HTML5로세대가변화함에따라비권고되거나아예사라져버린여러태그들이있는데,그러한태그에대해서도학습하게된다.
3장HTML5문서구조화와웹폼에서는검색사이트에노출이잘되게하기위한문서의구조화기법을익히고,사용자로부터여러가지다양한입력을받기위해사용되는웹폼(form)과폼요소(element)에대하여공부한다.HTML5문서를표준구조화태그를사용하여구조화하면,검색엔진은해당웹문서에서특정정보를탐색하기가쉬워지며,검색엔진이웹문서를탐색하기쉬워진다는것은곧포털사이트에서특정키워드를검색했을때노출될확률이높아지고,그웹페이지의가치가올라간다는뜻이다.이러한점을중점으로3장의구조화기법을설명하였다.
4장CSS3로웹페이지꾸미기에서는HTML의외관을꾸밀수있는언어인CSS3의기본적인개념과문법을익히고,이를이용해웹문서에꾸미는방법을학습한다.3장에서배운웹문서구조화하는방법을바탕으로외관을잘작성할수있는CSS에대해사용자들의관심을얻는웹페이지를꾸미는방법을배운다.
5장CSS3고급활용에서는좀더심화된내용을다루게된다.여러요소들의색이나크기등을조절하는것을넘어내가원하는위치에요소를배치하거나애니메이션을적용하여태그를움직이게만드는등다양한CSS고급문법의사용법에대해학습한다.
6장자바스크립트언어에서는사용자들의다양한입력을입맛대로처리할수있는자바스크립트언어의간단한소개와기본적인문법,특성등에대해배운다.지금까지만들어왔던웹페이지는사용자의입력을인식할수있는도구들은배치할수있었지만,입력자체를처리할수있는기능은만들수없었다.자바스크립트언어로계정을접속하고,어떤버튼을누르면경고창이발생하는등"Action"을구현하는법을배운다.
7장자바스크립트코어객체및배열에서는6장에서배운자바스크립트에객체(Object)의개념을추가하여배운다.객체란현실세계에존재하는사람,책상,자동차,TV,컴퓨터등의실체를코드상에서사용하기위해추상화한데이터의집합을의미한다.하나의객체는정보를표현하는속성(Property)과그정보를이용하여특정한기능을수행하는메소드(Method)로나뉜다.지금까지정수,실수,부울등의기본타입자료만을이용하여자바스크립트를구성했다면,7장에서는앞서설명한객체를이용하여다양한고급기능을수행하는법을배우게된다.
8장은HTMLDOM과Document에관한내용이다.브라우저는우리가작성한태그를체계적으로구조화된방식으로다루고있다.브라우저는우리가작성한HTML태그를최상위계층부터아래로뻗어가지를치며뻗어내려오는트리(Tree)구조의형태로변환하여관리한다.그리고하나의태그는하나의객체(Object)로변환한다.이객체의트리구조를DOM(DocumentObjectModel)이라고부르며8장에서는DOM을이용하여웹페이지로드이후에도동적으로태그의속성들을변경하는방법에대하여공부한다.
9장에서는이벤트기초및활용법에대해배운다.이벤트(Event)란,브라우저상에서일어나는사용자의다양한행동이다.화면상에서특정버튼을클릭한다거나,텍스트필드에문자열을타이핑하는등사용자의행동들은브라우저상에서모두이벤트로처리된다.또한,이미지나HTML문서의로딩,특정시간으로부터몇초가지난뒤등문서나브라우저의상태변화도이벤트로다루어진다.9장에서는웹페이지에서이벤트가발생시특정메소드를수행할수있도록하여반응형웹페이지를작성하는법을배운다.
10장윈도우와브라우저관련객체에서는BOM을이용하여브라우저에관련된다양한속성들을동적으로처리하는방법에대해공부한다.앞서8장에서배운DOM을이용하면브라우저가웹페이지로딩이완료된이후에도여러태그들을동적으로변화시킬수있다.태그가아니라,브라우저의위치를옮기거나크기를조절하고,자동으로스크롤바를내리거나새로운창을띄우는등브라우저자체를다루기위해브라우저에관련된정보들도하나의객체로표현되는BOM(BrowserObjectModel)에대해공부한다.
11장에서는HTML5캔버스그래픽에대해배운다.HTML5가세상에등장하기전,웹개발자들은그래픽애니메이션이나사용자그래픽이필요한경우자바애플릿이나플래시등의플러그인을활용하였다.하지만플러그인을이용하는방법은별도의응용을설치해야하는번거로움과웹페이지의로딩이지연되는문제가있고,호환성도매우떨어지는데다가모바일단말기에는설치할수없어많은불편함이따랐다.HTML5에서는이러한문제를해결하기위해모든단말기,모든브라우저에대해호환되는그래픽처리전용모듈인캔버스기능을도입하였으며,11장에서는바로이캔버스를이용하여그래픽과관련된다양한기능을처리하는방법에대해배운다.
12장에서는HTTP프로토콜과쿠키및웹스토리지에학습한다.HTTP프로토콜을이용해브라우저가서버와통신하는방법에대한이해를바탕으로쿠키와웹스토리지를이용해,브라우저가이전에사용했던자원이나행동,양식등을사용자컴퓨터에저장하고재사용할수있도록하여트래픽을최소화할수있는방법에대해살펴본다.
13장은오디오비디오제어및위치정보서비스,웹워커이다.크게3가지를배우게되는데,첫번째로HTML5의모든환경에서작동하는,표준을이용한오디오및비디오의제어방법에대해배운다.그리고그다음두번째로geolocation객체를이용하여위치정보를다양하게이용하고처리하는방법에배운다.마지막으로세번째로는브라우저의백그라운드에서실행되어지는작업전용자바스크립트,웹워커에대해배운다.
14장은웹프로그래밍응용으로지금까지웹개발에필요한전반적인내용에대한학습을바탕으로실전과제에도전한다.그림판과숨은강아지찾기의2개의예제를참고로자신만의웹응용프로그램을만들어본다.
