Chapter 01 웹 프로그래밍과 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 
Open Challenge 01
연습문제 

Chapter 02 HTML5 기본 문서 만들기
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 
Open Challenge 02 
연습문제 

Chapter 03 HTML5 문서 구조화와 웹 폼
1. HTML5의 문서 구조화  
문서의 구조  
기존 HTML의 한계  
검색 엔진이 좋아하는 웹 페이지, 시맨틱 웹  
HTML5 문서의 구조와 시맨틱 태그  
문서의 모양은 구조와 별개  
HTML5 문서 구조화 사례 
기존 HTML 문서와 HTML5 문서 비교  
HTML5 문서 구조화 연습  
시맨틱 블록 태그  
시맨틱 인라인 태그  
2. 웹 폼  
웹 폼과 폼 요소  
간단한 로그인 폼 만들기  
폼 태그, 〈form〉  
네이버 검색 사례를 통한 폼 전송 과정의 이해  
3. 폼 만들기  
텍스트 입력, 〈input type=“text|password”〉, 〈textarea〉  
데이터 목록을 가진 텍스트 입력 창, 〈datalist〉  
텍스트/이미지 버튼 만들기  
선택형 입력  
〈label〉로 폼 요소의 캡션 만들기  
색 입력, 〈input type="color"〉  
시간 정보 입력  
스핀버튼과 슬라이드바로 편리한 숫자 입력  
입력할 정보의 힌트 보여주기  
형식을 가진 텍스트 입력 
폼 요소들의 그룹핑, 〈fieldset〉  
요약 03  
Open Challenge 03  
연습문제  

Chapter 04 CSS3로 웹 페이지 꾸미기
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  
Open Challenge 04 
연습문제  

Chapter 05 CSS3 고급 활용
1. 배치  
블록 박스와 인라인 박스  
박스의 유형 제어, display  
박스의 배치, position  
float 프로퍼티를 이용한 유동 배치  
수직으로 쌓기, z-index  
보일 것인가 숨길 것인가, visibility  
콘텐츠를 자를 것인가 말 것인가, overflow  
2. 리스트 꾸미기  
리스트와 아이템의 배경  
마커의 위치, list-style-position  
마커 종류, list-style-type  
이미지 마커, list-style-image  
리스트 단축 프로퍼티, list-style  
응용 : 리스트로 메뉴 만들기  
3. 표 꾸미기  
표 테두리 제어, border  
셀 크기 제어, width height  
셀 여백 및 정렬  
배경색과 테두리 효과  
줄무늬 만들기  
응용 : 마우스가 올라갈 때 행의 배경색이 변하는 표 만들기(:hover 이용)
4. 폼 꾸미기  
input[type=text]로 폼 요소에 스타일 입히기  
input[type=text]로 폼 요소의 테두리 만들기  
폼 요소에 마우스 처리  
5. CSS3 스타일로 태그에 동적 변화 만들기  
애니메이션  
전환  
변환  
요약 05  
Open Challenge 05  
연습문제  

Chapter 06 자바스크립트 언어
1. 자바스크립트 시작 
자바스크립트 언어란?  
웹 페이지에서 자바스크립트의 역할  
자바스크립트 코드의 위치  
자바스크립트로 HTML 콘텐츠 출력  
자바스크립트 다이얼로그 : 사용자 입력 및 메시지 출력  
2. 데이터 타입과 변수  
자바스크립트 식별자  
문장 구분  
주석문  
데이터 타입  
변수  
let의 특징  
상수  
리터럴  
3. 식과 연산자 
산술 연산  
증감 연산 
대입 연산 
비교 연산  
논리 연산  
조건 연산 
비트 연산  
문자열 연산  
4. 조건문 
if 문  
if-else 문  
다중 if-else 문  
switch 문  
5. 반복문  
for 문  
while 문  
do-while 문  
break 문  
continue 문  
6. 함수  
함수 개념  
함수의 구성  
함수 호출  
자바스크립트의 전역 함수  
요약 06  
Open Challenge 06  
연습문제  

Chapter 07 자바스크립트 코어 객체와 배열
1. 객체 개념  
자바스크립트 객체  
자바스크립트 객체의 유형  
2. 코어 객체 다루기  
코어 객체 종류  
new 키워드로 코어 객체 생성  
객체 접근  
3. 배열과 Array  
배열  
배열을 만드는 방법  
[ ]로 배열 만들기  
Array로 배열 만들기  
배열의 원소 개수, length 프로퍼티  
배열의 특징 
Array 객체의 메소드 활용  
4. Date  
5. String  
String 객체  
String 객체는 수정 불가  
문자열 길이, length  
[]로 문자 접근  
String 메소드  
String 활용  
6. Math  
7. 사용자 객체 만들기  
new Object()로 객체 만들기  
리터럴 표기법으로 객체 만들기  
프로토타입의 개념과 사용자 객체 만들기  
요약 07  
Open Challenge 07  
연습문제  

Chapter 08 HTML DOM과 Document
1. HTML DOM 개요  
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  
Open Challenge 08 
연습문제  

Chapter 09 이벤트 기초 및 활용
1. 이벤트  
이벤트 개요  
이벤트 종류  
이벤트 리스너 만들기  
2. 이벤트 객체  
이벤트 객체란?  
이벤트 객체 전달받기  
이벤트 객체에 들어 있는 정보  
이벤트의 디폴트 행동 취소, preventDefault()  
3. 이벤트 흐름  
이벤트 흐름과 이벤트 리스너  
이벤트 흐름 사례  
캡쳐 리스너와 버블 리스너  
이벤트 흐름을 중단시킬 수 있는가? YES  
4. 마우스 핸들링  
마우스 이벤트 객체의 프로퍼티  
onclick과 ondblclick  
onmousedown, onmouseup, onmouseover, onmouseout, onmouseenter, onmouseleave, onwheel
onmousemove 
oncontextmenu 
5. 문서와 이미지 로딩, onload 
문서의 로딩 완료와 onload  
이미지 로딩 완료와 onload  
new Image()로 이미지 로딩과 출력 
6. 폼과 이벤트 활용  
onblur와 onfocus  
라디오버튼과 체크박스  
select 객체와 onchange  
키 이벤트, onkeydown, onkeypress, onkeyup  
onreset과 onsubmit  
요약 09  
Open Challenge 09  
연습문제 

Chapter 10 윈도우와 브라우저 관련 객체
1. 브라우저 관련 객체 개요  
BOM이란  
BOM의 종류  
2. window 객체  
window 객체의 생성  
window 객체의 프로퍼티와 메소드  
window의 이벤트 리스너  
윈도우 속성과 window의 프로퍼티  
윈도우 열기, window.open()  
윈도우 닫기  
iframe 객체와 window 객체  
3. window의 타이머 활용  
setTimeout()/clearTimeout()  
setInterval()/clearInterval()  
4. window 객체 활용  
윈도우 위치 및 크기 조절  
웹 페이지 스크롤  
웹 페이지 프린트  
5. location 객체  
6. navigator 객체  
7. screen 객체  
8. history 객체  
요약 10  
Open Challenge 10  
연습문제  

Chapter 11 HTML5 캔버스 그래픽
1. HTML5와 캔버스 
웹 페이지 그래픽의 전통적인 방법 
캔버스 도입 
〈canvas〉 태그 
캔버스(canvas) 객체와 컨텍스트 객체 
캔버스의 크기 및 스타일 제어 
캔버스의 그래픽 좌표 
캔버스의 그래픽 기능 
2. 도형 그리기와 채우기 
도형 그리는 과정 
선 그리기 
원호 그리기 
stroke()는 경로에 담긴 도형(직선, 원호, 곡선)을 직선 연결하여 그린다
사각형 그리기 
beginPath()와 closePath() 
캔버스 지우기 
도형 꾸미기  
칠하기  
텍스트 그리기  
3. 이미지 그리기  
이미지 객체 생성 
이미지 로딩과 onload  
이미지 그리기  
이미지 그리기 사례  
4. canvas 객체와 마우스 이벤트 활용  
캔버스 태그와 초기화 
마우스 이벤트 처리 
그림 그리기, draw(curX, curY) 
요약 11 
Open Challenge 11 
연습문제 

Chapter 12 HTTP와 쿠키, 웹 스토리지
1. 웹과 저장 및 통신  
웹의 저장소  
브라우저와 웹 서버의 통신  
실습 1 : HTTP 통신 과정 보기  
2. 쿠키  
쿠키란?  
쿠키의 도입  
쿠키 데이터 구성  
쿠키 사례  
쿠키는 웹 페이지 사이의 정보 공유에 활용 
실습2 : 구글 웹 사이트의 쿠키 보기  
쿠키 파일  
자바스크립트로 쿠키 다루기  
실습 3 : 쿠키 활용 - 자바스크립트로 방문자 이름과 방문 횟수 관리
3. 웹 스토리지(Web Storage) 
웹 스토리지의 필요성과 쿠키의 한계  
웹 스토리지 종류  
웹 스토리지의 특징  
세션 스토리지  
로컬 스토리지  
자바스크립트로 웹 스토리지 다루기  
실습 4 : 세션 스토리지 응용  
4. 웹 스토리지 이벤트  
storage 이벤트  
실습 5 : 로컬 스토리지에 storage 이벤트  
요약 12  
Open Challenge 12  
연습문제  

Chapter 13 오디오 비디오 제어 및 위치 정보 서비스, 웹 워커
1. 오디오/비디오 제어  
〈audio〉와 〈video〉 태그  
자바스크립트로 오디오 제어  
비디오 제어  
미디어 소스 변경/미디어 로드  
2. Geolocation 객체를 이용한 위치 정보 서비스  
위치 정보 서비스와 보안  
geolocation 객체  
현재 위치 얻기 
웹 페이지에 지도 넣기 
반복 위치 서비스  
반복 위치 서비스 중단  
3. 웹 워커(Web Workers) 
웹 워커란 
워커 객체와 워커 태스크  
워커 객체  
워커 태스크의 실행 환경  
워커 태스크에서 워커 객체로 message 이벤트 보내기  
메인 태스크에서 워커 태스크로 message 이벤트 보내기  
워커 태스크 종료  
요약 13  
Open Challenge 13  
연습문제  

Chapter 14 웹 프로그래밍 응용 과제
1. 그림판 웹 페이지  
애플리케이션 개요  
2. 숨어 있는 강아지 찾기  
애플리케이션 개요 

부록
A. 아파치(Apache) 웹 서버 설치 및 활용
B. 2차원 배열
C. 비정형 표 만들기