포트폴리오 웹사이트 클론코딩 (https://academy.dream-coding.com/courses/portfolio)

1. 시작하며
   1. 강의 소개
   2. 슬랙 가입하기 (중요!)
   3. 저작권 관련 안내사항 (중요!)
   4. 🔥 토론창/슬랙 이용전 필수로 읽어보세요 🔥
2. 프로젝트 셋업
   1. VS Code 설치하기
   2. 유용한 익스텐션 설치
   3. 주석색깔 바꾸기
   4. 폴더 구조 팁!
3. 깃과 깃허브
   1. 깃이란 무엇인가?
   2. 주요 용어 정리 ✏️
   3. 깃허브 데스크탑 셋업
4. HTML 정리
   1. HTML이란?
   2. 역사를 통해 정리하는 포인트
   3. HTML 요소
   4. Head 정리
   5. Body 정리
   6. 태그 정리
   7. 유용한 사이트 북마크🔖
   8. 사이트 구조 분해❓(넷플릭스당근마켓)
   9. 사이트 구조 분해💡
   10. 브라우저 툴 사용법 😎
5. CSS 정리
   1. CSS란?
   2. 캐스캐이딩 정리 🔥
   3. 프로젝트 셋업 (코드 다운로드⬇)
   4. 캐스캐이딩 데모
   5. 모든것은 박스!
   6. 보더와 아웃라인
   7. 블럭과 인라인
   8. Relative vs Absolute
   9. Sticky vs Fixed
   10. 정렬 테크닉 😎
   11. 반응형 백그라운드
   12. 트랜스포머 🤖
   13. 트랜지션 🛝
   14. 쿨한 애니메이션
   15. CSS 변수 ⭐️
   16. HTML 데이터
   17. 최종코드 다운로드⬇
6. HTML만들기-Head
   1. HTML 뼈대 만들기
   2. SEO 작업
   3. OG 작업
   4. 구글 폰트 셋업
   5. 폰트 오썸 셋업
   6. 폴더 구조 잡기
   7. 첫번째 커밋 🙌
   8. 최종코드 다운로드⬇
7. HTML만들기-Body
   1. 사이트 둘러보기
   2. 섹셔닝 나누기 챌린지❓
   3. 섹셔닝 나누기 솔루션💡
   4. 섹셔닝 태그 구현하기
   5. 헤더 만들기
   6. Home 섹션
   7. About 섹션
   8. Skills 섹션
   9. Work 섹션
   10. Testimonial 섹션
   11. 푸터 만들기 (웹접근성🍯)
   12. 최종코드 다운로드⬇
8. CSS 스타일링
   1. BEM 개념 정리
   2. 글로벌 변수
   3. 이름짓기 꿀팁🍯
   4. 헤더 꾸미기
   5. 홈 꾸미기
   6. 섹션 공통 스타일링🍯
   7. About 꾸미기
   8. Skills 꾸미기
   9. 스킬바 꾸미기
   10. Work 버튼 꾸미기
   11. 프로젝트 그리드 꾸미기
   12. Testimonial 꾸미기
   13. 푸터 꾸미기
   14. 반응형 스타일링
   15. 최종코드 다운로드⬇
9. 자바스크립트 구현 (기본)
   1. 챕터 안내 사항📍
   2. 헤더 투명에서 다크로❓
   3. 헤더 투명에서 다크로💡(기본)
   4. 헤더 투명에서 다크로💡(구현)
   5. 개발 공부 방법 🍯
   6. 홈화면 투명하게 처리❓
   7. 홈화면 투명하게 처리💡
   8. 화살표 아이콘 숨기기❓
   9. 화살표 아이콘 숨기기💡
   10. 모바일 메뉴 구현❓
   11. 모바일 메뉴 구현💡(파트1)
   12. 모바일 메뉴 구현💡(파트2)
   13. 파일 구조 나누기 🍯
   14. 프로젝트 필터링 하기❓
   15. 프로젝트 필터링 하기💡(파트1)
   16. 프로젝트 필터링 하기💡(파트2)
   17. 리팩토링 하기 😎
   18. 최종코드 다운로드⬇
10. 자바스크립트 구현 (심화)
    1. 스크롤시 메뉴 활성화❓(챌린지)
    2. 문서 읽어 보기😎
    3. 데모 프로젝트 셋업
    4. Intersection Observer 기본
    5. Intersection Observer 옵션
    6. 기본 동작 구현
    7. 로직 구현하기🔥
    8. 코드 다운로드⬇ (+부연설명)
    9. 옵션으로 정확하게
    10. 메뉴 선택하기
    11. 부드러운 스크롤링
    12. 최종코드 다운로드⬇
11. 배포하기
    1. 깃허브로 Push
    2. 깃허브 페이지
    3. OG 업데이트
    4. 깃허브 프로필 URL
    5. 나만의 도메인
12. 보너스 스타일링 💅
    1. 디바이더로 꾸미기❓
    2. 디바이더로 꾸미기💡
    3. SVG 디바이더 리팩토링🤖
    4. 그레디언트 배경
    5. 나만의 SVG 배경
    6. 테마색깔 손쉽게 변경!
    7. 타이핑 효과 주기⌨️
    8. 색다른 스타일링!
    9. 최종코드 다운로드⬇
13. 마무리
    1. 마지막 선물 🎁
    2. 잘가요 🙌

• shapedivider
• divider url 설명
• svg in css
• cssgradient
• svgbackgrounds
• chrome color picker