diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..de4ae6a4 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..aef84430 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/CSS/main.css b/CSS/main.css new file mode 100644 index 00000000..055f065c --- /dev/null +++ b/CSS/main.css @@ -0,0 +1,858 @@ +/* COMMON */ +body { + color: #333; + font-family: 'Gothic A1', sans-serif; + font-size: 16px; + font-weight: 300; + letter-spacing: -0.5px; /* 자간 */ + line-height: 1.4; /* 행간 */ + width: 100%; +} +img { + display: block; +} +a { + text-decoration: none; +} +.back-to-position { + opacity: 0; + transition: 1s; +} +.back-to-position.to-up { + transform: translateY(150px); +} +.show .back-to-position { + opacity: 1; + transform: translateY(0); +} +.show .back-to-position.delay-0 { + transition-delay: 0s; +} +.show .back-to-position.delay-1 { + transition-delay: .5s; +} +.show .back-to-position.delay-2 { + transition-delay: 1s; +} +.show .back-to-position.delay-3 { + transition-delay: 1.5s; +} +.show .back-to-position.delay-4 { + transition-delay: 2s; +} +.show .back-to-position.delay-5 { + transition-delay: 2.5s; +} +.show .back-to-position.delay-6 { + transition-delay: 3s; +} +.fade-in-1 { + opacity: 0.5; +} + + +/* HEADER */ +header { + position: fixed; + top: 0; + width: 100%; + background-color: #fff; + z-index: 9; +} +header.border-bottom { + border-bottom: 1px solid #001b371a; +} +header .inner { + width: 90%; + height: 60px; + margin: 0 auto; + position: relative; +} +header .logo { + height: 60px; + position: absolute; + top: 0; + bottom: 0; + margin: auto; +} +header .logo img { + height: 100%; + position: absolute; + top: 0px; + margin: 0 auto; +} +header .main-menu { + display: flex; +} +header .main-menu ul.menu { + position: absolute; + top: 10px; + right: 0; + display: flex; +} +header .main-menu ul.menu li { + display: relative; +} +header .main-menu ul.menu li::before { + content: ""; + width: 1.2px; + height: 14px; + background-color: #bdbebf; + position: absolute; + top: 0; + bottom: 0; + margin: auto; +} +header .main-menu ul.menu li:not(.lastmenu):before { + display: none; +} +header .main-menu ul.menu li.language { + margin-left: 40px; +} +header .main-menu ul.menu li a { + font-size: 15px; + padding: 10px 16px; + margin: 0 5px; + display: block; + color: #4E5967; +} +header .main-menu ul.menu li a:hover { + width: auto; + height: 20px; + border-radius: 5px; + background-color: #f2f4f6; +} + + +/* SECTION 1 메인 */ +.application { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.application .inner { + width: 100%; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +.application .new-main { + display: flex; + justify-content: center; + align-items: center; + position: relative; + object-fit: cover; + width: auto; + height: 100vh; +} +.application .new-main img { + object-fit: cover; + width: 100%; + height: 100%; + position: relative; +} +.application .new-main .gradient { + position: absolute; + top: 0; + width: 100%; + height: 500px; + background: linear-gradient(180deg, white 0%, white 59px, rgba(255, 255, 255, 0) 100%); +} +.application .text { + position: absolute; + top: 170px; +} +.application .text h2 { + font-size: 65px; + font-weight: 600; + text-align: center; + color: #000; +} +.application .app-store { + display: flex; + justify-content: center; + position: absolute; + top: 410px; +} +.application .app-store .apple, +.application .app-store .android { + display: flex; + justify-content: center; + align-items: center; + width: auto; + height: 40px; + padding: 3px 25px; + border: 1px solid #000c1e; + border-radius: 8px; + background-color: #000c1e; + opacity: .8; + cursor: pointer; + transition: .3s; +} +.application .app-store .apple:hover, +.application .app-store .android:hover { + background-color: #4e5968; + border: 1px solid #4e5968; +} +.application .app-store .apple img, +.application .app-store .android img { + display: flex; + justify-content: center; + align-items: center; + width: 24px; + height: 24px; + padding: 0 5px 5px 0; +} +.application .app-store .apple span, +.application .app-store .android span { + color: #fff; + font-size: 18px; + font-weight: 400; +} +.application .app-store .android { + margin-left: 5px; +} +.application .more { + display: inline; + text-align: center; + position: fixed; + bottom: 20px; +} +.application .more .material-symbols-outlined { + font-size: 70px; + color: #bdbebf; +} +.application .material-symbols-outlined { + position: absolute; + bottom: 60px; + transform: rotate(90deg) scale(2); + font-weight: 200; + color: #b0b8c1; + cursor: pointer; + opacity: .1; +} + + +/* SECTION 2 메인 하단 문구 */ +.section2 { + position: relative; +} +.section2 .inner { + position: relative; + top: 0px; + background-color: #f9fafb; + width: 100%; + height: 600px; + align-items: center; +} +.section2 .text { + position: absolute; + top: 215px; + width: 100%; +} +.section2 .text p { + font-size: 30px; + font-weight: 600; + line-height: 1.7; + text-align: center; +} + + +/* SECTION 3 홈,소비 */ +.section3 { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.section3 .inner { + height: 1680px; +} +.section3 .home { + position: relative; +} +.section3 .home .text-group { + position: absolute; + top: 250px; + left: -215px; + width: 1050px; +} +.section3 .home .text-group h2 { + font-size: 50px; + font-weight: 600; +} +.section3 .home .text-group h4 { + font-size: 28px; + font-weight: 600; + color: #3182f6; + margin-bottom: 30px; +} +.section3 .home .consumption { + float: left; + width: 600px; + height: 936px; +} +.section3 .home .consumption img { + position: absolute; + top: 500px; + left: 354px; + /* margin: 0 auto; */ +} +.section3 .home .consumption img.iphone1 { + position: absolute; + top: 244px; + left: 309px; + width: 600px; +} +.section3 .home .consumption img.home-img1 { + position: absolute; + top: 338px; + left: 438px; + width: 342px; +} +.section3 .home .this-month { + position: relative; +} +.section3 .home .this-month img { + position: absolute; + margin: 0 auto; +} +.section3 .home .this-month img.iphone2 { + position: absolute; + top: 589px; + left: -329px; + width: 600px; +} +.section3 .home .this-month img.home-img2 { + position: absolute; + top: 677px; + left: -200px; + width: 342px; +} +.section3 .home .text { + position: absolute; + top: 1250px; + left: 395px; + font-size: 23px; + font-weight: 500; + line-height: 1.5; + width: 100%; +} + + +/* SECTION 4 송금 */ +.section4 { + display: flex; + justify-content: center; + align-items: center; + position: relative; + background-color: #f9fafb; +} +.section4 .inner { + height: 2310px; +} +.section4 .payment { + position: relative; +} +.section4 .payment .title { + position: absolute; + top: 250px; + left: -500px; + width: 1040px; +} +.section4 .payment .title h4 { + font-size: 28px; + font-weight: 600; + color: #3182f6; + margin-bottom: 30px; +} +.section4 .payment .title h2 { + font-size: 50px; + font-weight: 600; +} +.section4 .payment .free { + position: relative; +} +.section4 .payment .free .text-group { + position: absolute; + top: 678px; + left: -488px; + width: 510px; +} +.section4 .payment .free .text-group h4 { + font-size: 20px; + font-weight: 500; + color: #3182f6; + margin-bottom: 10px; +} +.section4 .payment .free .text-group h2 { + font-size: 40px; + font-weight: 600; + margin-bottom: 20px; +} +.section4 .payment .free .text-group p { + font-size: 22px; + font-weight: 500; + color: #6b7684; +} +.section4 .payment .free .image { + position: relative; +} +.section4 .payment .free .image img { + position: absolute; + top: 619px; + left: 46px; + width: 485px; +} +.section4 .payment .fraud { + position: relative; +} +.section4 .payment .fraud .image { + position: relative; +} +.section4 .payment .fraud .image img { + position: absolute; + top: 1146px; + left: -515px; + width: 485px; +} +.section4 .payment .fraud .text-group { + position: absolute; + top: 1190px; + left: 79px; + width: 510px; +} +.section4 .payment .fraud .text-group h4 { + font-size: 20px; + font-weight: 500; + color: #3182f6; + margin-bottom: 10px; +} +.section4 .payment .fraud .text-group h2 { + font-size: 40px; + font-weight: 600; + margin-bottom: 20px; +} +.section4 .payment .fraud .text-group p { + font-size: 22px; + font-weight: 500; + color: #6b7684; +} +.section4 .payment .auto { + position: relative; +} +.section4 .payment .auto .text-group { + position: absolute; + top: 1760px; + left: -488px; + width: 510px; +} +.section4 .payment .auto .text-group h4 { + font-size: 20px; + font-weight: 500; + color: #3182f6; + margin-bottom: 10px; +} +.section4 .payment .auto .text-group h2 { + font-size: 40px; + font-weight: 600; + margin-bottom: 20px; +} +.section4 .payment .auto .text-group p { + font-size: 22px; + font-weight: 500; + color: #6b7684; +} +.section4 .payment .auto .image { + position: absolute; + top: 1900px; +} +.section4 .payment .auto .image img { + position: absolute; + top: -207px; + left: 105px; + width: 485px; +} + + +/* SECTION 5 대출 */ +.loan { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.loan .inner { + position: relative; + height: 1325px; +} +.loan .text-group { + display: flex; + flex-direction: column; + position: absolute; + top: 255px; + left: -525px; + width: 500px; +} +.loan .text-group1 h4 { + font-size: 28px; + font-weight: 600; + color: #3182f6; + margin-bottom: 30px; +} +.loan .text-group1 h2 { + font-size: 50px; + font-weight: 600; + margin-bottom: 210px; +} +.loan .text-group2 { + margin-bottom: 45px; +} +.loan .text-group2 p { + font-size: 45px; + font-weight: 600; + line-height: 1.1; +} +.loan .text-group2 p .lower { + color: #8b95a1; +} +.loan .text-group2 p .little { + color: #d1d6db; +} +.loan .text-group3 p { + font-size: 22px; + font-weight: 500; + line-height: 1.6; +} +.loan .image-group .iphone { + position: absolute; + top: 205px; + left: 30px; + width: 600px; +} +.loan .image-group .loan-check { + position: absolute; + top: 300px; + left: 160px; + width: 342px; +} + + +/* SECTION 6 신용 */ +.credit { + display: flex; + justify-content: center; + align-items: center; + position: relative; + background-color: #f9fafb; +} +.credit .inner { + position: relative; + height: 1690px; +} +.credit .text-group { + position: absolute; + top: 245px; + left: -530px; + width: 1050px; + height: 210px; + margin-bottom: 80px; +} +.credit .text-group h4 { + font-size: 28px; + font-weight: 600; + color: #3182f6; + margin-bottom: 30px; +} +.credit .text-group h2 { + font-size: 50px; + font-weight: 600; +} +.credit .image-group { + position: absolute; + left: -240px; +} +.credit .my { + position: absolute; + top: 625px; + left: -280px; + width: 380px; +} +.credit .my img { + width: 120px; + height: 120px; + margin-bottom: 30px; +} +.credit .my span { + display: block; + font-size: 27px; + font-weight: 600; + margin-bottom: 10px; +} +.credit .my p { + font-size: 20px; + font-weight: 500; + line-height: 1.7; + color: #6b7684; +} +.credit .grade { + position: absolute; + top: 625px; + left: 320px; + width: 360px; +} +.credit .grade img { + width: 120px; + height: 120px; + margin-bottom: 30px; +} +.credit .grade span { + display: block; + font-size: 27px; + font-weight: 600; + margin-bottom: 10px; +} +.credit .grade p { + font-size: 20px; + font-weight: 500; + line-height: 1.7; + color: #6b7684; +} +.credit .alarm { + position: absolute; + top: 1025px; + left: -280px; + width: 500px; +} +.credit .alarm img { + width: 120px; + height: 120px; + margin-bottom: 30px; +} +.credit .alarm span { + display: block; + font-size: 27px; + font-weight: 600; + margin-bottom: 10px; +} +.credit .alarm p { + font-size: 20px; + font-weight: 500; + line-height: 1.7; + color: #6b7684; +} +.credit .tip { + position: absolute; + top: 1025px; + left: 320px; + width: 410px; +} +.credit .tip img { + width: 120px; + height: 120px; + margin-bottom: 30px; +} +.credit .tip span { + display: block; + font-size: 27px; + font-weight: 600; + margin-bottom: 10px; +} +.credit .tip p { + font-size: 20px; + font-weight: 500; + line-height: 1.7; + color: #6b7684; +} + + +/* SECTION 7 투자 */ +.invest { + display: flex; + justify-content: center; + align-items: center; + position: relative; +} +.invest .inner { + position: relative; + height: 1725px; +} +.invest .title { + position: absolute; + top: 265px; + left: -525px; + width: 1050px; +} +.invest .title h4 { + font-size: 28px; + font-weight: 600; + color: #3182f6; + margin-bottom: 30px; +} +.invest .title h2 { + font-size: 50px; + font-weight: 600; +} +.invest .text-group1 { + position: absolute; + top: 820px; + left: -440px; + font-size: 21px; + font-weight: 600; + line-height: 1.7; + width: 220px; +} +.invest .text-group2 { + position: absolute; + top: 820px; + left: 240px; + font-size: 21px; + font-weight: 600; + line-height: 1.7; + width: 220px; +} +.invest .text-group3 { + position: absolute; + top: 1410px; + left: -523px; + font-size: 21px; + font-weight: 600; + text-align: center; + line-height: 1.7; + width: 1050px; +} +.invest .image-group { + position: relative; +} +.invest .image-group .stock img { + position: absolute; + top: 580px; + left: -170px; + width: 342px; + height: auto; +} +.invest .image-group .stocks { + display: flex; + position: absolute; + top: 1115px; + left: -672px; + width: 1342px; + height: 178px; +} +.invest .image-group .stocks img { + width: 178px; + height: 178px; + margin-left: 16px; +} +.invest .image-group .stocks img:nth-child(1) { + margin-left: 0; +} +.invest .image-group .iphone img { + position: absolute; + top: 480px; + left: -300px; + width: 600px; + height: auto; +} + + +/* FOOTER */ +footer { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 50px 0 100px 0; + height: 800px; + box-sizing: border-box; + color: #b0b8c1; + background-color: #191f28; +} +footer .inner { + position: absolute; + padding-top: 50px; +} +footer .inner a { + color: #6b7684; +} +footer .category { + display: flex; + padding-bottom: 40px; +} +footer .category li { + font-size: 15px; + padding-right: 20px; + padding-bottom: 10px; +} +footer .category li a:hover { + cursor: pointer; + text-decoration: underline; +} +footer .category li h4 { + font-size: 15px; + width: 170px; + height: 30px; + padding-bottom: 5px; + font-weight: 700; +} +footer .category .service { + width: 170px; +} +footer .category .company { + width: 170px; +} +footer .category .ask { + width: 170px; +} +footer .category .customer { + width: 420px; +} +footer .address { + width: 930px; +} +footer .address h4 { + font-size: 15px; + font-weight: 700; + margin-bottom: 15px; +} +footer .address p { + font-size: 14px; + color: #8b95a1; + margin-bottom: 40px; +} +footer .address p a { + font-size: 12px; + cursor: pointer; +} +footer .address p a:hover { + text-decoration: underline; +} +footer .terms { + display: flex; + flex-wrap: wrap; + width: 830px; + margin-bottom: 40px; +} +footer .terms li { + display: inline-block; + font-size: 13px; + width: 190px; + height: 17px; +} +footer .terms a:hover { + cursor: pointer; + text-decoration: underline; +} +footer .sns { + display: flex; +} +footer .sns img { + opacity: .6; + transition: .5s; + margin-right: 8px; +} +footer .sns img:hover { + opacity: 1; +} \ No newline at end of file diff --git a/JS/main.js b/JS/main.js new file mode 100644 index 00000000..610ae988 --- /dev/null +++ b/JS/main.js @@ -0,0 +1,49 @@ +// 메인 하단버튼 클릭 시 특정 위치로 이동 +const btn = document.querySelector('.material-symbols-outlined'); + +btn.addEventListener('click', function () { + window.scrollTo({ + top: 916, + behavior: 'smooth' + }); +}); + + +// 메인 하단버튼 floating 효과 +function floatingObject(selector) { + gsap.to(selector, 1, { + y: 20, + repeat: -1, + yoyo: true, + ease: Power1.easeInOut, + opacity: 1 + }); +}; +floatingObject('.floating'); + + +// 스크롤 시 헤더 border-bottom 숨김 처리 +const header = document.querySelector('header') + +window.addEventListener('scroll', function () { + if (scrollY > 0) { + header.classList.add('border-bottom'); + } else { + header.classList.remove('border-bottom'); + } +}); + + +// 스크롤 애니메이션 to-up +const spyEls = document.querySelectorAll('section.scroll-spy'); + +spyEls.forEach(function (spyEl) { + new ScrollMagic + .Scene({ + triggerElement: spyEl, // 보여짐 여부를 감시할 요소 + triggerHook: .7 + }) + .setClassToggle(spyEl, 'show') + .addTo(new ScrollMagic.Controller()); +}); + diff --git a/README.md b/README.md index 598dc30f..ac4100e3 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,25 @@ -# 👀 자신이 원하는 사이트 레이아웃 클론 - -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! - -## 과제 수행 및 제출 방법 - -1. 현재 저장소를 로컬에 클론(Clone)합니다. -1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`) -1. 자신의 본명 브랜치에서 과제를 수행합니다. -1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`) -1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`) - -- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! - -## 필수 요구사항 - -- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요! -- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. - -## 선택 요구사항 - -- [ ] `
`, `
` 등 시멘틱 태그를 최대한 활용해보세요. -- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- [ ] 부분적으로 BEM 방법론을 도입해보세요. -- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) -- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요. -- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요. - -## 손쉬운 이미지 추출 방법 - -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요. - -1. 원하는 사이트 접속 -1. Image Downloader 확장 프로그램 실행 -1. 다운로드 원하는 이미지 선택 -1. 서브 폴더 이름(Save to subfolder) 명시 -1. 다운로드! +# 레이아웃 클론 과제 +안녕하세요. 저는 '토스(toss)' 홈페이지를 클론해보았습니다. +토스를 선택한 이유는 핀테크 계열의 web을 만들어보고 싶었고, 스크롤 애니메이션을 구현해보고자 했기 때문입니다. +많은 핀테크 기업 중 토스는 사용자 친화적이면서 직관적인 UX/UI로 유명하기 때문에 도전하게 되었습니다.
+## 실제 사이트와 배포한 과제물 +[토스 홈페이지](https://toss.im/)
+[과제물 실제 배포 페이지](https://funny-vacherin-5977e2.netlify.app/)
+## 사용한 기술 스택 +HTML : `
` , `
` , `