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