목차

• Part 1 HTML로 웹 구조 설계하기
• 1장 Hello, HTML + CSS + 자바스크립트
• 1.1 개발 환경 설정하기
• 1.1.1 코드 작성을 위한 코드 에디터 설치하기
• 1.1.2 VSCode 확장 프로그램 설치하기
• 1.1.3 실행을 위한 웹 브라우저 설치하기s
• 1.2 첫 번째 HTML 문서 만들기
• 2장 HTML 문서 작성을 위한 기본 내용 살펴보기
• 2.1 HTML의 기본 구성 요소
• 2.1.1 태그
• 2.1.2 속성
• 2.1.3 문법
• 2.1.4 주석
• 1 분 퀴즈
• 2.2 HTML의 기본 구조
• 2.2.1 DTD
• 2.2.2 html 태그
• 2.2.3 head 태그
• 2.2.4 body 태그
• 1 분 퀴즈
• 2.3 HTML의 특징 파악하기
• 2.3.1 블록 요소와 인라인 요소
• 2.3.2 부모, 자식, 형제 관계
• 2.3.3 줄 바꿈과 들여쓰기
• 마무리
• 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기
• 3.1 텍스트 작성하기
• 3.1.1 hn 태그
• 3.1.2 p 태그
• 3.1.3 br 태그
• 3.1.4 blockquote 태그
• 3.1.5 q 태그
• 3.1.6 ins와 del 태그
• 3.1.7 sub와 sup 태그
• 1 분 퀴즈
• 3.2 그룹 짓기
• 3.2.1 div 태그
• 3.2.2 span 태그
• 1 분 퀴즈
• 3.3 목록 만들기
• 3.3.1 ul 태그
• 3.3.2 ol 태그
• 3.3.3 dl 태그
• 1 분 퀴즈
• 3.4 링크와 이미지 넣기
• 3.4.1 a 태그
• 3.4.2 img 태그
• 3.4.3 이미지 링크
• 1 분 퀴즈
• 3.5 텍스트 강조하기
• 3.5.1 strong 태그
• 3.5.2 em 태그
• 3.6 폼 구성하기
• 3.6.1 form 태그
• 3.6.2 input 태그
• 3.6.3 label 태그
• 3.6.4 fieldset와 legend 태그
• 3.6.5 textarea 태그
• 3.6.6 select, option, optgroup 태그
• 3.6.7 button 태그
• 3.6.8 폼 관련 태그에서 사용할 수 있는 추가 속성
• 1 분 퀴즈
• 3.7 표 만들기
• 3.7.1 table 태그
• 3.7.2 caption 태그
• 3.7.3 tr 태그
• 3.7.4 th, td 태그
• 3.7.5 rowspan과 colspan 속성
• 3.7.6 thead, tfoot, tbody 태그
• 3.7.7 col과 colgroup 태그
• 3.7.8 scope 속성
• 1 분 퀴즈
• 3.8 멀티미디어 설정하기
• 3.8.1 audio 태그
• 3.8.2 video 태그
• 3.8.3 source 태그
• 3.9 웹 페이지 구조를 설계하는 시맨틱 태그
• 3.9.1 header 태그
• 3.9.2 nav 태그
• 3.9.3 section 태그
• 3.9.4 article 태그
• 3.9.5 aside 태그
• 3.9.6 footer 태그
• 3.9.7 main 태그
• 1 분 퀴즈
• 3.10 태그 종류에 상관없이 사용하는 글로벌 속성
• 마무리
• 셀프체크
• Part 2 CSS로 웹 페이지 꾸미기
• 4장 웹 스타일링을 위한 CSS 기초 배우기
• 4.1 CSS 문법 살펴보기
• 4.1.1 문법 형식
• 4.1.2 주석
• 4.2 CSS 적용하기
• 4.2.1 내부 스타일 시트 사용하기
• 4.2.2 외부 스타일 시트 사용하기
• 4.2.3 인라인 스타일 사용하기
• 1 분 퀴즈
• 마무리
• 셀프체크
• 5장 CSS 선택자 다루기
• 5.1 기본 선택자 사용하기
• 5.1.1 전체 선택자
• 5.1.2 태그 선택자
• 5.1.3 아이디 선택자
• 5.1.4 클래스 선택자
• 5.1.5 기본 속성 선택자
• 5.1.6 문자열 속성 선택자
• 1 분 퀴즈
• 5.2 조합 선택자 사용하기
• 5.2.1 그룹 선택자
• 5.2.2 자식 선택자
• 5.2.3 하위 선택자
• 5.2.4 인접 형제 선택자
• 5.2.5 일반 형제 선택자
• 1 분 퀴즈
• 5.3 가상 요소 선택자 사용하기
• 5.4 가상 클래스 선택자 사용하기
• 5.4.1 링크 가상 클래스 선택자
• 5.4.2 동적 가상 클래스 선택자
• 5.4.3 입력 요소 가상 클래스 선택자
• 5.4.4 구조적 가상 클래스 선택자
• 1 분 퀴즈
• 5.5 다양한 선택자 조합하기
• 마무리
• 셀프체크
• 6장 CSS 필수 속성 다루기
• 6.1 CSS의 특징 살펴보기
• 6.1.1 기본 스타일 시트
• 6.1.2 적용 우선순위와 개별성
• 6.1.3 상속
• 6.1.4 단위
• 6.1.5 색상 표기법
• 6.2 텍스트 속성으로 텍스트 꾸미기
• 6.2.1 font-family 속성
• 6.2.2 font-size 속성
• 6.2.3 font-weight 속성
• 6.2.4 font-style 속성
• 6.2.5 font-variant 속성
• 6.2.6 color 속성
• 6.2.7 text-align 속성
• 6.2.8 text-decoration 속성
• 6.2.9 letter-spacing 속성
• 6.2.10 line-height 속성
• 1 분 퀴즈
• 6.3 박스 모델을 구성하는 속성 다루기
• 6.3.1 margin 영역
• 6.3.2 border 영역
• 6.3.3 padding 영역
• 6.3.4 content 영역
• 6.3.5 박스 모델의 성격과 display 속성
• 1 분 퀴즈
• 6.4.1 background-color 속성
• 6.4.2 background-image 속성
• 6.4.3 background-repeat 속성
• 6.4.4 background-size 속성
• 6.4.5 background-position 속성
• 6.4.6 background-attachment 속성
• 6.4.7 background 속성으로 한 번에 지정하기
• 1 분 퀴즈
• 6.4 배경 속성으로 요소의 배경 설정하기
• 6.5 위치 속성으로 HTML 요소 배치하기
• 6.5.1 position 속성
• 6.5.2 float 속성
• 6.5.3 clear 속성
• 1 분 퀴즈
• 6.6 전환 효과 속성 적용하기
• 6.6.1 전환이란
• 6.6.2 transition-property 속성
• 6.6.3 transition-duration 속성
• 6.6.4 transition-delay 속성
• 6.6.5 transition-timing-function 속성
• 6.6.6 transition 속성으로 한 번에 지정하기
• 1 분 퀴즈
• 6.7 애니메이션 속성으로 전환 효과 제어하기
• 6.7.1 키 프레임 정의하기
• 6.7.2 animation-name 속성
• 6.7.3 animation-duration 속성
• 6.7.4 animation-delay 속성
• 6.7.5 animation-fill-mode 속성
• 6.7.6 animation-iterator-count 속성
• 6.7.7 animation-play-state 속성
• 6.7.8 animation-direction 속성
• 6.7.9 animation 속성으로 한 번에 지정하기
• 1 분 퀴즈
• 6.8 변형 효과 적용하기
• 6.8.1 transform 속성
• 6.8.2 transform-origin 속성
• 6.9 웹 폰트와 아이콘 폰트 사용하기
• 6.9.1 구글 폰트 적용하기
• 6.9.2 아이콘 폰트 적용하기
• 마무리
• 셀프체크
• 7장 효과적인 레이아웃을 위한 CSS 속성 다루기
• 7.1 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
• 7.1.1 플렉스 박스 레이아웃 살펴보기
• 7.1.2 플렉스 박스 레이아웃의 기본 속성
• 7.1.3 플렉스 박스 레이아웃의 정렬 속성
• 1 분 퀴즈
• 7.2 그리드 레이아웃으로 2차원 레이아웃 설계하기
• 7.2.1 그리드 레이아웃 살펴보기
• 7.2.2 그리드 레이아웃의 기본 속성
• 7.2.3 그리드 레이아웃의 정렬 속성
• 7.2.4 그리드 레이아웃의 배치 속성
• 1 분 퀴즈
• 7.3 반응형 웹을 위한 미디어 쿼리 사용하기
• 7.3.1 미디어 쿼리란
• 7.3.2 뷰포트 알아보기
• 7.3.3 미디어 쿼리의 기본 문법
• 1 분 퀴즈
• 마무리
• 셀프체크
• Part 3 자바스크립트로 웹 동작 구현하기
• 8장 자바스크립트 시작하기
• 8.1 자바스크립트 코드 작성 방법
• 8.1.1 HTML 파일과 자바스크립트 연결하기
• 8.1.2 자바스크립트 코드 실행하기
• 8.2 프로그래밍 시작 전 알아 두기
• 8.2.1 주석
• 8.2.2 자바스크립트 오류 확인 방법
• 마무리
• 9장 자바스크립트 기초 문법 살펴보기
• 9.1 변수와 상수
• 9.1.1 변수
• 9.1.2 새로운 변수 선언 키워드 let
• 9.1.3 상수
• 9.1.4 식별자 명명 규칙
• 1 분 퀴즈
• 9.2 자료형
• 9.2.1 문자열
• 9.2.2 숫자형
• 9.2.3 논리형
• 9.2.4 undefined
• 9.2.5 null
• 9.2.6 객체
• 1 분 퀴즈
• 9.3 연산자
• 9.3.1 산술 연산자
• 9.3.2 대입 연산자와 복합 대입 연산자
• 9.3.3 비교 연산자
• 9.3.4 논리 연산자
• 9.3.5 삼항 연산자
• 9.3.6 연산자 우선순위
• 9.3.7 형 변환
• 1 분 퀴즈
• 9.4 조건문 다루기
• 9.4.1 if, else, else if 문
• 9.4.2 switch 문
• 9.4.3 if 문과 조건식
• 9.4.4 if 문 vs switch 문
• 1 분 퀴즈
• 9.5 반복문 다루기
• 9.5.1 while 문
• 9.5.2 무한 반복문
• 9.5.3 do...while 문
• 9.5.4 for 문
• 9.5.5 for 문과 배열
• 9.5.6 for...in
• 9.5.7 break 문
• 9.5.8 continue 문
• 1 분 퀴즈
• 마무리
• 셀프체크
• 10장 자바스크립트 함수 다루기
• 10.1 함수란
• 10.2 함수를 정의하는 방법
• 10.2.1 함수 선언문으로 함수 정의하기
• 10.2.2 함수 표현식으로 함수 정의하기
• 10.2.3 화살표 함수로 함수 정의하기
• 1 분 퀴즈
• 10.3 함수 기능 확장하기
• 10.3.1 매개변수와 인수
• 10.3.2 매개변수의 특징
• 10.3.3 return 문
• 1 분 퀴즈
• 10.4 함수의 특징 이해하기
• 10.4.1 스코프
• 10.4.2 함수 호이스팅
• 1 분 퀴즈
• 10.5 즉시 실행 함수 사용하기
• 1 분 퀴즈
• 마무리
• 셀프체크
• 11장 자바스크립트 객체 다루기
• 11.1 객체란
• 11.2 객체 속성 다루기
• 11.2.1 객체 속성에 접근하기
• 11.2.2 객체 속성 값 변경하기
• 11.2.3 객체 속성 동적으로 추가하기
• 11.2.4 객체 속성 동적으로 삭제하기
• 11.2.5 객체의 데이터 관리 방법 이해하기
• 1 분 퀴즈
• 11.3 표준 내장 객체 사용하기
• 11.3.1 문자열을 다루는 String 객체
• 11.3.2 배열을 다루는 Array 객체
• 11.3.3 날짜와 시간을 다루는 Date 객체
• 11.3.4 수학 연산을 다루는 Math 객체
• 1 분 퀴즈
• 11.4 브라우저 객체 모델 사용하기
• 11.4.1 window 객체의 속성과 메서드
• 11.4.2 window 객체의 기본 속성 사용하기
• 11.4.3 웹 브라우저에서 새 창 제어하기
• 11.4.4 웹 브라우저의 스크롤 이동하기
• 1 분 퀴즈
• 마무리
• 셀프체크
• 12장 문서 객체 모델과 이벤트 다루기
• 12.1 문서 객체 모델 이해하기
• 12.1.1 문서 객체 모델이 생성되는 방식
• 12.1.2 노드 타입 살펴보기
• 1 분 퀴즈
• 12.2 노드 선택하기
• 12.2.1 속성으로 노드 선택하기
• 12.2.2 메서드로 노드 선택하기
• 1 분 퀴즈
• 12.3 노드 조작하기
• 12.3.1 콘텐츠 조작하기
• 12.3.2 스타일 조작하기
• 12.3.3 클래스 속성 조작하기
• 12.3.4 데이터 속성 조작하기
• 12.3.5 메서드로 속성 조작하기
• 1 분 퀴즈
• 12.4 노드 추가/삭제하기
• 12.4.1 노드 추가하기
• 12.4.2 노드 삭제하기
• 1 분 퀴즈
• 12.5 폼 조작하기
• 12.5.1 form 태그 선택하기
• 12.5.2 폼 요소 선택하기
• 12.5.3 폼 요소의 입력값 다루기
• 1 분 퀴즈
• 12.6 이벤트 다루기
• 12.6.1 이벤트 종류
• 12.6.2 이벤트 등록하기
• 1 분 퀴즈
• 12.7 이벤트 객체와 this
• 12.7.1 이벤트 객체 사용하기
• 12.7.2 이벤트 취소하기
• 12.7.3 this 키워드 사용하기
• 1 분 퀴즈
• 마무리
• 셀프체크
• Part 4 프로젝트로 웹 개발 기초 완성하기
• 13장 HTML+CSS+자바스크립트로 완성하는 최종 프로젝트
• 13.1 최종 프로젝트 개요
• 13.2 헤더 영역 만들기
• 13.2.1 HTML 코드 작성하기
• 13.2.2 CSS 코드 작성하기
• 13.3 메인 영역 만들기
• 13.3.1 HTML 코드 작성하기
• 13.3.2 CSS 코드 작성하기
• 13.3.3 헤더 영역 개선하기
• 13.4 섹션 영역 만들기 - About Me
• 13.4.1 HTML 코드 작성하기
• 13.4.2 CSS 코드 작성하기
• 13.5 섹션 영역 만들기 – What I Do
• 13.5.1 HTML 코드 작성하기
• 13.5.2 CSS 코드 작성하기
• 13.6 배경 영역
• 13.7 섹션 영역 만들기 – PortFolio
• 13.7.1 HTML 코드 작성하기
• 13.7.2 CSS 코드 작성하기
• 13.8 섹션 영역 만들기 – Contact With Me
• 13.8.1 HTML 코드 작성하기
• 13.8.2 CSS 코드 작성하기
• 13.9 반응형 코드 적용하기
• 13.9.1 기준점 설정하기
• 13.9.2 반응형 코드 작성하기
• 13.10 자바스크립트 적용하기
• 13.10.1 텍스트 타이핑 효과 구현하기
• 13.10.2 스크롤 이동 시 헤더 영역에 스타일 적용하기
• 13.10.3 부드러운 이동 애니메이션 효과 구현하기
• 코딩 자율학습 HTML + CSS + 자바스크립트
• 13.11 유효성 검증하기
• 해설 노트