얄코의 TOO MUCH 친절한 HTML + CSS + 자바스크립트

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 06 시키는 자바스크립트

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 이벤트 애니메이션 만들기
__커리큘럼
__문의하기
__모바일 메뉴 버튼

__찾아보기

★ 저자 인터뷰 ★

Q. 코딩을 쉽게 설명하기 위해 특별히 어떤 노력을 하셨나요?

A. 저는 원래 디자이너 출신이었어요. 비전공자로서 낯선 IT 개념들을 당혹스럽게 바라보던 때를 기 억하며, 가능한 한 일상적이고 직관적인 비유로 쉽게 개념을 설명하고자 꾸준히 연구해 왔습니다. 그 고민을 녹여 낸 결과물이 유튜브 강의와 책입니다.

Q. HTML, CSS, 자바스크립트를 한 번에 배워야 하는 이유는 무엇일까요?

A. 자전거를 배울 때 페달 밟는 법, 핸들 방향을 바꾸는 법, 브레이크 잡는 법을 따로따로 배우지는

않죠. HTML과 CSS, 자바스크립트 역시 함께 사용되도록 만들어진 것이므로 서로 연계해서 공

부해야 합니다. 그중에서도 HTML과 CSS는 한 쌍의 젓가락처럼 밀접하게 작용하며 웹사이트를

구성합니다. 이 둘은 반드시 함께 공부하고 실습해야 각각을 더더욱 제대로 공부할 수 있습니다.

Q. 코딩을 사람보다 AI가 더 잘한다는데, 이런 AI 시대에 이 책을 꼭 봐야 하는 이유는 뭘까요?

A. 앞으로 사람이 직접 코드를 입력하는 일은 크게 줄어드는 대신 AI가 작성해 주는 코드를 적재적소에 활용하는 빈도가 높아질 것입니다. 그러려면 컴퓨터가 짠 코드를 이해하고 판단할 수 있는 지식이 필요합니다. 이때는 직접 코드를 짤 때보다 근본적이고 깊이 있는 지식이 필요합니다. 따라서 AI 시대에는 당연히 이 책과 같이 프로그래밍 언어의 기본기부터 심화까지 파고드는 공부를 해 둘 필요가 있습니다.