diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..3ccfbd86 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +*.scss +*.css.map \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 00000000..26454ac6 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "esbenp.prettier-vscode" + ] +} diff --git a/README.md b/README.md index cc6a3b23..1cc11ca6 100644 --- 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/ +
데모 : 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 new file mode 100644 index 00000000..3da92dcb Binary files /dev/null and b/asset/20220415-041637-163-63FvteTP.png differ diff --git a/asset/20220415-041646-894-1zfKj1Je.png b/asset/20220415-041646-894-1zfKj1Je.png new file mode 100644 index 00000000..5149c8b3 Binary files /dev/null and b/asset/20220415-041646-894-1zfKj1Je.png differ diff --git a/asset/20220419-093024-186-7ObYwQif.svg b/asset/20220419-093024-186-7ObYwQif.svg new file mode 100644 index 00000000..74b40083 --- /dev/null +++ b/asset/20220419-093024-186-7ObYwQif.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/asset/20220419-093042-983-tOIre5w4.svg b/asset/20220419-093042-983-tOIre5w4.svg new file mode 100644 index 00000000..a0f69f3c --- /dev/null +++ b/asset/20220419-093042-983-tOIre5w4.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/asset/20220419-093058-771-Ti7ck8dy.svg b/asset/20220419-093058-771-Ti7ck8dy.svg new file mode 100644 index 00000000..36e7f141 --- /dev/null +++ b/asset/20220419-093058-771-Ti7ck8dy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/asset/20220722-024646-955-t7dDBlC4.jpg b/asset/20220722-024646-955-t7dDBlC4.jpg new file mode 100644 index 00000000..34b4aaa7 Binary files /dev/null and b/asset/20220722-024646-955-t7dDBlC4.jpg differ diff --git a/asset/20220722-024704-052-K6x7cOz1.png b/asset/20220722-024704-052-K6x7cOz1.png new file mode 100644 index 00000000..82d70679 Binary files /dev/null and b/asset/20220722-024704-052-K6x7cOz1.png differ diff --git a/asset/20220812-020618-663-OMVftJP5.jpg b/asset/20220812-020618-663-OMVftJP5.jpg new file mode 100644 index 00000000..10095b94 Binary files /dev/null and b/asset/20220812-020618-663-OMVftJP5.jpg differ diff --git a/asset/20221216-011102-627-uvRLhMIn.png b/asset/20221216-011102-627-uvRLhMIn.png new file mode 100644 index 00000000..5677348c Binary files /dev/null and b/asset/20221216-011102-627-uvRLhMIn.png differ diff --git a/asset/20230324-021358-232-spH5wwZz.jpg b/asset/20230324-021358-232-spH5wwZz.jpg new file mode 100644 index 00000000..50d39fd3 Binary files /dev/null and b/asset/20230324-021358-232-spH5wwZz.jpg differ diff --git a/asset/20230324-021409-649-nRc7Ztwb.jpg b/asset/20230324-021409-649-nRc7Ztwb.jpg new file mode 100644 index 00000000..126d4ba9 Binary files /dev/null and b/asset/20230324-021409-649-nRc7Ztwb.jpg differ diff --git a/asset/20230324-021416-565-mc09yqX6.jpg b/asset/20230324-021416-565-mc09yqX6.jpg new file mode 100644 index 00000000..680e3e37 Binary files /dev/null and b/asset/20230324-021416-565-mc09yqX6.jpg differ diff --git a/asset/20230324-021422-917-S3zuTu3T.jpg b/asset/20230324-021422-917-S3zuTu3T.jpg new file mode 100644 index 00000000..13be72e3 Binary files /dev/null and b/asset/20230324-021422-917-S3zuTu3T.jpg differ diff --git a/asset/20230324-021427-620-jV6T4bSm.jpg b/asset/20230324-021427-620-jV6T4bSm.jpg new file mode 100644 index 00000000..48ba5f86 Binary files /dev/null and b/asset/20230324-021427-620-jV6T4bSm.jpg differ diff --git a/asset/20230324-021437-749-qGkyxKfC.jpg b/asset/20230324-021437-749-qGkyxKfC.jpg new file mode 100644 index 00000000..8dd11d5a Binary files /dev/null and b/asset/20230324-021437-749-qGkyxKfC.jpg differ diff --git a/asset/20230324-021443-232-auk1B3NQ.jpg b/asset/20230324-021443-232-auk1B3NQ.jpg new file mode 100644 index 00000000..2d7c1fc7 Binary files /dev/null and b/asset/20230324-021443-232-auk1B3NQ.jpg differ diff --git a/asset/20230324-021447-604-VffJaO8P.jpg b/asset/20230324-021447-604-VffJaO8P.jpg new file mode 100644 index 00000000..2536fa4e Binary files /dev/null and b/asset/20230324-021447-604-VffJaO8P.jpg differ diff --git a/asset/20230324-021451-627-R0rZomyf.jpg b/asset/20230324-021451-627-R0rZomyf.jpg new file mode 100644 index 00000000..0a6353ab Binary files /dev/null and b/asset/20230324-021451-627-R0rZomyf.jpg differ diff --git a/asset/20230324-021455-267-Wtz9n6eQ.jpg b/asset/20230324-021455-267-Wtz9n6eQ.jpg new file mode 100644 index 00000000..e66a194c Binary files /dev/null and b/asset/20230324-021455-267-Wtz9n6eQ.jpg differ diff --git a/asset/20230329-034803-458-6E7IlQEW.jpg b/asset/20230329-034803-458-6E7IlQEW.jpg new file mode 100644 index 00000000..1d5909df Binary files /dev/null and b/asset/20230329-034803-458-6E7IlQEW.jpg differ diff --git a/asset/20230412-015433-797-yKNSineZ.png b/asset/20230412-015433-797-yKNSineZ.png new file mode 100644 index 00000000..0ef6dc5b Binary files /dev/null and b/asset/20230412-015433-797-yKNSineZ.png differ diff --git a/asset/20230508-021614-696-zq3vWDFj.jpg b/asset/20230508-021614-696-zq3vWDFj.jpg new file mode 100644 index 00000000..12255f98 Binary files /dev/null and b/asset/20230508-021614-696-zq3vWDFj.jpg differ diff --git a/asset/20230609-125010-382-15OPlUeP.jpg b/asset/20230609-125010-382-15OPlUeP.jpg new file mode 100644 index 00000000..e7932676 Binary files /dev/null and b/asset/20230609-125010-382-15OPlUeP.jpg differ diff --git a/asset/20230615-044844-468-89w0cRO2.jpg b/asset/20230615-044844-468-89w0cRO2.jpg new file mode 100644 index 00000000..73aba36a Binary files /dev/null and b/asset/20230615-044844-468-89w0cRO2.jpg differ diff --git a/asset/20230615-044851-791-K0Ld3u9O.jpg b/asset/20230615-044851-791-K0Ld3u9O.jpg new file mode 100644 index 00000000..3d2c8b73 Binary files /dev/null and b/asset/20230615-044851-791-K0Ld3u9O.jpg differ diff --git a/asset/20230615-044859-419-NZ2CT3vP.png b/asset/20230615-044859-419-NZ2CT3vP.png new file mode 100644 index 00000000..12a00bdf Binary files /dev/null and b/asset/20230615-044859-419-NZ2CT3vP.png differ diff --git a/asset/20230620-043737-370-6TGRhabz.jpg b/asset/20230620-043737-370-6TGRhabz.jpg new file mode 100644 index 00000000..eafd2558 Binary files /dev/null and b/asset/20230620-043737-370-6TGRhabz.jpg differ diff --git a/asset/20230620-045516-601-TuRvmDu9.jpg b/asset/20230620-045516-601-TuRvmDu9.jpg new file mode 100644 index 00000000..0e060070 Binary files /dev/null and b/asset/20230620-045516-601-TuRvmDu9.jpg differ diff --git a/asset/20230620-093144-845-EcTOQf1e.jpg b/asset/20230620-093144-845-EcTOQf1e.jpg new file mode 100644 index 00000000..0ed7fc79 Binary files /dev/null and b/asset/20230620-093144-845-EcTOQf1e.jpg differ diff --git a/asset/20230621-043018-655-KgASBACq.jpg b/asset/20230621-043018-655-KgASBACq.jpg new file mode 100644 index 00000000..99336362 Binary files /dev/null and b/asset/20230621-043018-655-KgASBACq.jpg differ diff --git a/asset/20230621-043902-523-2cjDtWeI.jpg b/asset/20230621-043902-523-2cjDtWeI.jpg new file mode 100644 index 00000000..49db361b Binary files /dev/null and b/asset/20230621-043902-523-2cjDtWeI.jpg differ diff --git a/asset/20230628-043246-125-KnHNERTf.jpg b/asset/20230628-043246-125-KnHNERTf.jpg new file mode 100644 index 00000000..87c83f30 Binary files /dev/null and b/asset/20230628-043246-125-KnHNERTf.jpg differ diff --git a/asset/20230707-124241-425-hv4eQJmW.jpg b/asset/20230707-124241-425-hv4eQJmW.jpg new file mode 100644 index 00000000..a8934d62 Binary files /dev/null and b/asset/20230707-124241-425-hv4eQJmW.jpg differ diff --git a/asset/20230711-035937-777-j0u8IyaO.jpg b/asset/20230711-035937-777-j0u8IyaO.jpg new file mode 100644 index 00000000..4a4bff6f Binary files /dev/null and b/asset/20230711-035937-777-j0u8IyaO.jpg differ diff --git a/asset/20230717-010142-134-3vpueBDv.jpg b/asset/20230717-010142-134-3vpueBDv.jpg new file mode 100644 index 00000000..9d97926e Binary files /dev/null and b/asset/20230717-010142-134-3vpueBDv.jpg differ diff --git a/asset/20230720-025128-230-c2sLz2P5.jpg b/asset/20230720-025128-230-c2sLz2P5.jpg new file mode 100644 index 00000000..2e116619 Binary files /dev/null and b/asset/20230720-025128-230-c2sLz2P5.jpg differ diff --git a/asset/Customer-benefits.png b/asset/Customer-benefits.png new file mode 100644 index 00000000..b680259e Binary files /dev/null and b/asset/Customer-benefits.png differ diff --git a/asset/Friend-recommendation.png b/asset/Friend-recommendation.png new file mode 100644 index 00000000..d4f53f41 Binary files /dev/null and b/asset/Friend-recommendation.png differ diff --git a/asset/Information-inquiry.png b/asset/Information-inquiry.png new file mode 100644 index 00000000..e89e0343 Binary files /dev/null and b/asset/Information-inquiry.png differ diff --git a/asset/Model.svg b/asset/Model.svg new file mode 100644 index 00000000..0e766117 --- /dev/null +++ b/asset/Model.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/asset/Payment-phone.svg b/asset/Payment-phone.svg new file mode 100644 index 00000000..02275c66 --- /dev/null +++ b/asset/Payment-phone.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/asset/cm-icon-01.png b/asset/cm-icon-01.png new file mode 100644 index 00000000..77b4f3a5 Binary files /dev/null and b/asset/cm-icon-01.png differ diff --git a/asset/cm-icon-02.png b/asset/cm-icon-02.png new file mode 100644 index 00000000..a2d2f0c6 Binary files /dev/null and b/asset/cm-icon-02.png differ diff --git a/asset/cm-icon-03.png b/asset/cm-icon-03.png new file mode 100644 index 00000000..1d7ef852 Binary files /dev/null and b/asset/cm-icon-03.png differ diff --git a/asset/esim.png b/asset/esim.png new file mode 100644 index 00000000..984101b9 Binary files /dev/null and b/asset/esim.png differ diff --git a/asset/footer-mark-auth-sinmungo.png b/asset/footer-mark-auth-sinmungo.png new file mode 100644 index 00000000..7d02ee82 Binary files /dev/null and b/asset/footer-mark-auth-sinmungo.png differ diff --git a/asset/footer-mark-auth-wa.png b/asset/footer-mark-auth-wa.png new file mode 100644 index 00000000..096eb25a Binary files /dev/null and b/asset/footer-mark-auth-wa.png differ diff --git a/asset/footer-mark-auth-wise.png b/asset/footer-mark-auth-wise.png new file mode 100644 index 00000000..f668b797 Binary files /dev/null and b/asset/footer-mark-auth-wise.png differ diff --git a/asset/footer-sns-facebook.svg b/asset/footer-sns-facebook.svg new file mode 100644 index 00000000..b8203166 --- /dev/null +++ b/asset/footer-sns-facebook.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/asset/footer-sns-insta.svg b/asset/footer-sns-insta.svg new file mode 100644 index 00000000..dec07563 --- /dev/null +++ b/asset/footer-sns-insta.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/asset/footer-sns-kakaostory.svg b/asset/footer-sns-kakaostory.svg new file mode 100644 index 00000000..e954d3bf --- /dev/null +++ b/asset/footer-sns-kakaostory.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/asset/footer-sns-lgblog.svg b/asset/footer-sns-lgblog.svg new file mode 100644 index 00000000..58df5a09 --- /dev/null +++ b/asset/footer-sns-lgblog.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/asset/footer-sns-naverblog.svg b/asset/footer-sns-naverblog.svg new file mode 100644 index 00000000..e3758ee5 --- /dev/null +++ b/asset/footer-sns-naverblog.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/asset/footer-sns-twitter.svg b/asset/footer-sns-twitter.svg new file mode 100644 index 00000000..b528ddee --- /dev/null +++ b/asset/footer-sns-twitter.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/asset/footer-sns-youtube.svg b/asset/footer-sns-youtube.svg new file mode 100644 index 00000000..ec05fa3b --- /dev/null +++ b/asset/footer-sns-youtube.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/asset/header-banner.png b/asset/header-banner.png new file mode 100644 index 00000000..0d75bee2 Binary files /dev/null and b/asset/header-banner.png differ diff --git a/asset/img_tooltip_direct.png b/asset/img_tooltip_direct.png new file mode 100644 index 00000000..a608bca6 Binary files /dev/null and b/asset/img_tooltip_direct.png differ diff --git a/asset/mv-arrow.png b/asset/mv-arrow.png new file mode 100644 index 00000000..57e7b340 Binary files /dev/null and b/asset/mv-arrow.png differ diff --git a/asset/netflix.png b/asset/netflix.png new file mode 100644 index 00000000..2ddc2b37 Binary files /dev/null and b/asset/netflix.png differ diff --git a/asset/optional-discount.png b/asset/optional-discount.png new file mode 100644 index 00000000..c6efc4bc Binary files /dev/null and b/asset/optional-discount.png differ diff --git a/asset/pause.png b/asset/pause.png new file mode 100644 index 00000000..0e4ec9aa Binary files /dev/null and b/asset/pause.png differ diff --git a/asset/play.png b/asset/play.png new file mode 100644 index 00000000..5346f6de Binary files /dev/null and b/asset/play.png differ diff --git a/asset/pr1.jpg b/asset/pr1.jpg new file mode 100644 index 00000000..4316b77f Binary files /dev/null and b/asset/pr1.jpg differ diff --git a/asset/pr2.jpg b/asset/pr2.jpg new file mode 100644 index 00000000..f48ba10f Binary files /dev/null and b/asset/pr2.jpg differ diff --git a/asset/pr3.png b/asset/pr3.png new file mode 100644 index 00000000..89879a78 Binary files /dev/null and b/asset/pr3.png differ diff --git a/asset/quick-menu-octopus2.png b/asset/quick-menu-octopus2.png new file mode 100644 index 00000000..51c493a9 Binary files /dev/null and b/asset/quick-menu-octopus2.png differ diff --git a/asset/quick-menu-plus-wh.svg b/asset/quick-menu-plus-wh.svg new file mode 100644 index 00000000..9feeac0d --- /dev/null +++ b/asset/quick-menu-plus-wh.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/asset/red-dot.png b/asset/red-dot.png new file mode 100644 index 00000000..c1a0354a Binary files /dev/null and b/asset/red-dot.png differ diff --git a/asset/roaming.png b/asset/roaming.png new file mode 100644 index 00000000..515eb416 Binary files /dev/null and b/asset/roaming.png differ diff --git a/asset/sprites-common.svg b/asset/sprites-common.svg new file mode 100644 index 00000000..3a219371 --- /dev/null +++ b/asset/sprites-common.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/asset/sub-hamburger.png b/asset/sub-hamburger.png new file mode 100644 index 00000000..ea7b74ee Binary files /dev/null and b/asset/sub-hamburger.png differ diff --git a/asset/sub-market.png b/asset/sub-market.png new file mode 100644 index 00000000..30613a8d Binary files /dev/null and b/asset/sub-market.png differ diff --git a/asset/sub-search.png b/asset/sub-search.png new file mode 100644 index 00000000..578b86cc Binary files /dev/null and b/asset/sub-search.png differ diff --git a/asset/sub-shopping.png b/asset/sub-shopping.png new file mode 100644 index 00000000..79ab717f Binary files /dev/null and b/asset/sub-shopping.png differ diff --git a/asset/sub-usercheck.png b/asset/sub-usercheck.png new file mode 100644 index 00000000..679c020a Binary files /dev/null and b/asset/sub-usercheck.png differ diff --git a/asset/ushop_A2628-128_21_A.jpg b/asset/ushop_A2628-128_21_A.jpg new file mode 100644 index 00000000..92b4f6cd Binary files /dev/null and b/asset/ushop_A2628-128_21_A.jpg differ diff --git "a/asset/\353\213\244\354\232\264\353\241\234\353\223\234 (1).png" "b/asset/\353\213\244\354\232\264\353\241\234\353\223\234 (1).png" new file mode 100644 index 00000000..98a2dd90 Binary files /dev/null and "b/asset/\353\213\244\354\232\264\353\241\234\353\223\234 (1).png" differ diff --git "a/asset/\353\213\244\354\232\264\353\241\234\353\223\234.png" "b/asset/\353\213\244\354\232\264\353\241\234\353\223\234.png" new file mode 100644 index 00000000..e8a4dc91 Binary files /dev/null and "b/asset/\353\213\244\354\232\264\353\241\234\353\223\234.png" differ diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..fb194b85 --- /dev/null +++ b/css/common.css @@ -0,0 +1,232 @@ +@font-face { + font-family: 'Pretendard-Regular'; + src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff'); + font-weight: 400; + font-style: normal; +} + +a, +abbr, +acronym, +address, +applet, +article, +aside, +audio, +b, +big, +blockquote, +body, +canvas, +caption, +center, +cite, +code, +dd, +del, +details, +dfn, +div, +dl, +dt, +em, +embed, +fieldset, +figcaption, +figure, +footer, +form, +h1, +h2, +h3, +h4, +h5, +h6, +header, +hgroup, +html, +i, +iframe, +img, +ins, +kbd, +label, +legend, +li, +main, +mark, +menu, +nav, +object, +ol, +output, +p, +pre, +q, +ruby, +s, +samp, +section, +small, +span, +strike, +strong, +sub, +summary, +sup, +table, +tbody, +td, +tfoot, +th, +thead, +time, +tr, +tt, +u, +ul, +var, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section { + display: block; +} +[hidden] { + display: none; +} +body { + line-height: 1.5; + font-family: 'Pretendard-Regular'; +} +menu, +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:after, +blockquote:before, +q:after, +q:before { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + background-color: transparent; +} + +*, +:after, +:before { + box-sizing: border-box; +} + +a, +a:focus, +a:hover { + text-decoration: none; + color: inherit; + vertical-align: middle; +} + +button:not(:disabled) { + cursor: pointer; +} + +img { + display: block; +} + +.inner { + width: 1440px; + margin: auto; + position: relative; +} + +#wrap { + min-width: 1440px; +} + +.white { + color: #fff !important; +} + +.section-title { + text-align: center; + margin-bottom: 56px; +} +.section-title h1 { + line-height: 60px; + font-size: 36px; + font-weight: 700; + line-height: 56px; +} + +.btn { + color: #fff; + background-color: #e6007e; + display: inline-flex; + justify-content: center; + align-items: center; + border: none; + font-weight: 100; + cursor: pointer; + height: 40px; + font-size: 16px; + border-radius: 20px; + white-space: nowrap; + padding: 0 30px; +} + +.btn:hover { + color: #fff; + background-color: #730024; +} + +a.link { + margin-top: 40px; + display: flex; + justify-content: center; + font-size: 20px; + font-weight: 700; + align-items: center; +} + +.link::after { + content: ''; + width: 10px; + height: 10px; + display: inline-flex; + margin-left: 4px; + border: 2px solid #000; + border-left: transparent; + border-top: transparent; + transform: rotate(-45deg); + position: relative; + top: -3px; +} diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 00000000..c5649f3b --- /dev/null +++ b/css/footer.css @@ -0,0 +1,266 @@ +footer { + background-color: #2d2926; +} +.footer-area { + display: flex; + padding-top: 75px; + height: 360px; + justify-content: space-between; +} +.footer-left { + width: 100%; + max-width: 1080px; +} + +.footer-menu { + display: flex; + font-size: 14px; + margin-bottom: 26px; + overflow: hidden; +} + +.footer-menu li { + color: #eee; + position: relative; + margin-left: 33px; +} +.footer-menu li:first-child { + margin-left: 0; +} + +.footer-menu li::after { + content: ''; + position: absolute; + top: 6px; + left: -17px; + width: 1px; + height: 14px; + background-color: #666; +} + +.footer-address { + color: #a7a7a7; + font-size: 12px; + letter-spacing: -0.04em; + white-space: nowrap; + line-height: 24px; +} + +.footer-address .link-btn { + margin-left: 10px; + font-size: 12px; + color: #a7a7a7; + vertical-align: baseline; +} + +.footer-address .link-btn::after { + content: ''; + display: inline-block; + margin-left: 4px; + border: 2px solid #a7a7a7; + border-left: transparent; + border-top: transparent; + width: 6px; + height: 6px; + transform: rotate(-45deg); + position: relative; + top: -2px; +} + +.footer-info { + display: flex; + color: #a7a7a7; + font-size: 12px; + overflow: hidden; +} + +.footer-info li { + margin-right: 14px; + position: relative; +} + +.footer-info li::after { + content: ''; + position: absolute; + width: 1px; + height: 10px; + background-color: #666; + top: 4px; + left: -7px; +} + +.footer-copyright { + margin-bottom: 30px; + color: #aaa; + font-size: 12px; + letter-spacing: -0.04em; + white-space: nowrap; + line-height: 24px; +} + +.footer-symbol ul { + position: relative; + left: 5px; + top: 3px; + display: flex; +} + +.footer-symbol ul li { + color: #aaa; + font-size: 12px; +} + +.footer-symbol ul li ~ li { + margin-left: 20px; +} + +.footer-symbol ul li a { + height: 40px; + display: flex; + align-items: center; +} + +.footer-symbol ul li a img { + margin-right: 8px; + width: auto; + height: 100%; +} + +.footer-right { + max-width: 280px; +} + +.footer-right .btn-group { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; +} +.footer-right .btn-group a { + display: inline-flex; + justify-content: center; + align-items: center; + min-width: 80px; + height: 32px; + font-size: 14px; + border-radius: 16px; + padding: 0 24px; + white-space: nowrap; + border: 1px solid #bbb; + color: #fff; +} + +.site { + display: inline-flex; + width: 273px; + position: relative; +} + +.site button { + flex: 1 1 auto; + text-align: left; + padding: 25px 30px 8px 0; + color: #fff; + border-radius: 0; + border: none; + border-bottom: 1px solid #bbb; + font-size: 16px; + cursor: pointer; + white-space: nowrap; +} + +.site button::after { + position: absolute; + top: 31px; + right: 1px; + content: ''; + display: inline-block; + border: 1px solid #fff; + border-top: none; + border-left: none; + width: 8px; + height: 8px; + transform: rotate(45deg); +} + +.site .dropdown-menu { + display: none; + position: absolute; + width: 100%; + top: auto; + bottom: 100%; + z-index: 99; + min-width: 10rem; + padding: 0.5rem 0; + font-size: 1rem; + color: #212529; + text-align: left; + list-style: none; + background-color: #fff; + background-clip: padding-box; + border: 1px solid rgba(0, 0, 0, 0.15); + border-radius: 0.25rem; +} + +.site .dropdown-menu.show { + display: block; +} + +.site .dropdown-menu .dropdown-item { + display: block; + width: 100%; + padding: 0.25rem 1.5rem; + clear: both; + font-weight: 400; + color: #212529; + text-align: inherit; + white-space: nowrap; + background-color: transparent; + border: 0; +} + +.site .dropdown-menu .dropdown-item:hover { + color: #16181b; + text-decoration: none; + background-color: #e9ecef; +} + +.footer-sns { + margin-top: 26px; +} + +.footer-sns ul { + display: flex; + justify-content: space-between; +} + +.footer-sns ul li a { + overflow: hidden; + display: block; + width: 32px; + height: 32px; + font-size: 0; +} + +.footer-sns .facebook { + background-image: url(/asset/footer-sns-facebook.svg); +} +.footer-sns .youtube { + background-image: url(/asset/footer-sns-youtube.svg); +} +.footer-sns .twitter { + background-image: url(/asset/footer-sns-twitter.svg); +} +.footer-sns .lgblog { + background-image: url(/asset/footer-sns-lgblog.svg); +} +.footer-sns .insta { + background-image: url(/asset/footer-sns-insta.svg); +} +.footer-sns .kakaostory { + background-image: url(/asset/footer-sns-kakaostory.svg); +} +.footer-sns .naverblog { + background-image: url(/asset/footer-sns-naverblog.svg); +} + +/*# sourceMappingURL=footer.css.map */ diff --git a/css/header.css b/css/header.css new file mode 100644 index 00000000..6ed4db5b --- /dev/null +++ b/css/header.css @@ -0,0 +1,294 @@ +/* BANNER */ +.header-banner { + width: 100%; + top: 0; + background-color: rgb(17, 67, 59); +} + +.header-bn-content { + position: relative; + min-height: 56px; +} +.header-bn-content a { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, 0); +} + +.check-bn-today { + position: absolute; + top: 50%; + right: 0; + transform: translate(0, -50%); +} +.c-chkbox { + padding-left: 30px; + cursor: pointer; + user-select: none; +} +.c-chkbox input[type='checkbox'] { + display: none; +} + +.c-chkbox .icon { + position: absolute; + top: 2px; + left: 0; + width: 22px; + height: 22px; + overflow: hidden; + background: url('../asset/sprites-common.svg') no-repeat -300px -170px; + width: 22px; + height: 22px; + top: 50%; + transform: translate(-50%, -50%); +} +.c-chkbox .txt { + color: #fff; + vertical-align: baseline; + cursor: pointer; +} + +.check-bn-close { + position: absolute; + top: 50%; + right: 0; + transform: translate(40px, -50%); + width: 25px; + height: 25px; + background-color: transparent; + visibility: hidden; +} + +.check-bn-close::before, +.check-bn-close::after { + content: ''; + position: absolute; + display: block; + width: 25px; + height: 2px; + box-sizing: border-box; + background-color: #fff; + z-index: 99; + visibility: visible; + cursor: pointer; +} + +.check-bn-close::before { + transform: rotate(45deg); +} + +.check-bn-close::after { + transform: rotate(-45deg); +} + +/* HEADER-TOP */ +.header { + position: sticky; + top: 0; + left: 0; + z-index: 99; + width: 100%; + background: #000; +} +.header-top { + height: 57px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header-logo { + background: url('../asset/sprites-common.svg') no-repeat -1px -61px; + width: 81px; + height: 22px; + display: inline-block; +} +.header-until-menu { + display: flex; + background-color: #333; + width: 220px; + height: 32px; + padding: 2px; + border-radius: 16px; + font-size: 12px; + line-height: 23px; +} + +.header-until-menu li { + flex: 1; + padding: 2px; + text-align: center; + border: 3px solid #333; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); + border-radius: 16px; + line-height: 1.5; +} +.header-until-menu li.actived { + background: #fff; +} +.header-until-menu li.actived a { + color: #000; +} +.header-until-menu li a { + color: #fff; + font-weight: 700; +} + +/* HEADER-NAVI */ +.header__container { + position: relative; +} + +.header__container > .header__inner { + position: static; +} + +.header__nav { + height: 57px; + display: flex; + align-content: center; +} + +.main-menu { + display: flex; +} + +.main-menu-item + li { + padding-left: 48px; +} +.main-menu-item .main-menu-tit { + color: #fff; + font-weight: 400; + font-weight: 400; + display: block; + height: 56px; + line-height: 56px; + white-space: nowrap; +} + +.main-menu-item .main-menu-tit span { + display: flex; + align-items: center; + position: relative; +} +.main-menu-item .main-menu-tit .tooltip { + position: absolute; + top: -27px; + left: 50%; + transform: translate(-50%); +} +.main-menu-item .main-menu-tit .new { + margin-top: -19px; +} + +.main-menu-item .main-menu__sub { + width: 100%; + position: absolute; + top: 57px; + left: 0; + display: none; + border-top: 1px solid #ddd; + background: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.main-menu-item:hover .main-menu__sub { + display: block; +} + +.main-menu__sub-list { + display: flex; + margin: auto; + padding: 20px 0; + border-bottom: #ddd; + background: #fff; +} + +.main-menu__sub-list li { + width: 180px; + padding-right: 10px; + line-height: 28px; + font-size: 14px; +} +.main-menu__sub-list li:before { + padding-right: 0; +} + +.main-menu__sub-title:first-child { + width: 180px; +} + +.main-menu__sub-title { + padding: 3px 0 8px 0; + color: #000; + width: 100%; +} + +.main-menu__sub-title a { + color: #000; + font-weight: 800; + height: 28px; + font-size: 1.05rem; +} + +.main-menu__sub-title a:hover { + border-bottom: 1px solid #000; +} + +.main-menu__sub-list li ul { + min-height: 224px; +} + +.main-menu__sub-list li ul li a { + color: #666; +} + +.main-menu__sub-list li ul li a:hover { + text-decoration: underline; +} + +.main-menu__sub-list ul li::before { + content: '-'; + display: inline-block; + margin-right: 2px; + font-size: 14px; + color: #666; +} +.sub__shortcut { + display: flex; + width: 1440px; + margin: auto; + padding: 16px 0; + border-top: 1px solid #ddd; +} + +.sub__shortcut li { + display: flex; + align-items: center; + width: 180px; + padding-right: 10px; + cursor: pointer; +} + +.sub__shortcut li .thumb { + display: inline-block; + margin-right: 8px; +} + +.sub__shortcut li .thumb img { + width: 100%; +} + +/* HEADER-SUB */ +.header .sub-menu { + position: relative; + display: flex; + margin-left: auto; + align-content: center; +} + +.header .sub-menu li { + padding: 7px; +} diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..99f2b4a6 --- /dev/null +++ b/css/main.css @@ -0,0 +1,714 @@ +/* chatbot */ +.chatbot { + right: 0; + bottom: 150px; + position: fixed; + left: 50%; + transform: translateX(765px); + z-index: 99; + display: flex; + flex-direction: column-reverse; +} +.chatbot__toggle { + width: 62px; + height: 62px; + background: url('../asset/quick-menu-octopus2.png') no-repeat; + background-size: 100%; + border-radius: 50px; + cursor: pointer; +} +.chatbot__submenu { + display: none; +} + +.chatbot__submenu.show { + display: block; +} + +.chatbot__toggle.show { + background: url('../asset/quick-menu-plus-wh.svg') #e6007e 17px 17px no-repeat; + transform: rotate(45deg); +} + +.quick-chatbot, +.center-chatbot { + display: block; + position: relative; + width: 62px; +} +.quick-chatbot .txt, +.center-chatbot .txt { + display: block; + position: absolute; + top: 0; + right: 0; + width: 200px; + height: 62px; + padding: 18px 60px 10px 24px; + color: #000; + font-size: 18px; + border-radius: 50px; + background-color: #f5f5f5; + transition: all 0.5s; + white-space: nowrap; +} +.quick-chatbot > .chatbot__toggle, +.center-chatbot > .chatbot__toggle { + display: flex; + align-items: center; + justify-content: center; + position: relative; + padding: 10px; + background: #fff; + box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15); + margin: 0 auto 10px; + cursor: pointer; +} + +/* visual */ + +.visual { + position: relative; + background: #000; +} + +.visual-stage { + overflow: hidden; + position: relative; + margin-top: -112px; + background: #000; +} + +.visual-area { + height: 880px; +} + +.visual-bg-area { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%); +} + +.visual-content { + overflow: hidden; + position: absolute; + top: 50%; + left: 0; + transform: translate(0, -50%); + z-index: 1; +} + +.visual-content .tit { + display: flex; + align-items: flex-start; + flex-direction: column; + margin-bottom: 20px; + font-size: 40px; + font-weight: 700; +} +.visual-content .desc { + margin-bottom: 48px; + font-size: 20px; + font-weight: 400; +} + +.visual-content .btn-group { + justify-content: flex-start; +} + +.btn-group a { + min-width: 140px; + margin-left: 12px; + padding: 0 30px; +} + +.btn-group .btn { + min-width: 140px; + height: 40px; + font-size: 16px; + border-radius: 20px; + padding: 0 40px; + white-space: nowrap; +} + +.visual-container { + width: 100%; + height: 880px; +} +.visual-bg-area img { + position: relative; + display: block; + margin: 0 auto; +} + +.visual-container .swiper-button-prev { + width: 30px; + height: 50px; + left: calc(50% - 805px); + transform: translateY(-300%); +} + +.visual-container .swiper-button-prev:after { + content: ''; + display: block; + width: 100%; + height: 100%; + background: url('../asset/sprites-common.svg') -600px -450px no-repeat; +} + +.visual-container .swiper-button-next { + width: 30px; + height: 50px; + right: calc(50% - 805px); + transform: translateY(-300%); +} + +.visual-container .swiper-button-next::after { + content: ''; + display: block; + width: 100%; + height: 100%; + background: url('../asset/sprites-common.svg') -600px -450px no-repeat; + transform: rotate(180deg); +} + +.visual-area-control { + display: flex; + position: absolute; + bottom: 100px; + left: calc(50% - 655px); + z-index: 2; + transform: translateX(-50%); +} + +.visual-control__play { + display: block; + margin-right: 10px; + width: 50px; + height: 36px; + background: url('../asset/pause.png') no-repeat 0 0; + background-size: 36px; + outline: none; + border: none; +} + +.visual-control__play.is-pause { + background: url('../asset/play.png') no-repeat 0 0; + background-size: 36px; + outline: none; + border: none; +} + +.visual-area-control .swiper-pagination { + position: static; + display: inline-flex; + vertical-align: middle; + align-items: center; +} + +.swiper-container .swiper-pagination-bullet { + vertical-align: bottom; + opacity: 0.4; + overflow: hidden; + width: 12px; + height: 12px; + font-size: 1px; + line-height: 1; + color: transparent; + white-space: nowrap; + border-radius: 50%; + background-color: #fff; + display: inline-block; + cursor: pointer; + vertical-align: top; + margin: 0 6px; +} + +.swiper-container .visual-area-control .swiper-pagination-bullet.swiper-pagination-bullet-active { + opacity: 1; + width: 36px; + border-radius: 6px; + background-color: #fff; +} + +.swiper-pagination-bullet { + border: 0; +} +.visual .swiper-container { + padding: 0; + width: 100%; + height: 880px; +} + +.swiper-slide { + overflow: hidden; +} + +.visual-content .tit > p { + font-size: 20px; + color: #e6007e; +} + +.arrow-down { + position: absolute; + left: 50%; + width: 24px; + bottom: 50px; + text-align: center; + transform: translate(-50%); + z-index: 10; +} + +/* EVENT */ +.event { + padding: 40px 0 120px; + background-color: #000; +} +.item-container { + display: flex; + justify-content: space-between; +} + +.item-container .item-box { + width: 345px; + height: 564px; + position: relative; + border-radius: 14px; + transition: all 0.5s ease-in-out; + margin-bottom: 20px; + padding: 32px 36px; +} + +.item-container .item-box a h3 { + margin-bottom: 8px; + font-size: 24px; + line-height: 36px; + font-weight: 700; + letter-spacing: -0.8px; + color: #333; +} + +.item-container .item-box a .desc { + font-size: 18px; + color: #333; +} + +.item-container .item-box { + background-size: cover; + background-position: center; +} + +.item-container .item-box:first-child { + background-image: url('../asset/20230720-025128-230-c2sLz2P5.jpg'); +} + +.item-container .item-box:nth-child(2) { + background-image: url('../asset/20230717-010142-134-3vpueBDv.jpg'); +} + +.item-container .item-box:nth-child(3) { + background-image: url('../asset/20230711-035937-777-j0u8IyaO.jpg'); +} + +.item-container .item-box:nth-child(4) { + background-image: url('../asset/20230628-043246-125-KnHNERTf.jpg'); +} + +.item-box.fade-in { + opacity: 0; + transform: translateY(50px); +} + +/* PAYMENT */ +.payment { + margin-top: 120px; +} + +.payment-title { + margin-bottom: 56px; + transform: translate3d(0, 20%, 0); + transition: 1s ease-in-out; + text-align: center; +} + +.payment-container { + display: flex; +} + +.payment-container .item-box { + position: relative; + width: 272px; + height: 600px; + border-radius: 14px; + margin-right: 20px; +} + +.payment-container .item-box:last-child { + margin-right: 0; +} + +.payment-container .is-scale { + width: 564px; +} + +.payment-container > .item-box .item-el { + overflow: hidden; + border-radius: 14px; +} + +.item-txt { + padding: 24px 32px; + position: absolute; + bottom: 0; + width: 100%; +} + +.item-txt .title { + font-weight: 900; + margin-bottom: 12px; + font-size: 30px; + color: #fff; + letter-spacing: -2px; +} + +.item-txt .desc { + margin-top: 4px; + font-size: 20px; + color: #fff; + letter-spacing: -1.3px; + line-height: 1.5; +} + +.item-btn-area { + display: block; + position: absolute; + width: 140px; + height: 40px; + right: 40px; + bottom: 42px; +} + +.item-btn-area > .btn { + padding: 0 40px; +} + +.payment-container .item-box.fade-in { + transition: opacity 0.3s ease-in-out, transform 1s ease-in-out; +} + +/* promotion */ + +.promotion { + position: relative; + height: 750px; + margin-top: 180px; + overflow: hidden; +} +.pr-area { + position: relative; + height: 100%; + display: flex; + justify-content: center; + flex-wrap: nowrap; + flex-direction: column; + align-items: center; +} + +.promotion .section-title { + padding-top: 80px; +} + +.promotion .more { + margin-top: 16px; + display: inline-flex; + align-items: center; + font-weight: 400; +} + +.promotion .more::after { + content: ''; + width: 8px; + height: 8px; + display: inline-flex; + margin-left: 4px; + border: 2px solid #fff; + border-left: transparent; + border-top: transparent; + transform: rotate(-45deg); + position: relative; + top: -1px; +} + +.promotion-img { + flex-shrink: 0; +} + +.promotion-bg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: -2; +} + +/* CONTENT */ +.content { + margin-top: 120px; +} +.content-container { + display: flex; + justify-content: space-between; +} + +.content-container .content-item { + position: relative; + overflow: hidden; + border-radius: 14px; +} + +.content-txt { + display: block; + position: absolute; + top: 0; + left: 0; + padding: 24px 32px; +} +.content-txt .content-tit { + margin-bottom: 8px; + font-size: 24px; + font-weight: 700; +} +.content-txt .content-desc { + font-size: 18px; + color: #333; + font-weight: 100; +} + +/* DEVICE */ +.device { + margin-top: 180px; +} +.device-navi { + display: flex; + margin-bottom: 60px; + justify-content: center; + text-align: center; +} + +.navi-item { + width: 230px; + font-size: 30px; + font-weight: 700; + color: #838383; +} + +.navi-item.active { + color: #000; +} + +.navi-item:first-child::after, +.navi-item:last-child::before { + content: ''; + display: inline-flex; + background: url('../asset/sprites-common.svg') no-repeat -699px -400px; + width: 15px; + height: 26px; +} + +.navi-item:first-child::after { + margin-left: 100px; +} + +.navi-item:last-child::before { + transform: rotate(180deg); + margin-right: 100px; +} + +.device-contents { + display: flex; +} + +.device-container-single { + margin-right: 18px; +} + +.device-container-single .device-warpper { + position: relative; + border: 1px solid #e1e1e1; + border-radius: 14px; + background: #fff; + width: 700px; + height: 700px; + padding: 23px 32px; +} + +.device-container-single .name { + font-size: 20px; + font-weight: 400; + margin-bottom: 4px; +} + +.device-container-single .price { + font-size: 30px; + font-weight: 700; +} + +.device-container-single .device-img { + margin: auto; + margin-top: 57px; + width: 500px; + height: 500px; + cursor: pointer; +} + +.device-container-multi { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + align-content: space-between; +} + +.device-container-multi .device-item { + position: relative; + width: 342px; + height: 342px; + background: #fff; +} + +.device-container-multi .device-item:nth-child(odd) { + margin-right: 18px; +} + +.device-container-multi .device-item:nth-child(-n + 4) { + margin-bottom: 18px; +} + +.device-container-multi .device-warpper { + border: 1px solid #e1e1e1; + border-radius: 14px; + height: 100%; + padding: 24px 32px; + cursor: pointer; +} + +.device-container-multi .name { + margin-bottom: 4px; + color: #000; + font-size: 20px; + font-weight: 400; +} + +.device-container-multi .price { + color: #000; + font-weight: 700; + font-size: 24px; +} + +.device-container-multi .device-img { + margin: auto; + margin-top: 38px; + width: 172px; + height: 175px; +} + +.device-container-multi .device-img img { + width: 100%; + height: 100%; +} + +.support { + margin-top: 120px; + padding: 80px 0 110px; + background: #f8f8f8; +} + +.support-wrap { + display: flex; + justify-content: space-between; + margin: auto; +} + +.support-item { + position: relative; + display: flex; + flex: 1; + align-items: center; + min-height: 140px; +} + +.support-item:first-child::before { + content: none; +} + +.support-item::before { + content: ''; + width: 1px; + height: 100px; + margin-right: 35px; + background: #ddd; +} + +.support-item span { + width: 180px; + height: 140px; + margin-right: 16px; +} + +.support-item .support-tit { + margin-bottom: 8px; +} + +.support-item .support-tit .link { + margin: 0; + font-size: 24px; + font-weight: 700; + justify-content: flex-start; +} + +.support-item .support-tit .link::after { + margin-left: 8px; +} + +.support-item .desc { + color: #333; + font-size: 18px; +} + +/*BACK TO POSITION*/ +.back-to-position { + opacity: 0; + transition: 1s; +} +.back-to-position.to-up { + transform: translateY(50px); +} + +.back-to-position.to-down { + transform: translateY(100px); +} + +.back-to-position.to-right { + transform: translateX(-100px); +} + +.show .back-to-position { + opacity: 1; + transform: translateX(0); +} +.show .back-to-position.delay-0 { + transition-delay: 0s; + animation-duration: 0.7s; +} +.show .back-to-position.delay-1 { + transition-delay: 0.3s; + animation-duration: 0.7s; +} +.show .back-to-position.delay-2 { + transition-delay: 0.6s; + animation-duration: 0.7s; +} +.show .back-to-position.delay-3 { + transition-delay: 0.9s; + animation-duration: 0.7s; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..e41f6d81 --- /dev/null +++ b/index.html @@ -0,0 +1,1010 @@ + + + + + + 공식 온라인 스토어 | LG U+ + + + + + + + + +
+
+
+
+ + New galaxy 사전알람 혜택 카카오페이 이모티콘 이미지 + +
+
+ + +
+
+ +
+
+
+
+
+
+ + +
+
+
+
+ +
+
+
+
+ + +
+
+
+
+
빠른가입 챗봇
+
+ +
+
+
+
고객센터 챗봇
+
+ +
+
+
+
+ + +
+
+
+
+
+
+
+
New Galaxy 사전알람
+
+ 카카오페이 1,000P, 샤넬 백 등 선착순 100% 당첨!
New Galaxy 2만원 즉시 할인 쿠폰까지! +
+
+ 사전알람 신청하기 +
+
+
+
+ +
+
+
+
+
+
+
+
다이렉트 알뜰 유심
+
+ 5G무제한 매월 14,000원 할인
매월 네이버페이 까지. +
+
+ 자세히 보기 +
+
+
+
+ +
+
+
+
+
+
+
+
+

인터넷/IPTV

+ 가구 유형별 맞춤형 추천 상품 +
+
+ 가구 유형 및 라이프스타일에 맞추어
적합한 서비스를 추천해드립니다. +
+
+ 자세히 보기 +
+
+
+
+ +
+
+
+
+
+
+
+ +
+ + + +
+
+
+
+ 아래쪽 화살표 이미지 +
+
+ + +
+
+
+
+

유플러스 이벤트를 만나보세요

+
+
+
+ +

새로운 Galaxy, 명품 이벤트

+
출시 전 미리 받고, 샤넬백도!
+ +
+
+ +

유독 - 7월 할인 혜택

+
1주년 기념 OTT 무료
+ +
+
+ +

누구나 다 드려요!

+
취향 선택하면
총 500명께 선물 드려요
+ +
+
+ +

인터넷+IPTV 신규가입 혜택

+
최대 238만원 혜택,
닷컴 단독 추가 요금할인!
+ +
+
+
+
+
+ + +
+
+
+

함께하면 더 특별한
5G 요금제와 혜택을 누리세요

+
+
+
+
+
+ + 유쓰 5G 청년다이렉트 넘치는 5G 데이터 증정 사은품과 혜택까지! + +
+
유쓰 5G 청년다이렉트
+
넘치는 5G 데이터 증정
사은품과 혜택까지!
+
+ 자세히 보기 +
+
+
+
+ +
+
+ + 주토피아 포스터 + +
+
티빙 팩
+
티빙 팩과 재미를
플레이하세요
+
+
+
+ +
+
+ + 주토피아 포스터 + +
+
디즈니+ 팩
+
시대를 초월하는 명작을
먼저 만나보세요
+
+
+
+ +
+
+ + 넷플릭스 컨텐츠: 사냥개들 + +
+
+
넷플릭스 팩
+
전 세계 다양한 콘텐츠를
여러 언어로 즐기세요
+
+
+
+
+
+
+
+
+ + +
+
+
+

+ 내 마음대로 고르고
+ 할인까지 받는 구독 생활 +

+ 더 알아보기 +
+
+ 유독 앱 메인화면, 디즈니,TIVING,윌라,요기요,유투브 프리미엄 구독상품 등 +
+
+
+ 유독 배경화면 이미지 +
+
+ + +
+
+

단조로운 일상을 다채롭게,
유플러스만의 다양한 콘텐츠 집합소

+
+
+
+
+
+
찐리뷰로 보는 폰 쇼핑 꿀팁
+
유플닷컴에서 폰 사면
뭐가 좋게요?
+
+ +
+
+
+
이번 주말도 유익하닷
+
U+ 혜택 가득한
잠실 나들이 코스는?
+
+ +
+
+
+
U일무이 욕망 테스트
+
MBTI 뺨치는 심리 테스트 등장!
+
+ +
+
+ 유플일상 바로가기 +
+
+ + +
+
+

가장 많은 혜택을 받는
기기를 추천해 드려요

+
+
+
삼성
+
추천
+
Apple
+
+
+
+
+
+
+
+
갤럭시 A24
+
월 40,500원
+
+
+ 갤럭시 A24 +
+
+
+
+
+
+
+
+
Galaxy Buddy 2
+
월 55,000원
+
+
+ Galaxy Buddy 2 +
+
+
+
+
+
+
iPhone14 Pro_128
+
월 130,270원
+
+
+ iPhone14 Pro_128 +
+
+
+
+
+
+
갤럭시 S23 256GB
+
월 110,680원
+
+
+ 갤럭시 S23 256GB +
+
+
+
+
+
+
iPhone14 Pro Max_256
+
월 145,850원
+
+
+ iPhone14 Pro_128 +
+
+
+
+
+
+ 5G 휴대폰 전체보기 +
+ +
+
+

도움이 필요하신가요?

+
+
+
+
+ +
+
+ 1:1 문의하기 +
+
고객님의 문의사항을
신속히 답변해 드립니다.
+
+
+
+ +
+
+ 자주하는 질문 +
+
궁금한 질문을
바로 해결하세요.
+
+
+
+ +
+
+ 스스로 해결가이드 +
+
일상에 도움이 되는
유용한 사용 TIP을 소개합니다.
+
+
+
+
+
+ + + + + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..709edb04 --- /dev/null +++ b/js/main.js @@ -0,0 +1,141 @@ +/** + * 슬라이드 요소 관리 + */ +const SECONDS_TO_MS = 1000 +const swiper = new Swiper('.visual .swiper-container', { + autoplay: { + delay: 5 * SECONDS_TO_MS, + }, + loop: true, + slidesPerView: 1, + spaceBetween: 0, + allowSlideNext: true, + pagination: { + // 페이지 번호 사용 여부 + el: '.visual .swiper-pagination', + clickable: true, + }, + navigation: { + prevEl: '.visual .swiper-button-prev', + nextEl: '.visual .swiper-button-next', + }, +}) + +const setSwiperStart = (swiper) => { + const tab = document.querySelector('.visual-control__play') + let isPause = false + + tab.addEventListener('click', function () { + if (isPause) { + tab.classList.add('is-pause') + swiper.autoplay.stop() // 일시 정지 + } else { + tab.classList.remove('is-pause') + swiper.autoplay.start() // 자동 재생 시작 + } + isPause = !isPause + }) +} +setSwiperStart(swiper) + +/** + * 챗봇 토글 + */ +const chatbotEl = document.querySelector('.chatbot__toggle') +const subMenu = document.querySelector('.chatbot__submenu') +chatbotEl.addEventListener('click', () => { + subMenu.classList.toggle('show') + chatbotEl.classList.toggle('show') +}) + +/** + * 드롭다운 메뉴 + */ +const dropBtnEl = document.getElementById('dropdown') +const dropMenuEl = document.querySelector('.dropdown-menu') +dropBtnEl.addEventListener('click', () => { + dropMenuEl.classList.toggle('show') +}) + +/** + * Scroll Magic + */ +const spyEls = document.querySelectorAll('section.scroll-spy') +spyEls.forEach(function (spyEl) { + new ScrollMagic.Scene({ + triggerElement: spyEl, + triggerHook: 0.8, + }) + .setClassToggle(spyEl, 'show') + .addTo(new ScrollMagic.Controller()) +}) + +/** + * 순서대로 나타나는 기능 + */ +function floatUpAnimation(selector) { + const elements = document.querySelectorAll(selector) + + gsap.set(elements, { opacity: 0, y: 100 }) + + elements.forEach(function (element, index) { + gsap.to(element, { + duration: 1, + delay: index * 0.3, + opacity: 1, + y: 0, + ease: 'power3.out', + }) + }) +} + +floatUpAnimation('.event .fade-in') + +/** + * 오늘 하루 그만보기 + */ +/** + * 오늘 하루 그만보기 + */ +function closeBn() { + const bnEl = document.querySelector('.header-banner') + const clsBtn = document.getElementById('closeBtn') + const onTodayCls = document.getElementById('text-chkbox') + + if (!bnEl || !clsBtn || !onTodayCls) { + return // 요소가 존재하지 않으면 함수 종료 + } + + const cookieName = 'bannerClosedForToday' + + // 쿠키 생성 및 유효기간 지정 + function handleBannerClose() { + bnEl.remove() + const expirationDays = 1 // 쿠키 유효 기간을 하루로 설정 + const expires = new Date() + expires.setDate(expires.getDate() + expirationDays) + document.cookie = `${cookieName}=true; expires=${expires.toUTCString()}; path=/` + } + + clsBtn.addEventListener('click', handleBannerClose) + + onTodayCls.addEventListener('click', handleBannerClose) + + // 쿠키 불러오기 + function getCookie(name) { + const cookies = document.cookie.split('; ') + for (const cookie of cookies) { + const [cookieName, cookieValue] = cookie.split('=') + if (cookieName === name) { + return cookieValue + } + } + return null + } + + if (getCookie(cookieName) === 'true') { + bnEl.remove() + } +} + +closeBn()