-----------------
첫째마당
웹 개발 기본 다지기
-----------------
01 웹 개발 시작하기
__01-1 웹 개발 알아보기
__01-2 웹 개발, 어디서부터 시작할까
02 웹 개발 환경 만들기
__02-1 웹 브라우저와 웹 편집기
__02-2 웹 개발 환경 설정하기
-----------------
둘째마당
HTML 시작하기
-----------------
03 HTML 기본 문서 만들기
__03-1 HTML과 첫 만남
__03-2 HTML 구조 파악하기
__03-3 HTML 파일 만들기
__03-4 웹 문서 구조를 만드는 시맨틱 태그
04 웹 문서에 다양한 내용 입력하기
__04-1 텍스트 입력하기
__04-2 목록 만들기
__04-3 표 만들기
__04-4 이미지 삽입하기
__04-5 오디오와 비디오 삽입하기
__04-6 하이퍼링크 삽입하기
__한눈에 정리하기
__마무리 문제
05 입력 양식 작성하기
__05-1 폼 삽입하기
__05-2 사용자 입력을 위한 input 태그
__05-3 input 태그의 주요 속성
__05-4 폼에서 사용하는 여러 가지 태그
__한눈에 정리하기
__마무리 문제
-----------------
셋째마당
CSS 다루기
-----------------
06 CSS의 기본
__06-1 웹 문서에 디자인 입히기
__06-2 스타일과 스타일 시트
__06-3 CSS 기본 선택자 알아보기
__06-4 캐스케이딩 스타일 시트 알아보기
__한눈에 정리하기
__마무리 문제
07 텍스트를 표현하는 다양한 스타일
__07-1 글꼴 관련 스타일
__07-2 웹 폰트 사용하기
__07-3 텍스트 관련 스타일
__07-4 목록 스타일
__07-5 표 스타일
__한눈에 정리하기
__마무리 문제
08 레이아웃을 구성하는 CSS 박스 모델
__08-1 CSS와 박스 모델
__08-2 테두리 스타일 지정하기
__08-3 여백을 조절하는 속성
__08-4 웹 문서의 레이아웃 만들기
__08-5 웹 요소의 위치 지정하기
__한눈에 정리하기
__마무리 문제
09 이미지와 그러데이션 효과로 배경 꾸미기
__09-1 배경색과 배경 범위 지정하기
__09-2 배경 이미지 지정하기
__09-3 그러데이션 효과로 배경 꾸미기
__한눈에 정리하기
__마무리 문제
10 CSS 고급 선택자
__10-1 연결 선택자
__10-2 속성 선택자
__10-3 가상 클래스와 가상 요소
__한눈에 정리하기
__마무리 문제
11 트랜지션과 애니메이션
__11-1 변형 알아보기
__11-2 트랜지션 알아보기
__11-3 애니메이션 알아보기
한눈에 정리하기
마무리 문제
12 반응형 웹과 미디어 쿼리
__12-1 반응형 웹 알아보기
__12-2 미디어 쿼리 알아보기
__12-3 그리드 레이아웃 알아보기
__12-4 플렉스 박스 레이아웃 알아보기
__12-5 CSS 그리드 레이아웃 사용하기
한눈에 정리하기
-----------------
넷째마당
자바스크립트 기초
-----------------
13 자바스크립트와 첫 만남
__13-1 자바스크립트로 무엇을 할까
__13-2 웹 브라우저가 자바스크립트를 만났을 때
__13-3 자바스크립트 용어와 기본 입출력 방법
__13-4 자바스크립트 스타일 가이드
14 자바스크립트 기본 문법
__14-1 변수 알아보기
__14-2 자료형 이해하기
__14-3 연산자 알아보기
__14-4 조건문 알아보기
__14-5 반복문 알아보기
한눈에 정리하기
마무리 문제
15 함수와 이벤트
__15-1 함수 알아보기
__15-2 var를 사용한 변수의 특징
__15-3 let와 const의 등장
__15-4 재사용할 수 있는 함수 만들기
__15-5 함수 표현식
__15-6 이벤트와 이벤트 처리기
__15-7 DOM을 이용한 이벤트 처리기
한눈에 정리하기
마무리 문제
16 자바스크립트와 객체
__16-1 객체 알아보기
__16-2 자바스크립트의 내장 객체