Part 1. HTML
Chapter 01. HTML과 실습 환경
__1.1 웹이란?
____1.1.1 웹의 개요
____1.1.2 HTML의 동작 원리
__1.2 실습 환경 구축
____1.2.1 비주얼 스튜디오 코드 설치
____1.2.2 크롬 브라우저 설치
____1.2.3 HTML 문서 작성과 실행
__1.3 HTML의 구조
____1.3.1 HTML 문서 구조
____1.3.2 웹 페이지 제목 설정
__1.4 주석문
__연습문제

Chapter 02. HTML 태그
__2.1 텍스트
____2.1.1 글 제목 : 〈h1〉 ~ 〈h6〉
____2.1.2 단락 : 〈p〉
____2.1.3 줄바꿈 : 〈br〉
____2.1.4 HTML 특수 문자
__2.2 이미지
__2.3 멀티미디어
____2.3.1 오디오 : 〈audio〉
____2.3.2 비디오 : 〈video〉
____2.3.3 아이프레임 : 〈iframe〉
____2.3.4 유튜브 동영상 링크걸기
__2.4 링크
__2.5 상대 경로와 절대 경로
____2.5.1 상대 경로
____2.5.2 절대 경로
__2.6 목록
____2.6.1 순서없는 목록 : 〈ul〉, 〈li〉
____2.6.2 순서 목록 : 〈ol〉, 〈li〉
____2.6.3 정의 목록 : 〈dl〉, 〈dt〉, 〈dd〉
__PROJ 2-1. 데이터 센터 소개 페이지 만들기
__PROJ 2-2. 열대어 소개 페이지 만들기
__PROJ 2-3. 놀이공원 안내 페이지 만들기
__연습문제

Chapter 03. 폼 양식과 테이블
__3.1 폼 양식이란?
__3.2 〈input〉 태그
____3.2.1 텍스트 입력 창
____3.2.2 비밀번호 입력 창
____3.2.3 라디오 버튼
____3.2.4 체크 박스
____3.2.5 버튼
____3.2.6 파일
__3.3 〈input〉 태그의 속성
__3.4 선택 박스와 다중 입력 창
____3.4.1 선택 박스 : 〈select〉 〈option〉
____3.4.2 다중 입력 창 : 〈textarea〉
__3.5 테이블
____3.5.1 테이블 삽입 : 〈table〉, 〈tr〉, 〈th〉, 〈td〉
____3.5.2 테이블 열 병합
____ 3.5.3 테이블 행 병합
__3.6 회원가입 폼 양식
__PROJ 3-1. 열차 시간표 만들기
__PROJ 3-2. 일기예보 표 만들기
__PROJ 3-3. 게시판 답변 글쓰기 폼 만들기
__미니 프로젝트
__연습문제

Part 2. CSS
Chapter 04. CSS 기본 문법
__4.1 CSS 개요
____4.1.1 CSS 기본 구조
____4.1.2 CSS 삽입 방법
__4.2 CSS 주석문
__4.3 텍스트 꾸미기
____4.3.1 글자 색상
____4.3.2 글자 크기
____4.3.3 글꼴
____4.3.4 글자 스타일
____4.3.5 글자 정렬
____4.3.6 줄 간격
____4.3.7 글자 그림자
____4.3.8 링크 글자
__4.4 배경 색상과 색상 코드
____4.4.1 배경 색상
____4.4.2 색상 코드
__4.5 웹 폰트
____4.5.1 웹 폰트 사용법
____4.5.2 웹 폰트 사용 예
__PROJ 4-1. 록 음악 소개 페이지 만들기
__PROJ 4-2. 강아지 품종 페이지 만들기
__PROJ 4-3. 웹 폰트 사용하기
__연습문제

Chapter 05. 박스 모델
__5.1 박스 모델이란?
__5.2 경계선
____5.2.1 경계선 그리기
____5.2.2 경계선 속성
__5.3 마진
____5.3.1 마진 초기화
____5.3.2 마진 속성
__5.4 패딩
__5.5 박스 속성
____5.5.1 둥근 모서리
____5.5.2 박스 그림자
__PROJ 5-1. 웹 소개 페이지 만들기
__PROJ 5-2. 강좌 배너 만들기
__PROJ 5-3. 우대 정보 페이지 만들기
__연습문제

Chapter 06. CSS 선택자
__6.1 선택자란?
__6.2 요소 선택자 : element
__6.3 아이디/클래스 선택자
____6.3.1 아이디 선택자 : #id
____6.3.2 클래스 선택자 : .class
__6.4 전체/그룹 선택자
____6.4.1 전체 선택자 : *
____6.4.2 그룹 선택자 : element, element
__6.5 자손/자식 선택자
____6.5.1 자손 선택자 : element element
____6.5.2 자식 선택자 : element 〉 element
__6.6 기타 선택자
____6.6.1 선택자 : element.class
____6.6.2 선택자 : element:first-child
____6.6.3 선택자 : element:last-child
____6.6.4 선택자 : element:nth-child(n)
__연습문제

Chapter 07. CSS 활용
__7.1 배경 이미지
____7.1.1 배경 이미지 삽입
____7.1.2 배경 이미지 반복과 배치
__7.2 표 꾸미기
__7.3 디스플레이 방식
____7.3.1 인라인과 블록
____7.3.2 display : inline
____7.3.3 display : block
____7.3.4 display : inline-block
__7.4 목록 꾸미기
____7.4.1 글머리 기호 설정
____ 7.4.2 글머리 이미지 삽입
____7.4.3 수평 목록 만들기
__7.5 폼 꾸미기
____7.5.1 로그인 폼 꾸미기
____7.5.2 회원가입 폼 꾸미기
__PROJ 7-1. 이미지 배너 만들기
__PROJ 7-2. 관람 시간 안내 표 만들기
__PROJ 7-3. 입장료 안내 표 만들기
연습문제

Chapter 08. 레이아웃
__8.1 박스 중앙 배치
__8.2 float 속성 레이아웃
____8.2.1 float 속성
____8.2.2 clear 속성
____8.2.3 이미지 갤러리
____8.2.4 사이트 맵
____8.2.5 상품 목록
__8.3 position 속성 레이아웃
____8.3.1 상대 위치 지정 - position : relative
____8.3.2 절대 위치 지정 - position : absolute
____8.3.3 위치 고정 - position : fixed
____ 8.3.4 기업 연혁
__8.4 웹 페이지 레이아웃
__8.5 페이지 레이아웃 패턴
____8.5.1 레이아웃 패턴 1
____8.5.2 레이아웃 패턴 2
____8.5.3 레이아웃 패턴 3
____8.5.4 레이아웃 패턴 4
__연습문제

Chapter 09. 웹 페이지 제작
__9.1 메인 페이지
____9.1.1 페이지 레이아웃
____9.1.2 상단 헤더
____9.1.3 메인 이미지
____9.1.4 메인 콘텐츠
____9.1.5 하단 푸터
____9.1.6 메인 페이지 완성
__9.2 회사 소개 페이지
__9.3 제품 소개 페이지
__9.4 이벤트 페이지
__9.5 FAQ 페이지
__연습문제

Part 3. 반응형 웹
Chapter 10. 반응형 웹 기초
__10.1 반응형 웹이란?
____10.1.1 반응형 웹의 특징
____10.1.2 반응형 웹의 장단점
__10.2 뷰포트
__10.3 반응형 단위
__10.3.1 px, %, em, rem 단위
__10.3.2 vh, vw 단위
10.4 미디어 쿼리
__10.4.1 미디어 쿼리 문법
__10.4.2 화면 크기에 따른 스타일 변경
__10.5 플렉스박스 레이아웃
____10.5.1 플렉스박스란?
____10.5.2 justify-content 속성
____10.5.3 align-items 속성
____10.5.4 flex-direction 속성
____10.5.5 플렉스박스 레이아웃 예
연습문제

Chapter 11. 실전! 반응형 웹 제작
__11.1 그리드 레이아웃 기초
____11.1.1 12열 그리드 시스템
____11.1.2 그리드 레이아웃
__11.2 반응형 내비게이션 바
____11.2.1 내비게이션 바 만들기
____11.2.2 햄버거 버튼 만들기
__11.3 반응형 메인 콘텐트 레이아웃
____11.3.1 12열 그리드 3단 레이아웃
____11.3.2 사이드바 위치 변경
__11.4 반응형 폼과 버튼
____11.4.1 반응형 입력 폼
____11.4.2 반응형 버튼
__11.5 반응형 카드 레이아웃
____11.5.1 카드형 콘텐트 배치
____11.5.2 카드 개수 조정하기
__연습문제

Part 4. 자바스크립트
Chapter 12. 자바스크립트 소개
__12.1 자바스크립트란?
____12.1.1 자바스크립트의 역할
____12.1.2 HTML과 CSS와의 관계
__12.2 자바스크립트 사용 방법
____12.2.1 〈script〉 태그
____12.2.2 외부 자바스크립트 파일
__12.3 콘솔 출력과 알림창
____12.3.1 콘솔 출력 - console.log()
____12.3.2 알림창 - alert()
__12.4. 주석문

Chapter 13. 기본 문법
__13.1 변수란?
____13.1.1 변수 선언 : let, const
____13.1.2 변수 이름 짓기
__13.2 기본 데이터 형
____13.2.1 숫자형
____13.2.2 문자열
____13.2.3 불리언
__13.3 기본 연산자
____13.3.1 산술 연산자
____13.3.2 대입 연산자
____13.3.3 문자열 연결 연산자
__13.4 키보드 입력과 화면 출력
____13.4.1 키보드 입력 값 받기
____13.4.2 HTML 요소 값 변경하기
____13.4.3 HTML 요소 스타일 변경하기
__13.5 활용 예제
____13.5.1 메시지 변경하기
____13.5.2 입력 값 화면 출력하기
____13.5.3 배경색 변경하기
__연습문제

Chapter 14. 조건문과 반복문
__14.1 조건문 if
____14.1.1 if~ 구문
____14.1.2 if ~ else 구문
____14.1.3 if~ else if~ else~ 구문
__14.2 비교 연산자와 논리 연산자
____14.2.1 비교 연산자
____14.2.2 논리 연산자
__14.3 조건문 활용
____14.3.1 짝수/홀수 판별하기
____14.3.2 로그인 성공/실패 판단하기
____14.3.3 양수/음수/0 판단하기
____14.3.4 입력 값이 비어 있으면 알림 창 띄우기
____14.3.5 배경색 번갈아 바꾸기
__14.4 반복문 for
____14.4.1 for문의 기본 구조
____14.4.2 for문 활용
__14.5 반복문 while
____14.5.1 while문의 기본 구조
____14.5.2 while문 활용
__연습문제

Chapter 15. 함수
__15.1 함수란?
____15.1.1 내장 함수와 사용자 함수
____15.1.2 함수 정의와 호출
____15.1.3 매개변수와 함수 값 반환
____15.1.4 섭씨/화씨 온도 변환하기
__15.2 익명 함수
____15.2.1 익명 함수란?
____15.2.2 화살표 함수
__15.3 두 숫자 합 구하기
__15.4 인사말 출력하기
__15.5 성인 판별하기
__연습문제

Chapter 16. 객체, DOM, 이벤트
__16.1 객체
__16.2 문서 객체 모델(DOM)
____16.2.1 DOM의 구조
____16.2.2 HTML 요소 접근하기
____16.2.3 HTML 요소 값 읽기/변경하기
____16.2.4 스타일 변경하기
____16.2.5 요소 생성/추가/삭제하기
__16.3 이벤트
____16.3.1 이벤트란?
____16.3.2 이벤트 등록 방법
____16.3.3 클릭 이벤트
____16.3.4 마우스 오버 이벤트
____16.3.5 입력 폼 이벤트
__연습문제