목차

1. 1장 들어가기 전

   • 1.1 Visual Studio Code
   • 1.2 수업 전 알아 두기
   • 1.3 WEB
   • 1.4 HTML5

2. 2장 HTML

   • 2.1 HTML 문서해부
   • 2.2 HTML 기본 문법
   • 2.3 스니펫 만들기
   • 2.4 Emmet 실습!

3. 3장 일단 글을 적어보자!

   • 3.1 텍스트와 관련된 태그들
   • 3.2 목록 관련 태그 ul,ol,dl

4. 4장 어떤 태그는 줄바꿈이 되고 어떤 것은 안될까?

   • 4.1 블록 레벨 요소 vs 인라인 요소
   • 4.2 콘텐츠 카테고리

5. 5장 이미지도 넣어보자!

   • 5.1 이미지 img
   • 5.2 about me 페이지 만들기

6. 6장 어떻게 배치하면 좋을까?

   • 6.1 웹 접근성
   • 6.2 Layout History
   • 6.3 Semantic Elements
   • 6.4 헷갈리는 Semantic Tags 정리
   • 6.5 (해보기) 로그인
   • 6.6 (해보기)Sections 나눠보기
   • 6.7 (해보기)웹페이지 마크업 해보기

7. 7장 웹페이지에 다양한 컨텐츠를 넣고 싶어!

   • 7.1 표(table)
   • 7.2 (해보기) 표 만들기
   • 7.3 video & audio
   • 7.4 iframe
   • 7.5 SVG, Canvas
   • 7.6 양식(form)
   • 7.7 (해보기) <form>로그인 모달 완성하기
   • 7.8 그 외 다양한 태그들

8. 8장 검색도 잘되게 해보자

   • 8.1 검색엔진 최적화(SEO)

9. 9장 CSS

   • 9.1 CSS 기본
   • 9.2 CSS 적용하기
   • 9.3 CSS 상속

10. 10장 CSS 선택자

    • 10.1 선택자 기초
    • 10.2 복합 선택자
    • 10.3 선택자 우선순위
    • 10.4 네이밍 규칙

11. 11장 텍스트 관련 속성

    • 11.1 텍스트 꾸미기
    • 11.2 단위
    • 11.3 list-style
    • 11.4 가상 클래스와 가상 요소
    • 11.5 CSS 변수

12. 12장 CSS의 기본, Box Model

    • 12.1 CSS Box Model
    • 12.2 display 속성
    • 12.3 이미지 비율 유지하기
    • 12.4 CSS 초기화

13. 13장 CSS 레이아웃 기초

    • 13.1 position
    • 13.2 z-index

14. 14장 CSS 레이아웃 심화

    • 14.1 float
    • 14.2 flex
    • 14.3 grid
    • 14.4 선택자 심화

15. 15장 CSS 애니메이션 및 트랜지션

    • 15.1 transform
    • 15.2 transition
    • 15.3 animation
    • 15.4 3D 관련 속성들

16. 16장 반응형 웹 디자인

    • 16.1 반응형 웹
    • 16.2 CSS 함수
    • 16.3 미디어 쿼리
    • 16.4 반응형 이미지