Chapter 1 기초사항

01 웹의 등장
02 웹의 기초 기술
03 웹 브라우저
04 HTML5
05 웹 페이지의 구성
[Lab] 크롬의 개발자 도구
06 VS code 설치
07 VS code로 HTML5 문서 작성하기
[Lab] 구조화된 HTML5 문서 작성

Chapter 2 HTML5 기본 요소

01 이번 장의 목표
02 HTML5 문서 구조
03 텍스트 표시
[Lab] 커피 전문점 홈페이지 #1
04 리스트
05 이미지
[Lab] 커피 전문점 홈페이지 #2
06 링크
[Lab] 썸네일
07 테이블
08 멀티미디어 요소 추가하기
[Lab] 개인 홈페이지 만들기
[Lab] 커피 전문점 홈페이지 #3
[Mini Project] 쇼핑몰 웹사이트 제작 #1: 설계

Chapter 3 입력 양식과 시맨틱 태그

01 iframe
02 〈div〉 태그로 논리적인 구역 나누기
03 HTML 문서 구조화와 시맨틱 요소
[Lab] 구조화된 HTML 문서 작성
04 HTML 입력 양식
05 입력 요소
[Lab] 이메일 작성 화면 만들기
[Lab] 회원 정보 입력 화면 만들기
06 HTML5 입력 요소
[Mini Project] 쇼핑몰 웹 사이트 제작 #2 콘텐츠 작성

Chapter 4 CSS3 스타일시트 기초

01 CSS의 개념
02 선택자
[Lab] 웹 페이지에 스타일 지정하기
[Solution] 웹 페이지에 스타일 지정하기
03 CSS를 추가하는 방법
[Lab] 외부 CSS 파일 이용하기
04 색상
05 폰트
06 텍스트 스타일 설정
[Mini Project] CSS로 스타일 꾸미기

Chapter 5 CSS3 박스 모델과 응용

01 박스 모델
02 경계선
03 요소의 크기 설정, 마진, 패딩
04 배경 설정하기
05 하이퍼링크 스타일
06 리스트 스타일
07 테이블 스타일
08 입력 양식 꾸미기
09 효과
10 CSS 변환
11 CSS 3차원 변환
[Mini Projct] 쇼핑몰 웹 사이트 제작 #3 스타일 붙이기

Chapter 6 CSS3 레이아웃과 애니메이션

01 레이아웃의 기초
02 요소 크기와 위치 정하기
03 페이지 레이아웃
04 CSS3 애니메이션
[Lab] 구조화된 HTML 문서 작성
[Mini Project] 쇼핑몰 웹 사이트 제작 #4

Chapter 7 자바스크립트 기초

01 자바스크립트의 소개
02 자바스크립트의 위치
03 문장
04 변수
05 데이터 타입
06 연산자
07 자바스크립트 입출력
[Lab] 덧셈 프로그램 작성
08 조건문
09 반복문
10 함수
[Mini Project] 숫자 맞추기 게임

Chapter 8 자바스크립트 객체와 배열

01 객체
02 Date 객체
03 String 객체
04 Math 객체
05 배열
06 사용자 객체 생성하기 #1
07 사용자 객체 생성하기 #2
08 자바스크립트에서의 오류 처리
[Mini Project] 배열에 값 저장하기

Chapter 9 DOM(Document Object Model)

01 문서 객체 모델(DOM)02 DOM 객체
03 HTML 요소 찾기
04 HTML 요소의 값 읽기
[Lab] 도형 면적과 부피 계산
05 HTML 요소 변경하기
[Lab] 계산기 #1
06 DOM 노드 삭제와 추가
07 자바스크립트 디버깅 방법
[Lab] 주사위 게임
[Mini Project] 지뢰찾기

Chapter 10 이벤트 처리, 입력 검증, BOM

01 이벤트
02 마우스 관련 이벤트 처리
[Lab] 수학 퀴즈 페이지 작성하기
03 문서의 로딩 관련 이벤트
[Lab] 계산기 #2
04 입력값의 유효성 검증
05 BOM
[Mini Project] 기억력 게임

Chapter 11 자바스크립트와 캔버스로 게임 만들기

01 캔버스 요소
02 도형 그리기와 채우기
03 도형의 속성
04 도형 변환
[Lab] 그림판 프로그램 작성
[Lab] 그림판 만들기
05 애니메이션
06 앵그리 공 게임
07 벽돌 깨기 게임
[Mini Project] 벽돌 깨기 게임 업그레이드

Chapter 12 웹서버와 JSP 기초

01 웹서버 개요
02 톰캣 설치
03 첫 번째 JSP 프로그램
04 JSP 기초
[Lab] 예제 실행해보기
05 입력 양식은 어떻게 서버에서 처리될까?
[Mini Project] 게시판 만들기

Chapter 13 모바일 웹 페이지와 반응형 웹 디자인

01 반응형 웹 디자인
02 가상 뷰포트
03 미디어 쿼리
[Lab] 중단점 설정하여 레이아웃 변경하기
[Solution] 중단점 설정하여 레이아웃 변경하기
04 유동 레이아웃
05 반응형 이미지
06 웹 앱
[Mini Project] 반응형 웹 만들기

Chapter 14 HTML5 위치정보와 드래그와 드롭

01 SVG
[Lab] 구조화된 HTML 문서 작성
02 드래그와 드롭
[Lab] 드래그 게임 만들기
03 HTML5 위치정보
04 Open Street Map 지도 이용하기
05 HTML5 웹 워커
[Mini Project] 이미지 맞히기 게임 제작

Chapter 15 HTML5 웹스토리지, 파일 API, AJAX

01 HTTP 프로토콜과 쿠기
02 HTML5 웹스토리지
03 파일 API
04 AJAX
05 fetch API
[Mini Project] local storage에 정보 저장하기