KDT1-FE · im-na0 · Jul 25, 2023 · Jul 25, 2023 · Jul 26, 2023 · Jul 26, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+*.scss
+*.css.map
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode"
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,45 +1,38 @@
-[참고 내용]
+# LG U+ 홈페이지 클론코딩
 
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
+#### 기간
 
-과제 수행 및 제출 방법
+2023-07-24 ~ 2023-07-28
 
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
+---
 
+#### 프로젝트 내용
 
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
+레퍼런스 : https://www.lguplus.com/
+<br> 데모 : https://glowing-chebakia-807feb.netlify.app/
 
-필수 요구사항
+---
 
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+#### 기능구현
 
-선택 요구사항
+- 시멘틱 태그를 활용했습니다
+- flex를 이용했습니다
+- JS로 애니메이션을 추가했습니다
+- Swiper를 이용해 슬라이드를 기능을 추가했습니다
 
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+---
 
-손쉬운 이미지 추출 방법
+#### 아쉬운점
 
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
+- 반응형을 고려하지 못했습니다
+- class를 과도하게 사용했습니다
+- scrollTop 기능을 구현하지 못했습니다
+- 이중 Swiper를 controll하는 부분을 구현하지 못했습니다
 
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+---
+
+#### 개선한 사항
+
+- 좀 더 시맨틱한 구조로 변경했습니다
+- SASS 사용하여 CSS를 작성했습니다
+- 오늘 하루 그만보기 기능 구현했습니다
diff --git a/asset/20220415-041637-163-63FvteTP.png b/asset/20220415-041637-163-63FvteTP.png
diff --git a/asset/20220415-041646-894-1zfKj1Je.png b/asset/20220415-041646-894-1zfKj1Je.png
diff --git a/asset/20220419-093024-186-7ObYwQif.svg b/asset/20220419-093024-186-7ObYwQif.svg
diff --git a/asset/20220419-093042-983-tOIre5w4.svg b/asset/20220419-093042-983-tOIre5w4.svg
diff --git a/asset/20220419-093058-771-Ti7ck8dy.svg b/asset/20220419-093058-771-Ti7ck8dy.svg
diff --git a/asset/20220722-024646-955-t7dDBlC4.jpg b/asset/20220722-024646-955-t7dDBlC4.jpg
diff --git a/asset/20220722-024704-052-K6x7cOz1.png b/asset/20220722-024704-052-K6x7cOz1.png
diff --git a/asset/20220812-020618-663-OMVftJP5.jpg b/asset/20220812-020618-663-OMVftJP5.jpg
diff --git a/asset/20221216-011102-627-uvRLhMIn.png b/asset/20221216-011102-627-uvRLhMIn.png
diff --git a/asset/20230324-021358-232-spH5wwZz.jpg b/asset/20230324-021358-232-spH5wwZz.jpg
diff --git a/asset/20230324-021409-649-nRc7Ztwb.jpg b/asset/20230324-021409-649-nRc7Ztwb.jpg
diff --git a/asset/20230324-021416-565-mc09yqX6.jpg b/asset/20230324-021416-565-mc09yqX6.jpg
diff --git a/asset/20230324-021422-917-S3zuTu3T.jpg b/asset/20230324-021422-917-S3zuTu3T.jpg
diff --git a/asset/20230324-021427-620-jV6T4bSm.jpg b/asset/20230324-021427-620-jV6T4bSm.jpg
diff --git a/asset/20230324-021437-749-qGkyxKfC.jpg b/asset/20230324-021437-749-qGkyxKfC.jpg
diff --git a/asset/20230324-021443-232-auk1B3NQ.jpg b/asset/20230324-021443-232-auk1B3NQ.jpg
diff --git a/asset/20230324-021447-604-VffJaO8P.jpg b/asset/20230324-021447-604-VffJaO8P.jpg
diff --git a/asset/20230324-021451-627-R0rZomyf.jpg b/asset/20230324-021451-627-R0rZomyf.jpg
diff --git a/asset/20230324-021455-267-Wtz9n6eQ.jpg b/asset/20230324-021455-267-Wtz9n6eQ.jpg
diff --git a/asset/20230329-034803-458-6E7IlQEW.jpg b/asset/20230329-034803-458-6E7IlQEW.jpg
diff --git a/asset/20230412-015433-797-yKNSineZ.png b/asset/20230412-015433-797-yKNSineZ.png
diff --git a/asset/20230508-021614-696-zq3vWDFj.jpg b/asset/20230508-021614-696-zq3vWDFj.jpg
diff --git a/asset/20230609-125010-382-15OPlUeP.jpg b/asset/20230609-125010-382-15OPlUeP.jpg
diff --git a/asset/20230615-044844-468-89w0cRO2.jpg b/asset/20230615-044844-468-89w0cRO2.jpg
diff --git a/asset/20230615-044851-791-K0Ld3u9O.jpg b/asset/20230615-044851-791-K0Ld3u9O.jpg
diff --git a/asset/20230615-044859-419-NZ2CT3vP.png b/asset/20230615-044859-419-NZ2CT3vP.png
diff --git a/asset/20230620-043737-370-6TGRhabz.jpg b/asset/20230620-043737-370-6TGRhabz.jpg
diff --git a/asset/20230620-045516-601-TuRvmDu9.jpg b/asset/20230620-045516-601-TuRvmDu9.jpg
diff --git a/asset/20230620-093144-845-EcTOQf1e.jpg b/asset/20230620-093144-845-EcTOQf1e.jpg
diff --git a/asset/20230621-043018-655-KgASBACq.jpg b/asset/20230621-043018-655-KgASBACq.jpg
diff --git a/asset/20230621-043902-523-2cjDtWeI.jpg b/asset/20230621-043902-523-2cjDtWeI.jpg
diff --git a/asset/20230628-043246-125-KnHNERTf.jpg b/asset/20230628-043246-125-KnHNERTf.jpg
diff --git a/asset/20230707-124241-425-hv4eQJmW.jpg b/asset/20230707-124241-425-hv4eQJmW.jpg
diff --git a/asset/20230711-035937-777-j0u8IyaO.jpg b/asset/20230711-035937-777-j0u8IyaO.jpg
diff --git a/asset/20230717-010142-134-3vpueBDv.jpg b/asset/20230717-010142-134-3vpueBDv.jpg
diff --git a/asset/20230720-025128-230-c2sLz2P5.jpg b/asset/20230720-025128-230-c2sLz2P5.jpg
diff --git a/asset/Customer-benefits.png b/asset/Customer-benefits.png
diff --git a/asset/Friend-recommendation.png b/asset/Friend-recommendation.png
diff --git a/asset/Information-inquiry.png b/asset/Information-inquiry.png
diff --git a/asset/Model.svg b/asset/Model.svg
diff --git a/asset/Payment-phone.svg b/asset/Payment-phone.svg
diff --git a/asset/cm-icon-01.png b/asset/cm-icon-01.png
diff --git a/asset/cm-icon-02.png b/asset/cm-icon-02.png
diff --git a/asset/cm-icon-03.png b/asset/cm-icon-03.png
diff --git a/asset/esim.png b/asset/esim.png
diff --git a/asset/footer-mark-auth-sinmungo.png b/asset/footer-mark-auth-sinmungo.png
diff --git a/asset/footer-mark-auth-wa.png b/asset/footer-mark-auth-wa.png
diff --git a/asset/footer-mark-auth-wise.png b/asset/footer-mark-auth-wise.png
diff --git a/asset/footer-sns-facebook.svg b/asset/footer-sns-facebook.svg
diff --git a/asset/footer-sns-insta.svg b/asset/footer-sns-insta.svg
diff --git a/asset/footer-sns-kakaostory.svg b/asset/footer-sns-kakaostory.svg
diff --git a/asset/footer-sns-lgblog.svg b/asset/footer-sns-lgblog.svg
diff --git a/asset/footer-sns-naverblog.svg b/asset/footer-sns-naverblog.svg
diff --git a/asset/footer-sns-twitter.svg b/asset/footer-sns-twitter.svg
diff --git a/asset/footer-sns-youtube.svg b/asset/footer-sns-youtube.svg
diff --git a/asset/header-banner.png b/asset/header-banner.png
diff --git a/asset/img_tooltip_direct.png b/asset/img_tooltip_direct.png
diff --git a/asset/mv-arrow.png b/asset/mv-arrow.png
diff --git a/asset/netflix.png b/asset/netflix.png
diff --git a/asset/optional-discount.png b/asset/optional-discount.png
diff --git a/asset/pause.png b/asset/pause.png
diff --git a/asset/play.png b/asset/play.png
diff --git a/asset/pr1.jpg b/asset/pr1.jpg
diff --git a/asset/pr2.jpg b/asset/pr2.jpg
diff --git a/asset/pr3.png b/asset/pr3.png
diff --git a/asset/quick-menu-octopus2.png b/asset/quick-menu-octopus2.png