★ 이렇게까지 친절한 기본서는 없었다!
★ 진짜 초보자도 자신 있게 끝낼 수 있도록 투머치 설명러 얄코가 다 알려 주는 웹 개발 가이드
명쾌한 설명과 전달력 높은 강의로 입문자들의 찬사를 받고 있는 얄코(얄팍한코딩사전)의 「제대로 파는 HTML+CSS」와 「뉴비를 위한 자바스크립트」 온라인 강의를 한 권의 책으로 담아냈습니다. 코딩이 처음인 사람도 어렵지 않게 프로그래밍과 웹 개발에 접근할 수 있도록 최대한 친절하고 쉬운 비유로 설명합니다. 한두 줄로 끝날 수 있는 기능 설명을 수많은 경우의 수의 화면을 보여 주며 비교하는 얄코 특유의 투머치 친절한 설명은 초보자뿐만 아니라 현업에 있는 개발자들도 놓치고 넘어가던 개념까지 세세하게 짚어 줍니다.
『얄코의 TOO MUCH 친절한 HTML+CSS+자바스크립트』는 웹 페이지 제작에 필요한 세 가지 기술을 서로 연계해서 공부하는 데 최적화된 상태로 구성되어 있습니다. 또한 개발물을 단지 시각적으로만 구현하는 것을 넘어 다양한 사람을 배려하고 타 개발자와도 협업하기 좋은 '착한' 웹사이트를 만드는 법까지 놓치지 않습니다. 총 15시간에 이르는 동영상 강의와 함께 하면서 바쁜 독자들이 쉽고 편리하게 코딩의 즐거움을 느끼게 하는 것이 이 책의 최우선 목표입니다.
‘얄코의 TOO MUCH 친절한’ 시리즈는
친절하다고 하지만 세상 불친절한 것이 많아 ‘TOO MUCH 친절한’으로 탄생하였습니다.

그래픽 디자이너로 활동하다 프로그래밍에 흥미를 갖게 되어 컴퓨터공학을 전공했다. 스타트업에서 개발 팀장으로 근무하면서 풀스택 및 모바일 개발을 담당했으며, 여러 서비스를 운영하면서 쌓은 지식을 사람들에게 쉽게 알려주고자 [얄팍한 코딩사전]이라는 유튜브 채널을 개설했다. 현재는 프리랜서 개발자로 활동하면서, 비전공자도 이해하기 쉬운 다양한 코딩 콘텐츠를 제작하는 데 몰두하고 있다.

PART 01 갖다 놓는 HTML

CHAPTER 01 시작하기 전에
_LESSON 01 HTML, CSS, 자바스크립트가 뭔가요?
__갖다 놓는 HTML, 꾸며 주는 CSS, 일을 시키는 자바스크립트
__왜 HTML, CSS 등으로 작성한 것은 ‘문서’라고 하나요?

_LESSON 02 환경 설정하기
__웹 브라우저 설치하기
__VS Code 설치하기
__VS Code에서 프로그래밍이 쉬워지는 옵션 설정하기
__VS Code에서 유용한 플러그인 설치하기
__얄코의 친절한 HTML 노트

CHAPTER 02 기본 태그로 첫 웹 페이지 만들기
_LESSON 03 첫 웹 페이지 만들기
__index.html 파일 만들기
__첫 웹 페이지 요소 입력하기
__페이지 소스 보기

_LESSON 04 첫 태그 사용하기
__태그 알아보기
__제목 태그와 문단 태그
__텍스트 관련 태그
__태그 속성 사용하기

_LESSON 05 태그로 여러 요소 나열하기
__목록을 표현하는 태그
__용어와 정의를 나열하는 태그
__얄코의 친절한 HTML 노트

CHAPTER 03 웹 페이지에 다양한 요소 넣기
_LESSON 06 이미지 태그 사용하기
__절대 경로와 상대 경로로 이미지 넣기
__이미지 크기 조절하기

_LESSON 07 표 사용하기
__기본 테이블 태그
__테이블 영역 태그
__셀 병합 태그
__열 그룹 태그

_LESSON 08 다른 곳으로 링크하기
__a 태그로 링크 이동하기
__id 값으로 원하는 위치로 이동하기
__태그로 연락처 연결하기
__얄코의 친절한 HTML 노트

CHAPTER 04 사용자로부터 입력받기
_LESSON 09 form 태그 사용하기
__form 태그의 속성
__form 태그 안 요소 그룹화하기

_LESSON 10 input 태그 사용하기
__텍스트 관련 input 태그
__숫자 관련 input 태그
__체크 관련 input 태그
__기타 input 태그
__input 태그 공통 속성

_LESSON 11 기타 다른 태그 사용하기
__textarea 태그
__옵션 선택 관련 태그
__정도를 표현하는 태그
__pre 태그
__iframe 태그
__알아두면 좋을 태그들
__아무것도 하지 않는 태그
__얄코의 친절한 HTML 노트

PART 02 꾸미는 CSS

CHAPTER 05 CSS 기본 지식 알기
_LESSON 12 CSS 적용 방법과 선택자
__CSS를 적용하는 세 가지 방법
__기본 선택자
__태그 선택자
__클래스 선택자
__id 선택자
__그룹 선택자

_LESSON 13 결합자와 가상 클래스
__자손 결합자
__동생 결합자
__가상 클래스
__얄코의 친절한 CSS 노트

CHAPTER 06 글자와 텍스트 스타일 적용하기
_LESSON 14 글자 스타일
__기울임과 굵기
__글자 크기
__글자 꾸미기

_LESSON 15 문단과 목록 스타일
__정렬과 간격
__목록 스타일
__얄코의 친절한 CSS 노트

CHAPTER 07 인라인과 블록 및 박스 모델 이해하기
_LESSON 16 인라인 요소와 블록 요소
__기본 너비와 개념
__너비와 높이 조절하기
__가로 공간 차지하기
__여백 적용하기

_LESSON 17 박스 모델
__요소의 크기
__바깥쪽 여백과 안쪽 여백
__테두리 속성
__박스 그림자 속성
__얄코의 친절한 CSS 노트

CHAPTER 08 색과 이미지로 웹 페이지 꾸미기
_LESSON 18 색 표현하기
__색을 표현하는 네 가지 방법

_LESSON 19 배경 꾸미기
__이미지를 배경에 사용하기
__배경에 그라데이션 넣기
__얄코의 친절한 CSS 노트

CHAPTER 09 포지셔닝과 레이아웃
_LESSON 20 포지셔닝
__position 속성
__z-index 속성

_LESSON 21 Flex 레이아웃
__부모에 적용하는 Flex
__자식에 적용하는 Flex

_LESSON 22 요소를 감추는 방법들
__CSS에서 요소를 숨기는 세 가지 방법
__마우스 커서 모양 바꾸기
__얄코의 친절한 CSS 노트

PART 03 HTML 더 깊이 알아보기

CHAPTER 10 용도에 따른 태그 사용하기
_LESSON 23 상단의 태그들
__DOCTYPE
__head 태그

_LESSON 24 시맨틱 태그
__시맨틱 태그 사용의 장점
__시맨틱 태그의 종류

_LESSON 25 기타 미디어 삽입하기
__SVG 이미지
__오디오와 동영상
__얄코의 친절한 HTML 노트

CHAPTER 11 모두가 이용할 수 있는 웹사이트 만들기
_LESSON 26 웹 접근성
__alt 속성으로 이미지 설명하기
__숨겨 놓은 요소 설명하기
__aria-label 속성
__aria-hidden 속성과 role 속성
__figure 태그와 figcaption 태그

_LESSON 27 가독성을 위한 이름 짓기
__태그 위주로 이름 짓기
__클래스 위주로 이름 짓기
__BEM으로 이름 짓기
__얄코의 친절한 HTML 노트

PART 04 CSS 더 깊이 알아보기

CHAPTER 12 요소를 지정하는 세련된 방법
_LESSON 28 반복 및 공통되는 스타일
__다른 CSS 파일 임포트하기
__CSS 변수 사용하기

_LESSON 29 선택자 심화
__특성 선택자
__가상 클래스

_LESSON 30 상속과 리셋
__상속되는 속성, 상속되지 않는 속성
__모든 속성 리셋하기

_LESSON 31 벤더 프리픽스
__벤더 프리픽스 사용하기
__얄코의 친절한 CSS 노트

CHAPTER 13 서체와 테이블 스타일링하기
_LESSON 32 서체와 웹 폰트
__font-family 속성
__웹 폰트 적용하기

_LESSON 33 텍스트 심화
__vertical-align 속성
__white-space 속성
__text-overflow 속성

_LESSON 34 테이블 스타일링
__테이블 스타일 속성
__테이블 요소의 display 속성
__얄코의 친절한 CSS 노트

CHAPTER 14 레이아웃 변형과 애니메이션으로 효과 주기
_LESSON 35 float 속성
__float 속성과 clear 속성
__부모의 크기 문제 해결하기

_LESSON 36 Grid 레이아웃
__부모에 적용하는 Grid
__자식에 적용하는 Grid

_LESSON 37 변형과 애니메이션
__transform 속성
__transition 속성
__animation 속성
__얄코의 친절한 CSS 노트

CHAPTER 15 반응형 웹과 CSS 추가 지식 알아보기
_LESSON 38 반응형 웹
__적응형 웹 vs 반응형 웹
__반응형 웹 만들기

_LESSON 39 기타 알아두면 좋을 속성들
__clip 속성과 clip-path 속성
__scroll-snap 속성
__aspect-ratio 속성
__backdrop-filter 속성

_LESSON 40 프레임워크와 라이브러리
__프론트엔드 프레임워크
__아이콘 라이브러리
__얄코의 친절한 CSS 노트

PART 05 HTML과 CSS를 활용한 파이널 프로젝트

CHAPTER 16 코딩 강좌 웹사이트 제작하기
_LESSON 41 프로젝트 설치 및 환경 설정
__프로젝트 설치하기
__style.css 파일 완성하기

_LESSON 42 상단 인트로
__intro.css

_LESSON 43 헤더와 메뉴
__header.css

_LESSON 44 메인과 about
__main.css
__about.css

_LESSON 45 HTML & CSS 섹션
__html-css.css

_LESSON 46 커리큘럼
__curriculum.css

_LESSON 47 문의하기와 푸터
__contact.css
__footer.css

PART 05 시키는 자바스크립트

CHAPTER 17 시작하기 전에
_LESSON 48 실습 환경 구축하기
__실습 도구

_LESSON 49 콘솔과 주석 활용하기
__콘솔
__주석
__얄코의 친절한 JavaScript 노트

CHAPTER 18 자바스크립트 기본 지식 알기
_LESSON 50 변수와 상수에 데이터 담기
__변수와 상수
__식별자 명명 규칙

_LESSON 51 기본 자료형과 연산자
__자료형
__연산자

_LESSON 52 객체와 배열
__객체
__배열

_LESSON 53 조건문
__if / else 문
__switch 문

_LESSON 54 반복문
__for 문
__while 문

_LESSON 55 함수
__함수의 정의
__함수의 활용
__얄코의 친절한 JavaScript 노트

CHAPTER 19 HTML과 CSS에 자바스크립트 더하기
_LESSON 56 HTML 요소 선택 및 조작하기
__DOM의 개념
__요소를 선택하는 방법
__선택된 요소를 조작하는 방법

_LESSON 57 이벤트 추가하기
__이벤트
__이벤트 객체
__얄코의 친절한 JavaScript 노트

CHAPTER 20 파이널 프로젝트 보완하기
_LESSON 58 기존 데이터에 요소 만들기
__내비게이션
__about

_LESSON 59 이벤트 애니메이션 만들기
__커리큘럼
__문의하기
__모바일 메뉴 버튼

__찾아보기