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. 비정형 표 만들기