KDT1-FE · leechanghwi · Apr 5, 2023 · Apr 5, 2023 · Apr 5, 2023 · Apr 5, 2023
diff --git a/README.md b/README.md
@@ -22,17 +22,23 @@
 - [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
 - [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
 - [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- o ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
 ## 선택 요구사항
 
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+- [o ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
+- [o ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
+- [o ] 부분적으로 BEM 방법론을 도입해보세요.
+- [o ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
+- [x ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+- [x ] SCSS 등의 CSS 전처리도구를 도입해보세요.
+- [x ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+
+ YouTube 웹사이트를 클론 코딩하였습니다.
+ 선택 요구사항을 지키기위해 css grid를 이용하여 작성하였고 grid를 사용하였고 BEM방법을 도입하였습니다. 또한 자바스크립트를 사용하지 않고 만들었습니다. root를 이용해 css의 폰트와 색상의 수정에 유용하게 만들어보도록 하였습니다.
+ 아쉬운점은 scss를 사용하지않고 만들었고 자바스크립트는 일부로 사용하지않았으나 자바스크립트를 사용하지않는 과정에서 구현에 대한 어려움을 많이 느꼈습니다. 또한 grid사용에 미숙하여 오랜 시간이 걸렸습니다.
+ 초기에는 사이드버튼의 유튜브링크 및 유튜브의 퍼가기 기능을 통해 iframe으로 영상을 넣어 구현하였으나 저작권 관련 문제 소지가 있을거 같아 전부 뺐습니다.
+
 
 ## 손쉬운 이미지 추출 방법
 

diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/bulb.svg b/images/bulb.svg
diff --git a/images/channel.svg b/images/channel.svg
diff --git a/images/fire.svg b/images/fire.svg
diff --git a/images/first.jpg b/images/first.jpg
diff --git a/images/flag.svg b/images/flag.svg
diff --git a/images/flash.png b/images/flash.png
diff --git a/images/game.svg b/images/game.svg
diff --git a/images/help.svg b/images/help.svg
diff --git a/images/home.svg b/images/home.svg
diff --git a/images/live.svg b/images/live.svg
diff --git a/images/menu.svg b/images/menu.svg
diff --git a/images/mic.svg b/images/mic.svg
diff --git a/images/movie.svg b/images/movie.svg
diff --git a/images/music.svg b/images/music.svg
diff --git a/images/past.svg b/images/past.svg
diff --git a/images/premium.svg b/images/premium.svg
diff --git a/images/report.svg b/images/report.svg
diff --git a/images/search.svg b/images/search.svg
diff --git a/images/second.jpg b/images/second.jpg
diff --git a/images/setting.svg b/images/setting.svg
diff --git a/images/shopping.svg b/images/shopping.svg
diff --git a/images/shorts.svg b/images/shorts.svg
diff --git a/images/sport.svg b/images/sport.svg
diff --git a/images/subscribe.svg b/images/subscribe.svg
diff --git a/images/user.png b/images/user.png
diff --git a/images/vert.svg b/images/vert.svg
diff --git a/images/videolibrary.svg b/images/videolibrary.svg
diff --git a/images/youtube.svg b/images/youtube.svg