그림으로 쉽게 배우는 HTML+CSS+자바스크립트

▣ 01장: 처음 만나는 웹
1.1 웹은 어떻게 동작하나요?
__전 세계를 하나로, 웹
__웹은 어떻게 동작할까?
__사용자의 화면을 담당하는 프런트엔드
1.2 간단하게 살펴보는 웹 개발
__서비스의 이면을 담당하는 백엔드와 데이터베이스

▣ 02장: 개발 도구와 친해지기
2.1 코드 편집기로 더 편리하게 개발하기
__코드 편집기란?
__VS Code 맛보기
__구글 홈페이지로 알아보는 개발자 도구
2.2 개발자 도구로 웹 브라우저 200% 활용하기
__HTML과 CSS를 확인하는 Elements 탭
__Console 탭으로 자바스크립트 코드 작성하기
__서비스의 모든 파일이 있는 Source 탭

▣ 03장: 웹 페이지의 뼈대를 구성하는 HTML
3.1 든든한 뼈대 HTML
__하이퍼텍스트로 알아보는 HTML
__HTML4와 HTML5는 무엇이 다를까?
__HTML의 기본, 태그
3.2 태그와 속성
__태그를 풍성하게 만드는 속성
3.3 HTML의 기본 구조
__HTML의 기본 구조 살펴보기
__VS Code로 간편하게 HTML 문서 만들기

▣ 04장: 자주 쓰이는 기본 HTML 태그
4.1 텍스트와 구조
__제목을 표현하는 <h1> ~ <h6> 태그
__단락을 표현하는 <p> 태그
__공백을 추가하는 <br> 태그
__선으로 내용을 구분하는 <hr> 태그
__텍스트를 강조하는 태그: <strong>, <em>
__이미지를 삽입하는 <img> 태그
4.2 이미지와 링크
__웹 페이지를 자유롭게 이동하는 <a> 태그
__<ul>로 순서가 없는 목록 만들기
4.3 목록 만들기
__<ol>로 순서가 있는 목록 만들기
__설명 목록을 만드는 <dl>, <dt>, <dd>
__<table>과 <caption>으로 표 정의하기
4.4 표 만들기
__행과 열을 만드는 <tr>, <th>, <td> 태그
__셀 영역을 확장하는 rowspan, colspan
__<audio>, <video> 태그로 멀티미디어 삽입하기
4.5 멀티미디어 요소
__<source> 태그로 다양한 형식의 콘텐츠 추가하기
__블록 요소와 인라인 요소
4.6 레이아웃 이해하기
__<div>와 <span>으로 레이아웃 만들기
__HTML5에서 새로 등장한 시맨틱 태그
__폼을 정의하는 <form> 태그
4.7 폼과 사용자 입력
__<input> 태그로 다양한 내용 입력받기
__<label> 태그로 폼 요소에 라벨 추가하기
__radio와 checkbox로 원하는 옵션 선택하기
__여러 줄의 텍스트를 입력할 수 있는 <textarea>
__선택 상자를 만드는 <select>
__버튼을 생성하는 <button>
__회원 가입 폼 완성하기

▣ 05장: 웹 페이지를 풍성하게 만드는 CSS
5.1 CSS로 화려하게 꾸미기
__스타일을 담당하는 CSS
__CSS는 왜 중요할까?
__CSS의 기본 구문
5.2 기본 작성 방식과 주석
__CSS에서 주석 사용하기
5.2 CSS는 어디에 작성해야 할까?
__요소에 직접 적용하는 인라인 스타일
__여러 요소에 적용하는 내부 스타일시트
__파일을 넘나드는 외부 스타일시트
__모든 요소를 선택하는 전체 선택자
5.3 CSS 기본 선택자
__특정 요소만 선택하는 타입 선택자
__클래스로 동일한 스타일 적용하기
__하나의 요소에만 스타일을 적용하는 ID 선택자
__요소의 속성을 선택하는 속성 선택자
__그룹 선택자로 여러 요소에 스타일 적용하기
5.4 더 많은 선택자 활용하기
__결합자로 하위 요소 선택하기
__상태에 따라 적용하는 가상 클래스 선택자

▣ 06장: 꼭 알아야 할 CSS 기본 속성
6.1 텍스트 스타일을 바꾸는 속성
__폰트를 지정하는 font-family
__크기를 지정하는 font-size
__스타일을 정의하는 font-style
__두께를 정의하는 font-weight
__색상을 지정하는 color
__줄 간격을 설정하는 line-height
6.2 텍스트 레이아웃 속성
__text-align으로 텍스트 정렬하기
__텍스트에 선을 추가하는 text-decoration
__글자 사이 간격을 담당하는 letter-spacing
__단어 사이 간격을 담당하는 word-spacing
__배경색을 설정하는 background-color
6.3 화면을 더욱 다채롭게, 배경 속성
__배경에 이미지를 적용하는 다양한 속성
__배경에 그러데이션 적용하기
__background 단축 속성으로 간편하게 선언하기
__박스 모델 이해하기
6.4 박스 모델 이해하기
__개발자 도구로 박스 모델 확인하기
__width, height로 요소의 크기 정하기
__margin과 padding으로 여백 만들기
__border로 테두리 만들기
__border-radius로 테두리 둥글게 만들기
__박스 모델 범위를 정하는 box-sizing
6.5 기본 레이아웃 속성
__요소를 어떻게 보여줄지 정하는 display
__요소의 배치 방식을 정하는 position
__z-index로 순서 정하기
__어디에 띄울까? float

▣ 07장: 웹 페이지의 완성도를 높이는 CSS 고급 속성
7.1 복잡한 레이아웃 간단히 구현하기
__플렉스박스로 질서 있게 정렬하기
__플렉스박스 컨테이너의 속성
__플렉스박스 아이템의 속성
__가로세로 그리드
__그리드 컨테이너의 속성
__그리드 아이템의 속성
__템플릿으로 그리드 쉽게 사용하기
7.2 반응형 디자인 구현하기
__뷰포트로 다양한 기기에서 표시하기
__크기에 따라 스타일이 달라지는 미디어 쿼리
__유튜브 카드 레이아웃 따라 하기
7.3 다양한 효과와 애니메이션 적용하기
__요소의 스타일 변화를 부드럽게 만드는 transition
__animation 속성으로 애니메이션 효과 적용하기
__자유자재로 변형하는 transform
__그림자를 추가하는 box-shadow
__불투명도를 설정하는 opacity
__다양한 그래픽 효과를 적용하는 filter 속성
7.4 웹 폰트 사용하기
__간편하게 사용하는 외부 웹 폰트
__내부 웹 폰트로 빠르게 폰트 불러오기

▣ 08장: 웹 페이지에 생동감을 불어넣는 자바스크립트
8.1 웹 페이지에 생명을 불어넣는 자바스크립트
__자바스크립트로 웹 페이지를 동적으로 바꾸기
__프로그래밍 언어란?
__HTML 문서 내부에 자바스크립트 코드 추가하기
8.2 자바스크립트 코드는 어디에 작성해야 할까?
__HTML 문서와 외부 자바스크립트 파일 연결하기
__자바스크립트 코드는 결과를 어떻게 확인할까?
8.3 미리 알아두면 좋은 자바스크립트 개념
__콘솔로 빠르게 오류 해결하기
__컨벤션과 주석으로 깔끔하게 코딩하기

▣ 09장: 자바스크립트의 기본 문법 익히기
9.1 무엇이든 담을 수 있는 변수
__변수란?
__변수 만들기
__let, const, var?
__숫자
__문자열
9.2 변수의 자료형
__불리언
__null과 undefined
__객체
__배열
9.3 더하고 빼고 연산자
__산술 연산자
__비교 연산자
__논리 연산자
__만약 이랬다면? 조건문
9.4 제어 흐름(조건문, 반복문)
__if, else if, else 문
__삼항 연산자
__switch 문
__반복문으로 원하는 만큼 반복하기
__for 문
__for...of
__while 문
__do...while 문
__함수란?
9.5 함수
__매개변수 사용하기
__반환값 활용하기
__화살표 함수로 더 쉽게 표현하기

▣ 10장: 자바스크립트로 동적인 웹 페이지 만들기
10.1 DOM으로 요소에 접근하기
__웹 페이지의 구조, DOM
__HTML 요소에 접근하는 다양한 방법
__텍스트를 조작하는 textContent
10.2 HTML 콘텐츠 조작하기
__innerHTML로 콘텐츠 수정하기
__HTML 요소의 속성 변경하기
__인라인 스타일 추가하기
10.3 CSS 스타일 수정하기
__클래스 목록 조작하기
__이벤트란?
10.4 이벤트와 이벤트 리스너
__이벤트를 감지하는 이벤트 리스너
__이벤트 객체로 더 다양하게 처리하기
10.5 폼 요소 조작하기
__폼 항목 데이터 가져오기
__폼 이벤트 관리하기

▣ 11장: 처음 만드는 웹 페이지
11.1 프로젝트 소개 및 작업 준비
__프로젝트 미리보기
__작업 폴더 준비하기
__기본 레이아웃 구현하기
11.2 메인 페이지 구현하기
__헤더 구현하기
__본문 구현하기
__푸터 구현하기
__레이아웃 구현하기
11.3 팝업 창 구현하기
__팝업 본문 태그 구현하기
__팝업 본문 스타일 구현하기
__자바스크립트로 동적 기능 추가하기
__깃허브란?
11.4 깃허브 페이지로 웹사이트 배포하기
__웹사이트 배포하기

▣ 12장: 더 나아가기
12.1 모두를 위한 웹 접근성
__웹 접근성이란?
__음성으로 모든 내용을 확인할 수 있도록
__시각적으로 인지가 어려워도 사용할 수 있도록
__신체에 제한이 있어도 사용할 수 있도록
12.2 API와 데이터 사용
__API란?
__자바스크립트에서 API 사용하기
__프런트엔드 라이브러리는 왜 필요할까?
12.3 프런트엔드 라이브러리 사용하기
__나에게 맞는 라이브러리 선택하기