diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..2054514c Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index cc6a3b23..47b25ebc 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,45 @@ -[참고 내용] +![라인 아이콘](./images/favicon.png) -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +# 🌱LINE 홈페이지 클론 코딩 -과제 수행 및 제출 방법 +3주차 HTML/CSS 클론 코딩 과제로 라인을 선정하였습니다. -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)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! +사이트 내 애니메이션 등을 구현 도전해보고 싶어서 선정하였습니다. +
+
-필수 요구사항 +## 기술 스택 -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. +- HTML +- CSS +- JavaScript + - Lodash + - Gsap +
+
-선택 요구사항 +
+
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) +## 실제 웹사이트 / 클론 코딩 바로가기 -손쉬운 이미지 추출 방법 +
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. +| 라인 서비스 주소 | 클론 코딩 링크 | +| --------------------------------------- | ----------------------------------------------------------------- | +| [라인 서비스 주소](https://line.me/ko/) | [라인 클론 코딩 주소](https://playful-eclair-e2793a.netlify.app/) | -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! +
+
+ +## 자바스크립트가 쓰인 부분 + +- 로딩 애니메이션 +- 배너 애니메이션 +- 스크롤에 따른 배너 축소 애니메이션 +- 스크롤에 따른 헤더 현재 위치 변경 +- 서비스 카테고리 별 분류 기능 diff --git a/WOFF/LINESeedKR-Bd.woff b/WOFF/LINESeedKR-Bd.woff new file mode 100644 index 00000000..e7fda8cf Binary files /dev/null and b/WOFF/LINESeedKR-Bd.woff differ diff --git a/WOFF/LINESeedKR-Rg.woff b/WOFF/LINESeedKR-Rg.woff new file mode 100644 index 00000000..b50ee384 Binary files /dev/null and b/WOFF/LINESeedKR-Rg.woff differ diff --git a/WOFF/LINESeedKR-Th.woff b/WOFF/LINESeedKR-Th.woff new file mode 100644 index 00000000..935c3e33 Binary files /dev/null and b/WOFF/LINESeedKR-Th.woff differ diff --git a/assets/add-to-playlist.png b/assets/add-to-playlist.png new file mode 100644 index 00000000..1a515df3 Binary files /dev/null and b/assets/add-to-playlist.png differ diff --git a/assets/cover.png b/assets/cover.png new file mode 100644 index 00000000..a7decbe5 Binary files /dev/null and b/assets/cover.png differ diff --git a/assets/event/Download_on_the_App_Store-400px.png b/assets/event/Download_on_the_App_Store-400px.png new file mode 100644 index 00000000..b5441433 Binary files /dev/null and b/assets/event/Download_on_the_App_Store-400px.png differ diff --git a/assets/event/Get-it-on-Google-Play-400px.png b/assets/event/Get-it-on-Google-Play-400px.png new file mode 100644 index 00000000..f46ba057 Binary files /dev/null and b/assets/event/Get-it-on-Google-Play-400px.png differ diff --git a/assets/event/video-tape.png b/assets/event/video-tape.png new file mode 100644 index 00000000..de8994e7 Binary files /dev/null and b/assets/event/video-tape.png differ diff --git a/assets/heart.png b/assets/heart.png new file mode 100644 index 00000000..58334166 Binary files /dev/null and b/assets/heart.png differ diff --git a/assets/icon/left.png b/assets/icon/left.png new file mode 100644 index 00000000..dc913530 Binary files /dev/null and b/assets/icon/left.png differ diff --git a/assets/icon/right.png b/assets/icon/right.png new file mode 100644 index 00000000..697caa3e Binary files /dev/null and b/assets/icon/right.png differ diff --git a/assets/loupe.png b/assets/loupe.png new file mode 100644 index 00000000..b9ce0efd Binary files /dev/null and b/assets/loupe.png differ diff --git a/assets/love.png b/assets/love.png new file mode 100644 index 00000000..56054d0f Binary files /dev/null and b/assets/love.png differ diff --git a/assets/magazine.png b/assets/magazine.png new file mode 100644 index 00000000..fffc7603 Binary files /dev/null and b/assets/magazine.png differ diff --git a/assets/magazine/magazine1.png b/assets/magazine/magazine1.png new file mode 100644 index 00000000..35a98790 Binary files /dev/null and b/assets/magazine/magazine1.png differ diff --git a/assets/magazine/magazine2.png b/assets/magazine/magazine2.png new file mode 100644 index 00000000..3ce6cc28 Binary files /dev/null and b/assets/magazine/magazine2.png differ diff --git a/assets/magazine/magazine3.png b/assets/magazine/magazine3.png new file mode 100644 index 00000000..6dd8dfdd Binary files /dev/null and b/assets/magazine/magazine3.png differ diff --git a/assets/magazine/magazine4.png b/assets/magazine/magazine4.png new file mode 100644 index 00000000..c42cf4d0 Binary files /dev/null and b/assets/magazine/magazine4.png differ diff --git a/assets/magazine/magazine5.png b/assets/magazine/magazine5.png new file mode 100644 index 00000000..3612ebd4 Binary files /dev/null and b/assets/magazine/magazine5.png differ diff --git a/assets/magazine/magazine6.png b/assets/magazine/magazine6.png new file mode 100644 index 00000000..960aaf54 Binary files /dev/null and b/assets/magazine/magazine6.png differ diff --git a/assets/magazine/magazine7.png b/assets/magazine/magazine7.png new file mode 100644 index 00000000..94481370 Binary files /dev/null and b/assets/magazine/magazine7.png differ diff --git a/assets/magazine/new.png b/assets/magazine/new.png new file mode 100644 index 00000000..47b47ad8 Binary files /dev/null and b/assets/magazine/new.png differ diff --git a/assets/magazine/new2.png b/assets/magazine/new2.png new file mode 100644 index 00000000..8eefb079 Binary files /dev/null and b/assets/magazine/new2.png differ diff --git a/assets/magazine/omygirl.png b/assets/magazine/omygirl.png new file mode 100644 index 00000000..b2527f1b Binary files /dev/null and b/assets/magazine/omygirl.png differ diff --git a/assets/magazine/zerobase.png b/assets/magazine/zerobase.png new file mode 100644 index 00000000..d3570da8 Binary files /dev/null and b/assets/magazine/zerobase.png differ diff --git a/assets/mic.png b/assets/mic.png new file mode 100644 index 00000000..2ed5f968 Binary files /dev/null and b/assets/mic.png differ diff --git a/assets/money.png b/assets/money.png new file mode 100644 index 00000000..211a571e Binary files /dev/null and b/assets/money.png differ diff --git a/assets/music-player-back.png b/assets/music-player-back.png new file mode 100644 index 00000000..de57fb01 Binary files /dev/null and b/assets/music-player-back.png differ diff --git a/assets/music-player-next.png b/assets/music-player-next.png new file mode 100644 index 00000000..4644909f Binary files /dev/null and b/assets/music-player-next.png differ diff --git a/assets/music.png b/assets/music.png new file mode 100644 index 00000000..a46174cc Binary files /dev/null and b/assets/music.png differ diff --git a/assets/news/123.png b/assets/news/123.png new file mode 100644 index 00000000..f3256eb8 Binary files /dev/null and b/assets/news/123.png differ diff --git a/assets/news/127.png b/assets/news/127.png new file mode 100644 index 00000000..f789b584 Binary files /dev/null and b/assets/news/127.png differ diff --git a/assets/news/tmxmfpdlzlwm.png b/assets/news/tmxmfpdlzlwm.png new file mode 100644 index 00000000..26d33dc7 Binary files /dev/null and b/assets/news/tmxmfpdlzlwm.png differ diff --git "a/assets/news/\353\212\211.png" "b/assets/news/\353\212\211.png" new file mode 100644 index 00000000..8eefb079 Binary files /dev/null and "b/assets/news/\353\212\211.png" differ diff --git "a/assets/news/\353\260\225\355\232\250\354\213\240.png" "b/assets/news/\353\260\225\355\232\250\354\213\240.png" new file mode 100644 index 00000000..f568edac Binary files /dev/null and "b/assets/news/\353\260\225\355\232\250\354\213\240.png" differ diff --git "a/assets/news/\354\203\244\354\235\264\353\213\210.png" "b/assets/news/\354\203\244\354\235\264\353\213\210.png" new file mode 100644 index 00000000..9fba1b6c Binary files /dev/null and "b/assets/news/\354\203\244\354\235\264\353\213\210.png" differ diff --git "a/assets/news/\354\204\270\353\270\220\355\213\264.png" "b/assets/news/\354\204\270\353\270\220\355\213\264.png" new file mode 100644 index 00000000..9898ba29 Binary files /dev/null and "b/assets/news/\354\204\270\353\270\220\355\213\264.png" differ diff --git "a/assets/news/\354\240\225\352\265\255.png" "b/assets/news/\354\240\225\352\265\255.png" new file mode 100644 index 00000000..9be5da06 Binary files /dev/null and "b/assets/news/\354\240\225\352\265\255.png" differ diff --git a/assets/pick/pick0.png b/assets/pick/pick0.png new file mode 100644 index 00000000..4d95ad01 Binary files /dev/null and b/assets/pick/pick0.png differ diff --git a/assets/pick/pick1.png b/assets/pick/pick1.png new file mode 100644 index 00000000..fb5e0538 Binary files /dev/null and b/assets/pick/pick1.png differ diff --git a/assets/pick/pick2.png b/assets/pick/pick2.png new file mode 100644 index 00000000..1c5c19e0 Binary files /dev/null and b/assets/pick/pick2.png differ diff --git a/assets/pick/pick3.png b/assets/pick/pick3.png new file mode 100644 index 00000000..2bd553cd Binary files /dev/null and b/assets/pick/pick3.png differ diff --git a/assets/pick/pick4.png b/assets/pick/pick4.png new file mode 100644 index 00000000..33ef296a Binary files /dev/null and b/assets/pick/pick4.png differ diff --git a/assets/pick/pick5.png b/assets/pick/pick5.png new file mode 100644 index 00000000..41fc4139 Binary files /dev/null and b/assets/pick/pick5.png differ diff --git a/assets/pick/pick6.png b/assets/pick/pick6.png new file mode 100644 index 00000000..28182bfc Binary files /dev/null and b/assets/pick/pick6.png differ diff --git a/assets/pick/pick7.png b/assets/pick/pick7.png new file mode 100644 index 00000000..8351d7fb Binary files /dev/null and b/assets/pick/pick7.png differ diff --git a/assets/play-button.png b/assets/play-button.png new file mode 100644 index 00000000..4ce4dac1 Binary files /dev/null and b/assets/play-button.png differ diff --git a/assets/play_music.png b/assets/play_music.png new file mode 100644 index 00000000..1312021c Binary files /dev/null and b/assets/play_music.png differ diff --git a/assets/playlist.png b/assets/playlist.png new file mode 100644 index 00000000..27c19f50 Binary files /dev/null and b/assets/playlist.png differ diff --git a/assets/promotion/today_thumbs.1d76741b.png b/assets/promotion/today_thumbs.1d76741b.png new file mode 100644 index 00000000..877e04ab Binary files /dev/null and b/assets/promotion/today_thumbs.1d76741b.png differ diff --git a/assets/random.png b/assets/random.png new file mode 100644 index 00000000..04e8a6d2 Binary files /dev/null and b/assets/random.png differ diff --git a/assets/refresh.png b/assets/refresh.png new file mode 100644 index 00000000..105e8780 Binary files /dev/null and b/assets/refresh.png differ diff --git a/assets/search.png b/assets/search.png new file mode 100644 index 00000000..25461f5a Binary files /dev/null and b/assets/search.png differ diff --git a/assets/social/facebook.png b/assets/social/facebook.png new file mode 100644 index 00000000..aec5a4f5 Binary files /dev/null and b/assets/social/facebook.png differ diff --git a/assets/social/instagram.png b/assets/social/instagram.png new file mode 100644 index 00000000..a3d916dd Binary files /dev/null and b/assets/social/instagram.png differ diff --git a/assets/social/letter-n.png b/assets/social/letter-n.png new file mode 100644 index 00000000..675628eb Binary files /dev/null and b/assets/social/letter-n.png differ diff --git a/assets/sp_topbar.f4891747.svg b/assets/sp_topbar.f4891747.svg new file mode 100644 index 00000000..38e6ad33 --- /dev/null +++ b/assets/sp_topbar.f4891747.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/sparkles.png b/assets/sparkles.png new file mode 100644 index 00000000..7522f385 Binary files /dev/null and b/assets/sparkles.png differ diff --git a/assets/speaker-filled-audio-tool.png b/assets/speaker-filled-audio-tool.png new file mode 100644 index 00000000..68678d56 Binary files /dev/null and b/assets/speaker-filled-audio-tool.png differ diff --git a/assets/stage.png b/assets/stage.png new file mode 100644 index 00000000..ca0477f0 Binary files /dev/null and b/assets/stage.png differ diff --git a/assets/trophy.png b/assets/trophy.png new file mode 100644 index 00000000..6c39c54a Binary files /dev/null and b/assets/trophy.png differ diff --git a/assets/user.png b/assets/user.png new file mode 100644 index 00000000..bd07199e Binary files /dev/null and b/assets/user.png differ diff --git a/assets/vibe/vibe0.png b/assets/vibe/vibe0.png new file mode 100644 index 00000000..36bd1d92 Binary files /dev/null and b/assets/vibe/vibe0.png differ diff --git a/assets/vibe/vibe1.png b/assets/vibe/vibe1.png new file mode 100644 index 00000000..92fd4aba Binary files /dev/null and b/assets/vibe/vibe1.png differ diff --git a/assets/vibe/vibe2.jpg b/assets/vibe/vibe2.jpg new file mode 100644 index 00000000..36567ef0 Binary files /dev/null and b/assets/vibe/vibe2.jpg differ diff --git a/assets/vibe/vibe3.png b/assets/vibe/vibe3.png new file mode 100644 index 00000000..0201c7fe Binary files /dev/null and b/assets/vibe/vibe3.png differ diff --git a/assets/vibe/vibe4.png b/assets/vibe/vibe4.png new file mode 100644 index 00000000..21d17154 Binary files /dev/null and b/assets/vibe/vibe4.png differ diff --git a/assets/vibe/vibe5.png b/assets/vibe/vibe5.png new file mode 100644 index 00000000..7dd42d83 Binary files /dev/null and b/assets/vibe/vibe5.png differ diff --git a/assets/vibe/vibe6.png b/assets/vibe/vibe6.png new file mode 100644 index 00000000..4a89d54d Binary files /dev/null and b/assets/vibe/vibe6.png differ diff --git a/assets/vibe/vibe7.png b/assets/vibe/vibe7.png new file mode 100644 index 00000000..02cdc437 Binary files /dev/null and b/assets/vibe/vibe7.png differ diff --git a/assets/vinyl.png b/assets/vinyl.png new file mode 100644 index 00000000..1589d80a Binary files /dev/null and b/assets/vinyl.png differ diff --git a/images/communication-chatCall.png b/images/communication-chatCall.png new file mode 100644 index 00000000..b9a0f277 Binary files /dev/null and b/images/communication-chatCall.png differ diff --git a/images/communication-homeTab.png b/images/communication-homeTab.png new file mode 100644 index 00000000..85005b02 Binary files /dev/null and b/images/communication-homeTab.png differ diff --git a/images/communication-lineBoom.png b/images/communication-lineBoom.png new file mode 100644 index 00000000..a7bf30ec Binary files /dev/null and b/images/communication-lineBoom.png differ diff --git a/images/communication-openchat.png b/images/communication-openchat.png new file mode 100644 index 00000000..d8323a1a Binary files /dev/null and b/images/communication-openchat.png differ diff --git a/images/communication-stickerEmojiTheme.png b/images/communication-stickerEmojiTheme.png new file mode 100644 index 00000000..d706f83d Binary files /dev/null and b/images/communication-stickerEmojiTheme.png differ diff --git a/images/communication-walletTab.png b/images/communication-walletTab.png new file mode 100644 index 00000000..923d556f Binary files /dev/null and b/images/communication-walletTab.png differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 00000000..592e4b32 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/icon-charmmy.png b/images/icon-charmmy.png new file mode 100644 index 00000000..18a71410 Binary files /dev/null and b/images/icon-charmmy.png differ diff --git a/images/icon-line-BITMAX.png b/images/icon-line-BITMAX.png new file mode 100644 index 00000000..2a47c365 Binary files /dev/null and b/images/icon-line-BITMAX.png differ diff --git a/images/icon-line-FX.png b/images/icon-line-FX.png new file mode 100644 index 00000000..4ed1bb0d Binary files /dev/null and b/images/icon-line-FX.png differ diff --git a/images/icon-line-ads-network.png b/images/icon-line-ads-network.png new file mode 100644 index 00000000..fe7b5553 Binary files /dev/null and b/images/icon-line-ads-network.png differ diff --git a/images/icon-line-ads.png b/images/icon-line-ads.png new file mode 100644 index 00000000..ffca4d16 Binary files /dev/null and b/images/icon-line-ads.png differ diff --git a/images/icon-line-brown-farm.png b/images/icon-line-brown-farm.png new file mode 100644 index 00000000..3ba2d2a0 Binary files /dev/null and b/images/icon-line-brown-farm.png differ diff --git a/images/icon-line-bubble1.png b/images/icon-line-bubble1.png new file mode 100644 index 00000000..a00f2f79 Binary files /dev/null and b/images/icon-line-bubble1.png differ diff --git a/images/icon-line-bubble2.png b/images/icon-line-bubble2.png new file mode 100644 index 00000000..b6420ee9 Binary files /dev/null and b/images/icon-line-bubble2.png differ diff --git a/images/icon-line-chief.png b/images/icon-line-chief.png new file mode 100644 index 00000000..fddee02c Binary files /dev/null and b/images/icon-line-chief.png differ diff --git a/images/icon-line-disney-sumsum.png b/images/icon-line-disney-sumsum.png new file mode 100644 index 00000000..5564faf8 Binary files /dev/null and b/images/icon-line-disney-sumsum.png differ diff --git a/images/icon-line-finance.png b/images/icon-line-finance.png new file mode 100644 index 00000000..ac25be9a Binary files /dev/null and b/images/icon-line-finance.png differ diff --git a/images/icon-line-flyer.png b/images/icon-line-flyer.png new file mode 100644 index 00000000..6ce0feaf Binary files /dev/null and b/images/icon-line-flyer.png differ diff --git a/images/icon-line-fortune.png b/images/icon-line-fortune.png new file mode 100644 index 00000000..42d0d068 Binary files /dev/null and b/images/icon-line-fortune.png differ diff --git a/images/icon-line-friends-store.png b/images/icon-line-friends-store.png new file mode 100644 index 00000000..741fc43f Binary files /dev/null and b/images/icon-line-friends-store.png differ diff --git a/images/icon-line-gift.png b/images/icon-line-gift.png new file mode 100644 index 00000000..2a2312a3 Binary files /dev/null and b/images/icon-line-gift.png differ diff --git a/images/icon-line-hello-bt21.png b/images/icon-line-hello-bt21.png new file mode 100644 index 00000000..362274cb Binary files /dev/null and b/images/icon-line-hello-bt21.png differ diff --git a/images/icon-line-ilovecoffee.png b/images/icon-line-ilovecoffee.png new file mode 100644 index 00000000..c9ba94f8 Binary files /dev/null and b/images/icon-line-ilovecoffee.png differ diff --git a/images/icon-line-jumpty-heroes.png b/images/icon-line-jumpty-heroes.png new file mode 100644 index 00000000..517557ac Binary files /dev/null and b/images/icon-line-jumpty-heroes.png differ diff --git a/images/icon-line-line.png b/images/icon-line-line.png new file mode 100644 index 00000000..1f11b4a8 Binary files /dev/null and b/images/icon-line-line.png differ diff --git a/images/icon-line-live-viewing.png b/images/icon-line-live-viewing.png new file mode 100644 index 00000000..8ad6a2c8 Binary files /dev/null and b/images/icon-line-live-viewing.png differ diff --git a/images/icon-line-live.png b/images/icon-line-live.png new file mode 100644 index 00000000..4438ed11 Binary files /dev/null and b/images/icon-line-live.png differ diff --git a/images/icon-line-manga.png b/images/icon-line-manga.png new file mode 100644 index 00000000..17d9ef27 Binary files /dev/null and b/images/icon-line-manga.png differ diff --git a/images/icon-line-mini-app.png b/images/icon-line-mini-app.png new file mode 100644 index 00000000..51d8b7c6 Binary files /dev/null and b/images/icon-line-mini-app.png differ diff --git a/images/icon-line-music.png b/images/icon-line-music.png new file mode 100644 index 00000000..84016d62 Binary files /dev/null and b/images/icon-line-music.png differ diff --git a/images/icon-line-official-acc.png b/images/icon-line-official-acc.png new file mode 100644 index 00000000..8e3cb02a Binary files /dev/null and b/images/icon-line-official-acc.png differ diff --git a/images/icon-line-parttime.png b/images/icon-line-parttime.png new file mode 100644 index 00000000..82a8921e Binary files /dev/null and b/images/icon-line-parttime.png differ diff --git a/images/icon-line-pay.png b/images/icon-line-pay.png new file mode 100644 index 00000000..cad6f963 Binary files /dev/null and b/images/icon-line-pay.png differ diff --git a/images/icon-line-play.jpg b/images/icon-line-play.jpg new file mode 100644 index 00000000..5194de23 Binary files /dev/null and b/images/icon-line-play.jpg differ diff --git a/images/icon-line-pocket-money.png b/images/icon-line-pocket-money.png new file mode 100644 index 00000000..7d0e5e61 Binary files /dev/null and b/images/icon-line-pocket-money.png differ diff --git a/images/icon-line-pocopang-town.png b/images/icon-line-pocopang-town.png new file mode 100644 index 00000000..b2d4df4e Binary files /dev/null and b/images/icon-line-pocopang-town.png differ diff --git a/images/icon-line-pocopang.png b/images/icon-line-pocopang.png new file mode 100644 index 00000000..1f4e2f6a Binary files /dev/null and b/images/icon-line-pocopang.png differ diff --git a/images/icon-line-pocopoco.png b/images/icon-line-pocopoco.png new file mode 100644 index 00000000..9bb3d5d1 Binary files /dev/null and b/images/icon-line-pocopoco.png differ diff --git a/images/icon-line-point-club.png b/images/icon-line-point-club.png new file mode 100644 index 00000000..0b134ff5 Binary files /dev/null and b/images/icon-line-point-club.png differ diff --git a/images/icon-line-pointAD.png b/images/icon-line-pointAD.png new file mode 100644 index 00000000..0c339b93 Binary files /dev/null and b/images/icon-line-pointAD.png differ diff --git a/images/icon-line-pop2.png b/images/icon-line-pop2.png new file mode 100644 index 00000000..51aec499 Binary files /dev/null and b/images/icon-line-pop2.png differ diff --git a/images/icon-line-promotion-sticker.png b/images/icon-line-promotion-sticker.png new file mode 100644 index 00000000..2c10c45f Binary files /dev/null and b/images/icon-line-promotion-sticker.png differ diff --git a/images/icon-line-puzzle-tantan.png b/images/icon-line-puzzle-tantan.png new file mode 100644 index 00000000..351f7417 Binary files /dev/null and b/images/icon-line-puzzle-tantan.png differ diff --git a/images/icon-line-rangers.png b/images/icon-line-rangers.png new file mode 100644 index 00000000..d3c9c2fc Binary files /dev/null and b/images/icon-line-rangers.png differ diff --git a/images/icon-line-records.png b/images/icon-line-records.png new file mode 100644 index 00000000..cd19c231 Binary files /dev/null and b/images/icon-line-records.png differ diff --git a/images/icon-line-research.png b/images/icon-line-research.png new file mode 100644 index 00000000..b40a6485 Binary files /dev/null and b/images/icon-line-research.png differ diff --git a/images/icon-line-sales-promotion.png b/images/icon-line-sales-promotion.png new file mode 100644 index 00000000..2ec4ffbf Binary files /dev/null and b/images/icon-line-sales-promotion.png differ diff --git a/images/icon-line-score.png b/images/icon-line-score.png new file mode 100644 index 00000000..e03c439b Binary files /dev/null and b/images/icon-line-score.png differ diff --git a/images/icon-line-shopping.png b/images/icon-line-shopping.png new file mode 100644 index 00000000..626ed343 Binary files /dev/null and b/images/icon-line-shopping.png differ diff --git a/images/icon-line-w.png b/images/icon-line-w.png new file mode 100644 index 00000000..d1e62639 Binary files /dev/null and b/images/icon-line-w.png differ diff --git a/images/icon-openchat.png b/images/icon-openchat.png new file mode 100644 index 00000000..401f0fc1 Binary files /dev/null and b/images/icon-openchat.png differ diff --git a/images/icon-sns-f.png b/images/icon-sns-f.png new file mode 100644 index 00000000..5cd3324e Binary files /dev/null and b/images/icon-sns-f.png differ diff --git a/images/icon-sns-y.png b/images/icon-sns-y.png new file mode 100644 index 00000000..c87ece2d Binary files /dev/null and b/images/icon-sns-y.png differ diff --git a/images/icon-talk-head-view.png b/images/icon-talk-head-view.png new file mode 100644 index 00000000..7d009bdf Binary files /dev/null and b/images/icon-talk-head-view.png differ diff --git a/images/icon-title-pc.png b/images/icon-title-pc.png new file mode 100644 index 00000000..f08515a0 Binary files /dev/null and b/images/icon-title-pc.png differ diff --git a/images/icon-title-sp.png b/images/icon-title-sp.png new file mode 100644 index 00000000..dbc7b991 Binary files /dev/null and b/images/icon-title-sp.png differ diff --git a/images/icon_line-healthcare.png b/images/icon_line-healthcare.png new file mode 100644 index 00000000..b5430b4d Binary files /dev/null and b/images/icon_line-healthcare.png differ diff --git a/images/icon_line-healthcare_lg.png b/images/icon_line-healthcare_lg.png new file mode 100644 index 00000000..4b68b777 Binary files /dev/null and b/images/icon_line-healthcare_lg.png differ diff --git a/images/icon_line-music.png b/images/icon_line-music.png new file mode 100644 index 00000000..096d4747 Binary files /dev/null and b/images/icon_line-music.png differ diff --git a/images/icon_line-news.png b/images/icon_line-news.png new file mode 100644 index 00000000..a1ffb378 Binary files /dev/null and b/images/icon_line-news.png differ diff --git a/images/icon_line-pay.png b/images/icon_line-pay.png new file mode 100644 index 00000000..693670a7 Binary files /dev/null and b/images/icon_line-pay.png differ diff --git a/images/line-healthcare.png b/images/line-healthcare.png new file mode 100644 index 00000000..7b4992be Binary files /dev/null and b/images/line-healthcare.png differ diff --git a/images/line-music.png b/images/line-music.png new file mode 100644 index 00000000..64d8f5d0 Binary files /dev/null and b/images/line-music.png differ diff --git a/images/line-news.png b/images/line-news.png new file mode 100644 index 00000000..b1daa5b1 Binary files /dev/null and b/images/line-news.png differ diff --git a/images/line-pay.png b/images/line-pay.png new file mode 100644 index 00000000..0208c0a8 Binary files /dev/null and b/images/line-pay.png differ diff --git a/images/logo-apple--black.svg b/images/logo-apple--black.svg new file mode 100644 index 00000000..9c6905ca --- /dev/null +++ b/images/logo-apple--black.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/logo-apple.svg b/images/logo-apple.svg new file mode 100644 index 00000000..afe28ad7 --- /dev/null +++ b/images/logo-apple.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/images/logo-desktop--black.svg b/images/logo-desktop--black.svg new file mode 100644 index 00000000..cfc861d1 --- /dev/null +++ b/images/logo-desktop--black.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/logo-desktop.svg b/images/logo-desktop.svg new file mode 100644 index 00000000..df6443b1 --- /dev/null +++ b/images/logo-desktop.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/images/logo-google-playstore--black.svg b/images/logo-google-playstore--black.svg new file mode 100644 index 00000000..e6f53dd6 --- /dev/null +++ b/images/logo-google-playstore--black.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/logo-playstore.svg b/images/logo-playstore.svg new file mode 100644 index 00000000..9b42ef61 --- /dev/null +++ b/images/logo-playstore.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/mv01 (1).jpg b/images/mv01 (1).jpg new file mode 100644 index 00000000..923df178 Binary files /dev/null and b/images/mv01 (1).jpg differ diff --git a/images/mv01.jpg b/images/mv01.jpg new file mode 100644 index 00000000..923df178 Binary files /dev/null and b/images/mv01.jpg differ diff --git a/images/mv02 (1).jpg b/images/mv02 (1).jpg new file mode 100644 index 00000000..455ccddc Binary files /dev/null and b/images/mv02 (1).jpg differ diff --git a/images/mv02.jpg b/images/mv02.jpg new file mode 100644 index 00000000..455ccddc Binary files /dev/null and b/images/mv02.jpg differ diff --git a/images/og_bg.png b/images/og_bg.png new file mode 100644 index 00000000..3eb49c08 Binary files /dev/null and b/images/og_bg.png differ diff --git a/images/sprite-download-list (5).png b/images/sprite-download-list (5).png new file mode 100644 index 00000000..80b7b36d Binary files /dev/null and b/images/sprite-download-list (5).png differ diff --git a/images/support.png b/images/support.png new file mode 100644 index 00000000..46ff9cbe Binary files /dev/null and b/images/support.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..179dfa7c --- /dev/null +++ b/index.html @@ -0,0 +1,1433 @@ + + + + + + + LINE | 라인은 언제나 사용자와 함께합니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ +
+ +
+ +
+ + + KR +
arrow_drop_down
+
    +
  • EN
  • +
  • JP
  • +
  • KR
  • +
  • TW
  • +
  • TH
  • +
  • ID
  • +
+
+
+
+ + +
+ +
+
+
+
+ +

LINE NEWS

+

지금 화제가 되고 있는글로벌 뉴스

+

+ 바쁜 일과 중에도 글로벌 이슈를 알고 싶다면 라인 뉴스를
+ 추천합니다. 정치, 경제부터 연예계 소식까지 모든 장르의 뉴스를
+ 전하는 라인 뉴스에는 ‘알고 싶은 정보’가 가득합니다. +

+ +
+ +
+ +
+ +
+ +

LINE Healthcare

+

간편하게 받아보는 건강 관련 상담

+

+ 아프지만 병원에 가기 어려울 때, 건강 관련 고민과
+ 불안에 대해 라인으로 부담 없이 상담을 받을 수 있습니다.
+ 전문의가 시간과 장소에 상관없이 답변해드립니다. +

+ +
+
+ +
+ + +
+ +
+ + +
+
+
+ +
+
+
+

커뮤니케이션 앱

+

+ 언제 어디서나 무료로 메시지를 보내고, 깨끗한 음질로 24시간 자유롭게 무료 통화가
+ 가능한 새로운 커뮤니케이션 앱입니다. +

+
+ +
+
+ +
+ 기업 지원 +
+ +
+
+
+

서비스

+

일부 서비스는 특정 국가에서만 사용 가능합니다.

+
+
+ +
+
+
+ +

LINE

+

사람, 정보, 서비스를 연결하는 커뮤니케이션 앱

+
+
more_horiz
+ +
+
+
+ +

오픈챗

+

같은 관심사를 가진 친구들과 즐겁게 대화해요

+
+
more_horiz
+ +
+
+
+ +

라인 망가

+

인기 있는 최신 만화를 마음껏 감상해요

+
+
more_horiz
+ +
+
+
+ +

라인 뮤직

+

최신 음악 트렌드를 만나보세요!

+
+
more_horiz
+ +
+
+
+ +

라인 라이브

+

내가 꿈꾸던 라이브 스트리밍 앱

+
+
more_horiz
+ +
+
+
+ +

라인 라이브 뷰잉

+

내가 꿈꾸던 라이브 스트리밍 앱

+
+
more_horiz
+ +
+
+
+ +

라인 운세

+

매일 유명한 역술인과 만날 수 있는 운세 앱

+
+
more_horiz
+ +
+
+
+ +

라인 레코즈

+

스트리밍 시대의 디지털 레이블

+
+
more_horiz
+ +
+
+
+ +

Charmmy

+

여성의 고민에 답하는 미디어

+
+
more_horiz
+ +
+
+
+ +

라인 포인트 클럽

+

실속있는 혜택을 받을 수 있는 라인 맴버십 프로그램

+
+
more_horiz
+ +
+
+
+ +

라인 아르바이트

+

라인으로 원하는 아르바이트를 찾아보세요!

+
+
more_horiz
+ +
+
+
+ +

라인 쇼핑

+

실속 있는 쇼핑

+
+
more_horiz
+ +
+
+
+ +

라인프렌즈 스토어

+

라인프렌즈 공식 브랜드 스토어

+
+
more_horiz
+ +
+
+
+ +

라인 플라이어

+

쇼핑이 더욱 편리해지는 디지털 광고 전단지

+
+
more_horiz
+ +
+
+
+ +

라인 기프트

+

선물로 소중한 마음을 보내보세요.

+
+
more_horiz
+ +
+
+
+ +

라인 페이

+

핀테크 및 스마트폰 월렛 서비스

+
+
more_horiz
+ +
+
+
+ +

라인 증권

+

소액부터 심플하게 즐기는 전문적인 증권 거래 서비스

+
+
more_horiz
+ +
+
+
+ +

라인 스코어

+

신용 점수 서비스를 통해 즐길 수 있는 더욱 풍요로운 일상

+
+
more_horiz
+ +
+
+
+ +

라인 포켓 머니

+

지금 바로 소액의 자금이 필요할 때

+
+
more_horiz
+ +
+
+
+ +

라인 FX

+

라인으로 시작하는 FX 마진거래 외환 차익거래

+
+
more_horiz
+ +
+
+
+ +

LINE BITMAX

+

라인에서 암호화폐 서비스를 시작해보세요.

+
+
more_horiz
+ +
+
+
+ +

라인 광고

+

라인 플랫폼에 간편하게 게시할 수 있는 온라인 광고 서비스

+
+
more_horiz
+ +
+
+
+ +

라인 광고 네트워크

+

라인의 다양한 사용자를 타겟하는 대규모 광고 서비스

+
+
more_horiz
+ +
+
+
+ +

Talk Head View

+

눈에 띄는 동영상 광고를 라인 대화 목록 최상단에 게시하는 광고 서비스

+
+
more_horiz
+ +
+
+
+ +

라인 세일즈 프로모션

+

라인을 활용한 판촉 특화형 솔루션

+
+
more_horiz
+ +
+
+
+ +

라인 공식 계정

+

라인 사용자에게 다이렉트로 정보를 전달할 수 있는 공식 계정

+
+
more_horiz
+ +
+
+
+ +

라인 포인트 AD

+

인센티브를 통해 사용자를 확보할 수 있는 서비스

+
+
more_horiz
+ +
+
+
+ +

라인 프로모션 스티커

+

라인 스티커를 활용하여 브랜드 인지도를 상승시키고 고객을 확보 할 수 있는 광고 서비스

+
+
more_horiz
+ +
+
+
+ +

라인 미니 앱

+

일상에 도움이 되는 다양한 서비스를 라인으로 제공

+
+
more_horiz
+ +
+
+
+ +

라인 리서치

+

일본 최대 규모의 리서치 플랫폼

+
+
more_horiz
+ +
+
+
+ +

라인 뉴스

+

뉴스부터 연예계 소식까지! 라인으로 지금 화제가 되고 있는 뉴스를 확인해보세요.

+
+
more_horiz
+ +
+
+
+ +

라인 HELLO BT21

+

BT21과 함께 즐기는 리얼 퍼즐 쾌감! 우주스타의 액션퍼즐게임!

+
+
more_horiz
+ +
+
+
+ +

라인 셰프

+

세상에서 가장 귀엽고, 맛있는 쿠킹 타이쿤 게임

+
+
more_horiz
+ +
+
+
+ +

라인 버블 2

+

두근두근 코니와 함께 하는 글로벌 1위 3매칭 슈팅 퍼즐게임

+
+
more_horiz
+ +
+
+
+ +

라인 포코포코

+

포코팡의 인기 캐릭터들이 등장하는 3매치 방식의 퍼즐 게임

+
+
more_horiz
+ +
+
+
+ +

라인 레인저스

+

샐리를 구출하라! 5천만 유저가 선택한 글로벌 No.1 디펜스 액션 RPG 게임

+
+
more_horiz
+ +
+
+
+ +

라인 디즈니 썸썸

+

디즈니 인형을 연결해서 모으는 퍼즐 게임

+
+
more_horiz
+ +
+
+
+ +

라인 플레이

+

나만의 개성 있는 아바타를 만들고 단 하나뿐인 내 공간을 꾸며보아요!

+
+
more_horiz
+ +
+
+
+ +

LINE 포코팡 타운

+

터치 퍼즐 게임을 즐기면서 마을을 만들어보자!

+
+
more_horiz
+ +
+
+
+ +

라인팝2

+

초보자부터 상급자까지 함게 즐길 수 있는 퍼즐 게임!

+
+
more_horiz
+ +
+
+
+ +

라인 포코팡

+

한붓 그리기 방식의 퍼즐 게임!

+
+
more_horiz
+ +
+
+
+ +

라인 퍼즐탄탄

+

귀여운 팬더가 등장하는 사천성 게임!

+
+
more_horiz
+ +
+
+
+ +

라인 버블2

+

라인 캐릭터와 함께 즐기는 신나는 버블 슈팅 게임!

+
+
more_horiz
+ +
+
+
+ +

라인 아이러브커피

+

카페 사장이 되어 다양하게 즐기는 게임

+
+
more_horiz
+ +
+
+
+ +

라인 브라운팜

+

브라운과 함께 유기능 농장을 만들어나가는 모바일 SNG게임

+
+
more_horiz
+ +
+
+
+ +

점프티 히어로즈

+

주간소년점프의 인기 캐릭터들이 총출동!

+
+
more_horiz
+ +
+
+
+
+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..0961f52e --- /dev/null +++ b/index.js @@ -0,0 +1,147 @@ +const magazine_next_btn = document.querySelector(".magazine_next"); +const news_next_btn = document.querySelector(".news_next"); +const vibe_next_btn = document.querySelector(".vibe_next"); +const pick_next_btn = document.querySelector(".pick_next"); + +const magazine_prev_btn = document.querySelector(".magazine_prev"); +const news_prev_btn = document.querySelector(".news_prev"); +const vibe_prev_btn = document.querySelector(".vibe_prev"); +const pick_prev_btn = document.querySelector(".pick_prev"); + +const magazine_slider = document.querySelector(".magazine_slider"); +const news_slider = document.querySelector(".news_slider"); +const vibe_slider = document.querySelector(".vibe_slider"); +const pick_slider = document.querySelector(".pick_slider"); + +const magazine_images = document.querySelectorAll( + ".img_container_magazine img" +); +const news_images = document.querySelectorAll(".img_container_news img"); +const vibe_images = document.querySelectorAll(".img_container_vibe img"); +const pick_images = document.querySelectorAll(".img_container_pick img"); + +let magazine_index = 0; +let news_index = 0; +let vibe_index = 0; +let pick_index = 0; + +function showSlideMagazine(direction) { + let prevbtn = document.querySelector(".magazine_prev"); + if (direction === "next") { + console.log("next"); + magazine_slider.classList.remove("left"); + magazine_slider.classList.add("right"); + magazine_index++; + if (magazine_index === magazine_images.length) { + magazine_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + magazine_slider.classList.remove("right"); + magazine_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} +function showSlideNews(direction) { + let prevbtn = document.querySelector(".news_prev"); + if (direction === "next") { + console.log("next"); + news_slider.classList.remove("left"); + news_slider.classList.add("right"); + news_index++; + if (news_index === news_images.length) { + news_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + news_slider.classList.remove("right"); + news_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} +function showSlideVibe(direction) { + let prevbtn = document.querySelector(".vibe_prev"); + if (direction === "next") { + console.log("next"); + vibe_slider.classList.remove("left"); + vibe_slider.classList.add("right"); + vibe_index++; + if (vibe_index === vibe_images.length) { + vibe_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + vibe_slider.classList.remove("right"); + vibe_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} +function showSlidePick(direction) { + let prevbtn = document.querySelector(".pick_prev"); + if (direction === "next") { + console.log("next"); + pick_slider.classList.remove("left"); + pick_slider.classList.add("right"); + pick_index++; + if (pick_index === pick_images.length) { + pick_index = 0; + } + prevbtn.style.visibility = "visible"; + } else if (direction === "prev") { + prevbtn.style.visibility = "hidden"; + pick_slider.classList.remove("right"); + pick_slider.classList.add("left"); + index--; + if (index < 0) { + index = images.length - 1; + } + } +} + +magazine_next_btn.addEventListener("click", () => { + showSlideMagazine("next"); +}); +news_next_btn.addEventListener("click", () => { + showSlideNews("next"); +}); +vibe_next_btn.addEventListener("click", () => { + showSlideVibe("next"); +}); +pick_next_btn.addEventListener("click", () => { + showSlidePick("next"); +}); + +magazine_prev_btn.addEventListener("click", () => { + showSlideMagazine("prev"); +}); +news_prev_btn.addEventListener("click", () => { + showSlideNews("prev"); +}); +vibe_prev_btn.addEventListener("click", () => { + showSlideVibe("prev"); +}); +pick_prev_btn.addEventListener("click", () => { + showSlidePick("prev"); +}); + +document.querySelector(".range").addEventListener("input", (event) => { + let gradient_value = 100 / event.target.attributes.max.value; + event.target.style.background = + "linear-gradient(to right, gray 0%, gray " + + gradient_value * event.target.value + + "%, #4b4b4b " + + gradient_value * event.target.value + + "%, #4b4b4b"; +}); diff --git a/main.css b/main.css new file mode 100644 index 00000000..8469ec7e --- /dev/null +++ b/main.css @@ -0,0 +1,856 @@ +/* + +COMMON + +*/ +@font-face { + font-family: "LINESeedKR"; + src: url(./WOFF/LINESeedKR-Bd.woff), format("woff"); + font-weight: 700; + font-style: bold; + font-display: swap; +} + +@font-face { + font-family: "LINESeedKR"; + src: url(./WOFF/LINESeedKR-Rg.woff), format("woff"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "LINESeedKR"; + src: url(./WOFF/LINESeedKR-Th.woff), format("woff"); + font-weight: 300; + font-style: light; + font-display: swap; +} + +body { + font-family: "LINESeedKR", sans-serif; + font-weight: 400; + line-height: 1.3; + color: #1e1e1e; +} + +img { + display: block; +} + +a { + text-decoration: none; + color: #1e1e1e; +} + +.inner { + width: 1200px; + margin: 0 auto; + position: relative; +} +/* 상황에 따라 감춰야 할 부분을 감추는 클래스입니다. */ +.hidden { + display: none; +} +/* 페이지 로딩 애니메이션 중 스크롤이 안 되게 하는 클래스입니다. */ +.no-scroll { + height: 100%; + overflow: hidden; +} + +.btn__icon { + width: 58px; + height: 58px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #fff; + border-radius: 4px; + margin-right: 4px; +} +.btn__icon img { + width: 24px; + height: 24px; +} +.btn__icon:hover { + background-color: #52b24d; +} +.btn__icon .material-symbols-outlined { + color: #fff; + display: none; +} +.btn__icon:hover .material-symbols-outlined { + color: #fff; + display: block; +} +.btn__icon:hover img { + color: #fff; + display: none; +} + +.btn__icon--gray { + width: 58px; + height: 58px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #dedede; + border-radius: 4px; + margin-right: 4px; +} +.btn__icon--gray img { + width: 24px; + height: 24px; +} +.btn__icon--gray:hover { + background-color: #52b24d; +} +.btn__icon--gray .material-symbols-outlined { + color: #fff; + display: none; +} +.btn__icon--gray:hover .material-symbols-outlined { + color: #fff; + display: block; +} +.btn__icon--gray:hover img { + color: #fff; + display: none; +} + +.btn__icon-text--gray { + width: 145px; + height: 58px; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #dedede; + border-radius: 4px; + margin-right: 4px; +} +.btn__icon-text--gray:hover { + background-color: #52b24d; +} +.btn__icon-text--gray .material-symbols-outlined { + width: 24px; + height: 24px; +} +.btn__icon-text--gray:hover .material-symbols-outlined { + color: #fff; +} +.btn__icon-text--gray > span { + font-size: 14px; + font-weight: 700; + margin-left: 8px; +} +.btn__icon-text--gray:hover > span { + color: #fff; +} +/* + +SCREENHIDER + +*/ +.screen-hider { + position: absolute; + box-sizing: border-box; + width: 100%; + height: 800px; + border: 0px solid #fff; +} +.screen-hider__contents { + position: absolute; + left: 0; + right: 0; + bottom: -20px; + margin: 0 auto; + text-align: center; + opacity: 0; +} +.screen-hider__contents h1 { + font-family: "SF pro Display", Arial, sans-serif; + font-size: 70px; + font-weight: 800; + margin-bottom: 20px; +} +.screen-hider__contents p { + font-size: 20px; + color: #616161; + line-height: 32px; +} +/* + +ANIMATION AFTER DOM LOADED +페이지 로딩 애니메이션용 CSS입니다. + +*/ +.dom-loaded__bg { + position: fixed; + width: 100%; + height: 100%; + border: 600px solid #fff; + box-sizing: border-box; + z-index: 10; +} +.dom-loaded__logo { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + width: 800px; + height: 200px; + z-index: 100; + display: flex; + overflow: hidden; +} +.dom-loaded__logo__green { + width: 100%; + height: 100%; + background-color: #52b24d; + display: flex; + justify-content: flex-end; + align-items: flex-end; + flex-shrink: 3; +} +.dom-loaded__logo__trans { + height: 100%; +} +.dom-loaded__logo__green > div { + font-family: "SF pro Display", Arial, sans-serif; + font-weight: 700; + font-size: 56px; + color: #fff; + margin: 0 32px 12px 0; +} + +/* + +HEADER +헤더영역입니다. + +*/ +header { + height: 75px; + display: flex; + padding: 0 30px; + position: fixed; + width: 100%; + top: -100px; + align-items: center; + box-sizing: border-box; + background-color: rgba(255, 255, 255, 0.95); + z-index: 5; +} + +header .header__logo img { + width: 44px; + opacity: 1; +} + +header .header__tab ul { + width: fit-content; + position: absolute; + left: 0; + right: 0; + top: 28px; + margin: 0 auto; + display: flex; +} + +header .header__tab ul li { + margin-left: 80px; + font-size: 16px; + font-weight: 700; +} + +.tab--selected { + padding-bottom: 4px; + border-bottom: 4px solid #1e1e1e; +} + +header .header__tab ul li:first-child { + margin-left: 0px; + font-family: "SF pro Display", Arial, sans-serif; + font-weight: 700; +} + +header .header__language { + position: absolute; + right: 30px; +} + +header .header__language a { + display: flex; + justify-content: center; + align-items: center; +} +header .header__language img { + width: 18px; +} +header .header__language span { + font-family: "SF pro Display", Arial, sans-serif; + font-weight: 900; + font-size: 15px; + margin-left: 8px; +} +header .header__language .material-symbols-outlined { + font-size: 14px; + width: 8px; +} +header .header__language .header__language__tooltip { + position: absolute; + top: 30px; + left: 0; + width: 69px; + background-color: #fff; + border: 1px solid rgb(153, 153, 153); + display: flex; + flex-direction: column; + align-items: center; + display: none; +} +header .header__language:focus-within .header__language__tooltip { + display: block; +} +header .header__language .header__language__tooltip li { + font-size: 15px; + font-family: "SF pro Display", Arial, sans-serif; + font-weight: 800; + width: inherit; + text-align: center; + margin: 6px 0; + color: rgb(153, 153, 153); +} +header .header__language .header__language__tooltip li:first-child { + margin-top: 12px; +} +header .header__language .header__language__tooltip li:last-child { + margin-bottom: 12px; +} +header .header__language .header__language__tooltip li:nth-child(3) { + color: #1e1e1e; +} +/* + +BANNER + +*/ +.banner { + width: 100%; + position: absolute; + overflow: hidden; +} +.banner > img { + width: 100%; + position: absolute; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + z-index: -1; + scale: 1.2; +} +.banner::before { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 800px; + background-color: rgba(0, 0, 0, 0.2); +} +.banner > .inner { + height: 800px; + width: 1156px; +} +.banner .banner__contents .banner__contents__text { + position: absolute; + top: 274px; + font-size: 40px; + color: #fff; +} +.banner .banner__contents .banner__contents__text h1 { + font-family: "SF pro Display", Arial, sans-serif; + letter-spacing: 3px; + font-size: 140px; + font-weight: 800; +} +.banner .banner__contents .banner__contents__text span { + margin-left: 6px; +} +.banner .banner__contents .banner__contents__links { + position: absolute; + bottom: 128px; + margin-left: 8px; +} +.banner .banner__contents .banner__contents__links .banner__contents__links__title { + display: flex; + align-items: center; + color: #fff; + font-weight: 700; + font-size: 14px; + margin-bottom: 16px; +} +.banner .banner__contents .banner__contents__links .banner__contents__links__title img { + width: 24px; + margin-right: 8px; +} +.banner .banner__contents .banner__contents__links .banner__contents__links__button-group { + display: flex; +} +.banner .banner__contents .banner__contents__floating { + width: 100px; + height: 120px; + position: absolute; + right: 0; + left: 0; + bottom: 0; + margin: 0 auto; + text-align: center; +} +.banner .banner__contents .banner__contents__floating > span { + display: block; + height: 30px; + width: 100%; + font-size: 12px; + color: white; +} +.banner .banner__contents .banner__contents__floating > .floating-bar1 { + width: 1px; + height: 0; + left: 0; + right: 0; + margin: 0 auto; +} +.banner .banner__contents .banner__contents__floating > .floating-bar2 { + width: 1px; + height: 40px; + background-color: #fff; + left: 0; + right: 0; + margin: 0 auto; +} + +/* + +BANNER-WRAPPER +배너가 축소되고 나서 보이는 영역입니다. + +*/ +.wrapper { + position: relative; + height: 1000px; + width: auto; + background-color: #fff; + z-index: -3; + /* background-color: orange; */ +} + +/* + +MAIN_PRODUCTS +배너 아래 주요 서비스들의 사진과 설명, 링크가 있는 곳입니다. + +*/ +.main-products { + position: relative; +} +.main-products .inner::before { + content: ""; + position: absolute; + top: -140px; + width: 0px; + border: 1px dashed #dedede; + height: 3060px; + left: 0; + right: 0; + margin: auto; + z-index: -2; +} +.service-icon { + width: 80px; + height: 80px; + border: 1px solid #dedede; + border-radius: 16px; + background-color: white; +} +.main-products .main-products__service::before { + content: ""; + width: 8px; + height: 8px; + border: 1px solid #dedede; + background-color: #fff; + border-radius: 50%; + position: absolute; + top: -140px; + left: 0; + right: 0; + margin: auto; + z-index: 4; +} +.main-products .main-products__service { + display: flex; + height: 560px; + position: relative; + margin-top: 200px; + margin-bottom: 85px; +} +.main-products .main-products__service.reversed { + justify-content: flex-end; +} +.main-products .main-products__service article { + margin-left: 40px; + width: 520px; + height: 424px; +} +.main-products .main-products__service article h3 { + margin-top: 24px; + font-size: 48px; + font-family: "SF pro Display", Arial, sans-serif; + font-weight: 700; +} +.main-products .main-products__service article h4 { + margin-top: 20px; + font-size: 18px; + font-weight: 500; + color: #07b53b; +} +.main-products .main-products__service article p { + margin: 8px 0 60px; +} +.main-products__service > img { + width: 880px; + position: absolute; + top: -50px; + right: -130px; +} +.main-products__service.reversed > img { + width: 880px; + position: absolute; + z-index: -1; + top: -50px; + left: -130px; +} +.main-products__service:last-child::after { + content: ""; + width: 16px; + height: 16px; + border: 1px solid #dedede; + background-color: #fff; + border-radius: 50%; + position: absolute; + bottom: -95px; + left: 0; + right: 0; + margin: auto; +} +.main-products__service .button-list { + display: flex; +} +/* + +COMMUNICATION-APP +커뮤니케이션 앱을 2행 3열로 보여주는 곳입니다. + +*/ +.communication-app { + background-color: #f7f8f9; + padding-top: 180px; +} +.communication-app .inner { + height: 1150px; +} +.communication-app .communication-app__headline { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.communication-app .communication-app__headline h1 { + font-size: 60px; + font-weight: 700; + margin-bottom: 12px; +} +.communication-app .communication-app__headline p { + text-align: center; + font-size: 20px; + line-height: 32px; + color: rbg(97, 97, 97); + margin-bottom: 70px; + color: rgb(97, 97, 97); +} +.communication-app .communication-app__contents-list { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.communication-app .communication-app__contents-list .contents-list-content-item { + display: flex; + flex-direction: column; + align-items: center; + width: 360px; + height: 390px; + margin: 0 30px 36px 0px; +} +.communication-app .communication-app__contents-list .contents-list-content-item img { + width: 320px; +} +.communication-app .communication-app__contents-list .contents-list-content-item h3 { + font-size: 24px; + font-weight: 800; + margin-top: 36px; +} +.communication-app .communication-app__contents-list .contents-list-content-item p { + text-align: center; + margin-top: 12px; + font-size: 14px; + line-height: 22.4px; + color: rgb(97, 97, 97); +} + +/* + +SUPPORT +기업 지원 부분입니다. + +*/ +.support { + height: 320px; + width: 100%; + position: relative; + background-image: url("./images/support.png"); + background-repeat: no-repeat; + background-position: center; + background-size: cover; + display: flex; + justify-content: center; + align-items: center; +} +.support a { + height: 100%; + width: 100%; + font-size: 46px; + font-weight: 700; + color: #fff; + text-align: center; + line-height: 320px; +} + +/* + +SERVICE +서비스들을 한 번에 볼 수 있는 영역입니다. + +*/ +.services { + background-color: #f7f8f9; + padding-top: 180px; + width: 100%; + height: auto; + padding-bottom: 180px; +} +.services .inner { + width: 1250px; +} +.services__headline { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.services__headline h1 { + font-size: 60px; + font-weight: 700; + margin-bottom: 12px; +} +.services__headline p { + text-align: center; + font-size: 20px; + line-height: 32px; + color: rbg(97, 97, 97); + margin-bottom: 70px; + color: rgb(97, 97, 97); + font-weight: 500; +} +.services__list { + display: flex; + height: inherit; +} +.services__navigator { + position: sticky; + top: 200px; + width: 300px; + height: 470px; + margin-right: 10px; +} +.btn-category { + margin-left: 40px; + width: 104px; + height: 36px; + border: 1px solid #dedede; + border-radius: 18px; + margin-bottom: 16px; + color: rgb(97, 97, 97); + display: flex; + justify-content: center; + align-items: center; + font-size: 14px; + font-weight: 700; +} +.selected { + background-color: #07b53b; + color: #ffffff; +} +.services__list__items-area { + display: flex; + flex-wrap: wrap; + width: 940px; +} +.services__list__items-area .services__item-cell { + position: relative; + width: 270px; + height: 340px; + background-color: #fff; + border-radius: 4px; + margin: 0 40px 40px 0; + box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1); + overflow: hidden; +} +.overlayed { + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + opacity: 0; + flex-direction: column; + justify-content: center; + align-items: center; + top: 0; + left: 0; + transition: all 0.4s; +} +.services__item-cell:hover .overlayed { + opacity: 1; +} +.overlayed .btn__icon-text--gray { + border: 0.5px solid #fff; + margin-bottom: 16px; + height: 48px; + display: flex; + color: #fff; +} +.services__list__items-area .services__item-cell .upper { + margin: 30px 0 0 35px; +} +.services__list__items-area .services__item-cell .upper img { + width: 70px; + height: 70px; + margin-bottom: 16px; + border: 1px solid #dedede; + border-radius: 16px; +} +.services__list__items-area .services__item-cell .upper h3 { + font-size: 22px; + font-family: "LINESeedKR", sans-serif; + font-weight: 800; + margin-bottom: 8px; +} +.services__list__items-area .services__item-cell .upper p { + width: 160px; + word-break: keep-all; + font-size: 14px; + line-height: 1.429; + color: #616161; +} +.services__list__items-area .services__item-cell > .material-symbols-outlined { + position: absolute; + font-size: 32px; + font-weight: 700; + bottom: 16px; + left: 30px; + color: #dedede; +} +/* + +FOOTER +푸터 영역입니다. + +*/ +footer .inner { + width: 1100px; +} +.footer__products { + height: 100px; + display: flex; + align-items: center; + border-bottom: 1px solid #dedede; +} +.footer__products img { + width: 40px; +} +.footer__product-list { + margin-left: 24px; + display: flex; +} +.footer__product-item { + display: flex; + align-items: center; + margin: 0 14px 0 0; + height: 20px; + font-size: 13px; +} +.footer__product-item img { + width: 18px; + margin-right: 4px; + position: relative; + bottom: 2px; +} +.footer__product-item::after { + display: block; + content: ""; + width: 1px; + height: 12px; + margin-left: 8px; + background-color: #dedede; +} +.footer__product-item:last-child::after { + display: none; +} +.footer__policies { + display: flex; + height: 100px; + align-items: center; + font-size: 13px; +} +.footer__policies .footer__policies-option { + display: flex; + font-weight: 500; + margin-left: 16px; +} +.footer__policies-option__policy { + display: flex; + align-items: center; +} +.footer__policies-option__policy::after { + content: ""; + display: block; + width: 1px; + height: 8px; + background-color: #dedede; + margin: 0 16px; +} +.footer__policies-option__policy:last-child::after { + display: none; +} +.footer__policies-option__images { + position: absolute; + display: flex; + right: 0; +} +.footer__policies-option__images img { + height: 24px; + margin-left: 12px; +} diff --git a/main.js b/main.js new file mode 100644 index 00000000..0043ec71 --- /dev/null +++ b/main.js @@ -0,0 +1,223 @@ +/* + +배너 자동재생 슬라이드 애니메이션 + +*/ + +const bgEls = gsap.utils.toArray(".banner > img"); //배너 이미지 요소들 + +function fadeInOut() { + gsap.set(bgEls[1], { opacity: 0, scale: 1.5 }); + gsap.to(bgEls[0], { duration: 5, opacity: 0, scale: 1.2, onComplete: fadeIn }); //onComplete로 fadeIn 함수 호출 + gsap.to(bgEls[1], { duration: 6, opacity: 1, scale: 1.2 }); +} + +function fadeIn() { + gsap.set(bgEls[0], { opacity: 1, scale: 1.5 }); + gsap.to(bgEls[1], { duration: 5, opacity: 0, scale: 1.2, onComplete: fadeInOut }); //onComplete로 fadeInOut 함수 호출 (반복) + gsap.to(bgEls[0], { duration: 6, opacity: 1, scale: 1.2 }); +} + +fadeInOut(); + +/* + +웹페이지 부팅 시 로딩 애니메이션 + +*/ + +document.addEventListener("DOMContentLoaded", function () { + //DOM이 자바스크립트 파일을 다 읽는 이벤트를 기점으로 시작합니다. + const myHeader = document.querySelector("header"); //header 부분입니다. (위에서 아래 나오는 애니메이션 만들기 위해) + const myDom = document.querySelector(".dom-loaded"); //로딩 애니메이션을 위해 일시적으로 보이는 HTML요소들의 묶음의 이름입니다. + const myBg = document.querySelector(".dom-loaded__bg"); //로딩 애니메이션용 흰 배경입니다. + const myLogoTrans = document.querySelector(".dom-loaded__logo__trans"); //초록색 부분을 밀어내는 투명한 부분입니다. + const myLogoGreen = document.querySelector(".dom-loaded__logo__green"); //로딩 애니메이션용 초록색 부분입니다. + const myLogoGreenText = document.querySelector(".dom-loaded__logo__green > div"); //로딩 애니메이션의 텍스트 부분입니다(Life on LINE) + const duration = 1; // 애니메이션 지속 시간 (초) + const myBody = document.querySelector("body"); //HTML BODY태그입니다. + + myBody.classList.add("no-scroll"); // 애니메이션이 나오는 순간만큼은 스크롤을 못하도록 설정한 클래스를 추가해줍니다. + + setTimeout(() => { + myLogoGreenText.classList.add("hidden"); //먼저 로딩 애니메이션의 글씨가 사라집니다. + }, 800); + + gsap.to(myLogoTrans, { + //투명한 부분이 초록색 부분을 밀어내서 마치 초록색 부분이 사라지는 것처럼 보이게 하는 부분입니다. + duration: 2, + width: 2000, + delay: 0.6, + onStart: logoAnimation, //logoAnimation 함수도 호출합니다. + }); + + function logoAnimation() { + //배경과 초록색 부분이 사라지게 만드는 부분입니다. + gsap.to(myBg, { + duration: 1.5, + borderWidth: 0, //사실 로딩 애니메이션의 흰 배경부분은 border를 화면 안에 꽉채운건데 이걸 0으로 만들면서 가운데부터 보이게 만듭니다. + ease: Power1.easeInOut, + }); + gsap.to(myLogoGreen, { + duration: duration, + opacity: 0, //초록색 부분이 사라지게 만듭니다. + delay: 0.5, + onComplete: headerAnimation, //headerAnimation을 실행시킵니다. + }); + } + + function headerAnimation() { + //header가 나오게 하는 애니메이션입니다. + gsap.to(myHeader, { + duration: duration, + y: 100, + ease: "power2.out", + onComplete: () => { + //header애니메이션이 완료되면 애니메이션에 쓰인 HTML 요소들을 모두 display: none으로 만들어버립니다. + myDom.classList.add("hidden"); + myBody.classList.remove("no-scroll"); //스크롤 방지도 풉니다. + }, + }); + } +}); + +/* + +스크롤 유도 플로팅 애니메이션 (배너 중앙 하단부 애니메이션) + +*/ +const bannerFloatingEls = document.querySelector(".banner__contents__floating"); //배너 중앙 하단에 scroll이라고 둥둥 떠다니는 요소입니다. +const bannerFloatingSlidingEl1 = document.querySelector(".banner__contents__floating .floating-bar1"); //흰 바(bar)를 밀어내는 투명 바(bar)입니다. +const bannerFloatingSlidingEl2 = document.querySelector(".banner__contents__floating .floating-bar2"); //밀어내지는 흰 바(bar)입니다. + +gsap.to(bannerFloatingEls, 0.8, { + y: 6, //6px씩 둥둥 위아래로 움직입니다. + repeat: -1, //무한 반복합니다. + yoyo: true, + ease: Power1.easeInOut, +}); + +function swipeOut() { + //투명한 바(bar)가 흰 바(bar)를 밀어냅니다. + gsap.to(bannerFloatingSlidingEl1, 0.6, { + height: 160, + ease: Power1.easeInOut, + onComplete: swipeIn, //완료되면 swipeIn을 호출합니다. + }); +} + +function swipeIn() { + //흰 바(bar)가 내려오는 애니메이션입니다 + gsap.set(bannerFloatingSlidingEl2, { height: 0 }); + gsap.set(bannerFloatingSlidingEl1, { height: 0 }); + gsap.to(bannerFloatingSlidingEl2, 0.6, { + height: 160, + ease: Power1.easeInOut, + onComplete: swipeOut, + }); +} +swipeIn(); //swipeIn-Out 체인(?)을 시작시킵니다. + +/* + +스크롤 관련 애니메이션 + - 배너 내리면 액자화되면서 줄어드는 애니메이션 + - 스크롤에 따라 헤더의 메뉴 포커스가 바뀌는 애니메이션(Life on LINE <-> 커뮤니케이션 앱 <-> 서비스) + +*/ + +const bannerContents = document.querySelector(".banner__contents"); // 배너의 글자 컨텐츠들을 얘기합니다. +const screenHider = document.querySelector(".screen-hider"); // 배너 부분을 가리는 액자 부분입니다. +const screenHiderContents = document.querySelector(".screen-hider__contents"); // 액자가 배너를 가리고 아래에 표출되는 텍스트입니다.(Life on LINE, 매신저 앱 그 이상의 ...) +const headerTab1 = document.querySelector(".header__tab__list1"); //헤더의 메뉴 1번 (Life on Line) +const headerTab2 = document.querySelector(".header__tab__list2"); //헤더의 메뉴 2번 (커뮤니케이션 앱) +const headerTab3 = document.querySelector(".header__tab__list3"); //헤더의 메뉴 3번 (서비스) + +window.addEventListener( + "scroll", + _.throttle(() => { + //스크롤 위치 0보다 커진다면 + if (window.scrollY > 0) { + gsap.to(screenHider, 0.3, { + //screenHider(흰 액자) border가 커지면서(흰 부분이 커지면서) 배너 이미지를 가둡니다. + borderWidth: 250, + }); + gsap.to(bannerContents, 0.1, { + // 배너의 글자들도 가려집니다. + opacity: 0, + }); + gsap.to(screenHiderContents, 0.3, { + //배너가 가려져서 나온 공백에 새로운 글자가 나옵니다. (life on line, 매신저 앱 그 이상의 ...) + opacity: 1, + display: "block", + y: -20, + }); + } else { + // 스크롤 위치 0이라면 + // screenHider는 다시 사라집니다. + gsap.to(screenHider, 0.3, { + borderWidth: 0, + }); + // 배너 텍스트가 보입니다. + gsap.to(bannerContents, 0.1, { + opacity: 1, + display: "block", + }); + gsap.to(screenHiderContents, 0.3, { + // 공백에 추가되었던 글씨도 사라집니다. + opacity: 0, + display: "none", + y: 0, + }); + } + + if (window.scrollY < 4073) { + // 스크롤 위치가 4073보다 아래면 'Life on LINE' 파트로 설정됩니다. + headerTab1.classList.add("tab--selected"); //1번만 활성화하고 나머지는 tab--selected 클래스를 뗍니다. + headerTab2.classList.remove("tab--selected"); + headerTab3.classList.remove("tab--selected"); + } else if (window.scrollY < 5780) { + // 스크롤 위치가 4073보단 크고 5780보다 아래면 '커뮤니케이션 앱' 파트로 설정됩니다. + headerTab2.classList.add("tab--selected"); //2번만 활성화하고 나머지는 tab--selected 클래스를 뗍니다. + headerTab1.classList.remove("tab--selected"); + headerTab3.classList.remove("tab--selected"); + } else { + // 스크롤 위치가 5780보다 위면 '서비스' 파트로 설정됩니다. + headerTab3.classList.add("tab--selected"); //3번만 활성화하고 나머지는 tab--selected 클래스를 뗍니다. + headerTab1.classList.remove("tab--selected"); + headerTab2.classList.remove("tab--selected"); + } + }, 300) +); + +/* + +서비스 파트 카테고리 기능 + - 서비스 파트에서 메누 선택에 따라 그에 맞는 서비스만 보이게 하는 카테고리 분류 기능 부분입니다. + +*/ + +const servicesNavEls = document.querySelectorAll(".services__navigator .btn-category"); //navigator 메뉴들의 요소 묶음입니다. +const servicesItemEls = document.querySelectorAll(".services__item-cell"); //서비스들 입니다. + +servicesNavEls.forEach((item) => item.addEventListener("click", selectCard)); //네비게이터 카테고리 메뉴들에 클릭 이벤트 리스너를 추가해줍니다. + +// 클릭이 발생하면 +function selectCard(event) { + window.scrollTo(0, 5780); // 일단 서비스 파트의 상단으로 올라갑니다. + servicesNavEls.forEach((navEls) => navEls.classList.remove("selected")); //다른 버튼의 selected 클래스를 모두 제거합니다. + event.target.classList.add("selected"); //이벤트 타겟이 된 버튼만 selected(활성화 버튼) 상태로 바꿉니다. + sortServices(event.target.id); // 타겟이 갖고 있던 아이디를 인자로 sortServices 함수를 실행시킵니다. +} + +function sortServices(className) { + // 모든 서비스 묶음들에서 + servicesItemEls.forEach((item) => { + // id와 같은 이름의 클래스를 포함하고 있는 요소는 + if (item.classList.contains(className)) { + item.classList.remove("hidden"); // hidden 클래스를 제거합니다. + } else { + item.classList.add("hidden"); //id와 같은 이름의 클래스가 없는 요소는 hidden 처리합니다. + } + }); +} diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 00000000..ab3a42af --- /dev/null +++ b/styles/header.css @@ -0,0 +1,162 @@ +.header { + width: 250px; + height: 100vh; + background-color: black; + position: fixed; + overflow: none; + flex-shrink: 0; +} +hr { + background: #1a1a1a; + width: 80%; + height: 1px; + border: 0; + margin: 0 auto; +} +.header_logo { + display: block; + color: white; + text-transform: uppercase; + font-family: "Cabin", sans-serif; + padding: 2rem 2rem; + cursor: pointer; +} +.header_logo * { + vertical-align: middle; +} + +.logo_naver { + font-weight: 800; +} +.logo_vibe { + font-weight: 800; + font-size: 30px; +} +.header_submenu { + overflow: scroll; + height: 65%; +} +.header_signin_area { + display: block; + color: white; + font-size: larger; + display: flex; + flex-direction: row; + align-items: center; + padding: 1rem 2.5rem; + cursor: pointer; +} + +.user_icon { + width: 20px; + height: 20px; +} +.login_txt { + margin: 0 10px 0 10px; +} +.header_member { + margin: 0 auto; +} +.member_p { + margin: 1.2rem 2.5rem; + font-size: 13px; +} +.member_button_area { + display: block; + cursor: pointer; + width: 80%; + height: 3rem; + border-radius: 0.5rem; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0 auto; + background: rgb(236, 0, 0); + background: linear-gradient( + 90deg, + rgba(236, 0, 0, 1) 0%, + rgba(244, 47, 201, 0.6321122198879552) 48%, + rgba(96, 0, 135, 1) 100% + ); +} +.member_icon { + width: 1.5rem; +} +.member_text { + font-weight: 800; + margin: 0 5px; +} +.header_search { + cursor: pointer; + border-radius: 5px; + margin: 0 auto; + padding: 1.5rem 2rem 1rem; + display: flex; + flex-direction: initial; + justify-content: center; + align-items: center; +} +.search_input { + width: 100%; + height: 3rem; + box-sizing: border-box; + background: #1d1d1d; + background-image: url("../assets/loupe.png"); + background-size: 1.2rem 1.2rem; + background-position: 10px center; + background-repeat: no-repeat; + padding-left: 40px; + border-radius: 5px; + border: none; +} +.search_icon { + width: 1.5rem; + height: 1.5rem; +} +.header_menu { + margin: 0 auto; + width: 80%; + font-size: 1.2rem; +} +.header_menu li > a { + padding: 0.6rem 0; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; +} +.header_menu li > a > span { + margin-left: 0.5rem; + color: gray; +} +.header_menu li > a > span:hover { + color: white; +} +.header_menu ul > hr { + width: 100%; + margin: 1rem auto; +} +.header_menu li:last-child { + margin-bottom: 100px; +} +.header_menu img { + width: 25px; + height: 25px; +} +.header_install { + border: 1px solid gray; + display: block; + width: 80%; + margin: 1rem auto; + padding: 1.1rem; + text-align: center; + font-size: large; + border-radius: 0.5rem; + cursor: pointer; + background-color: transparent; +} +.header_install:hover { + width: 80%; + border: 2px solid white; +} diff --git a/styles/index.css b/styles/index.css new file mode 100644 index 00000000..2d4d1f27 --- /dev/null +++ b/styles/index.css @@ -0,0 +1,16 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font: inherit; + color: white; + list-style: none; + text-decoration: none; +} +.body { + background-color: black; + width: 100vw; + height: 100vh; + display: flex; + flex-direction: row; +} diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 00000000..a46bad81 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,325 @@ +.main { + flex-shrink: 1; + margin-left: 250px; + width: 100%; + height: 100%; + border-left: 1px solid #1a1a1a; + min-width: 83%; +} + +.plus { + color: #808080; +} +.section_music_container { + width: 85%; + margin: 3rem auto; +} +.section_banner { + height: 20rem; + background-color: #3e4c54; + display: flex; +} +.banner_img { + width: 35rem; + height: 20rem; +} +.banner_img > img { + width: 100%; + height: 100%; + object-fit: fill; +} +.banner_text_area { + margin: 3rem; +} +.banner_text_area * { + display: block; +} +.banner_text_area img { + width: 5rem; +} +.banner_text { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 100%; +} +.banner_text_area h1 { + font-size: 2.2rem; + font-weight: bold; +} +.banner_text_area h1:hover { + text-decoration: underline; +} +.banner_text_area h4, +.banner_text_area h6 { + font-size: 1rem; + color: #cbccce; +} +.magazine_container, +.news_container, +.vibe_container, +.pick_container { + position: relative; +} +.text_container_magazine, +.text_container_news, +.text_container_vibe, +.text_container_pick { + display: flex; + justify-content: space-between; + margin: 3rem 0 1rem; +} +.text_container_magazine h2, +.text_container_news h2, +.text_container_vibe h2, +.text_container_pick h2 { + font-weight: 800; + text-transform: uppercase; + font-size: 1.5rem; +} + +.sub_text_magazine > span:hover, +.sub_text_news > span:hover, +.sub_text_vibe > span:hover, +.sub_text_pick > span:hover { + text-decoration: underline; +} +.sub_text_magazine > p, +.sub_text_news > p, +.sub_text_vibe > p, +.sub_text_pick > p { + font-size: 0.9rem; + color: gray; +} + +.img_container_magazine, +.img_container_news, +.img_container_vibe, +.img_container_pick { + overflow: hidden; +} +.magazine_slider, +.news_slider, +.vibe_slider, +.pick_slider { + display: flex; + gap: 1rem; + transition: transform 0.5s; +} + +/* 오른쪽으로 슬라이드 이동 */ +.magazine_slider.right, +.news_slider.right, +.vibe_slider.right, +.pick_slider.right { + transform: translateX(-101%); +} + +/* 왼쪽으로 슬라이드 이동 */ +.magazine_slider.left, +.pick_slider.left, +.vibe_slider.left, +.news_slider.left { + transform: translateX(0); +} + +.magazine_contents img, +.vibe_contents img, +.pick_contents img { + width: 16rem; + height: 16rem; +} +.magazine_next, +.news_next, +.vibe_next, +.pick_next { + position: absolute; + width: 3rem; + height: 3rem; + background-color: transparent; + background-position: center; + background-size: cover; + object-fit: fill; + border: none; + background-image: url("../assets/icon/right.png"); + top: 40%; + right: -2%; +} +.magazine_prev, +.news_prev, +.vibe_prev, +.pick_prev { + visibility: hidden; + position: absolute; + width: 3rem; + height: 3rem; + background-color: transparent; + background-position: center; + background-size: cover; + object-fit: fill; + border: none; + background-image: url("../assets/icon/left.png"); + top: 40%; + left: -2%; + visibility: hidden; +} + +.magazine_next, +.news_next, +.vibe_next, +.pick_next { +} +.news_contents img { + width: 16rem; + height: 10rem; +} + +.event_container { + width: 100%; + height: 18rem; + background: rgb(249, 59, 85); + background: linear-gradient( + 90deg, + rgba(249, 59, 85, 1) 0%, + rgba(191, 68, 168, 1) 50%, + rgba(130, 75, 249, 1) 100% + ); + margin: 3rem auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.event_container img { + width: 7.5rem; + height: 6rem; +} +.event_text_container { + display: flex; + flex-direction: column; + gap: 1rem; +} +.text_container { + text-align: center; +} +.event_container h3 { + font-size: 1.5rem; + font-weight: bold; +} +.event_container p { + font-size: 1rem; + color: #e2b0e0; +} +.event_btn_container { + display: flex; + gap: 0.5rem; +} +.event_appStore img, +.event_googlePlay img { + width: 10rem; + height: 2.8rem; +} +.promotion_container { + text-align: center; + margin: 6rem auto; +} +.promotion_text_container { + display: flex; + flex-direction: column; + gap: 1rem; + height: 12rem; +} +.promotion_text_container span { + font-size: 1.8rem; + font-weight: bold; +} +.promotion_text_container p { + font-size: 1; + color: #999999; +} +.promotion_image_container { + overflow: hidden; + margin: 0 auto; +} +.promotion_image_container img { + width: 100%; + height: 20rem; + object-fit: cover; +} +.footer { + width: 100%; + height: 33vh; + background-color: #111111; +} +.footer_container { + width: 85%; + margin: 3rem auto 0; + display: grid; + grid-template-columns: 1fr 7fr 2fr; + padding: 0.5rem 0; + align-items: center; +} +.footer a:hover, +.footer li:hover { + text-decoration: underline; + cursor: pointer; +} +.notice_title, +.naver_info span, +.naver_address span, +.naver_address a, +.terms_container a { + color: #666666; +} +.footer_container a, +.footer_notice_container { + font-size: 0.8rem; +} +.social_container { + display: flex; + justify-content: space-evenly; + flex-direction: row; +} +.facebook, +.instagram, +.naver { + width: 2rem; + height: 2rem; + border: none; + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + cursor: pointer; +} +.facebook { + background-image: url("../assets/social/facebook.png"); +} +.instagram { + background-image: url("../assets/social/instagram.png"); +} +.naver { + background-image: url("../assets/social/letter-n.png"); +} +.footer hr { + width: 100%; +} +.naver_info_container { + width: 85%; + margin: 1rem auto; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.naver_info, +.naver_address, +.terms_container a { + display: flex; + gap: 1rem; + font-size: 0.8rem; +} +.terms_container { + display: flex; + padding: 1rem 0; + gap: 1rem; +} diff --git a/styles/player.css b/styles/player.css new file mode 100644 index 00000000..81e7face --- /dev/null +++ b/styles/player.css @@ -0,0 +1,108 @@ +.player { + width: 100%; + height: 90px; + background-color: #191919; + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + flex-direction: row; + bottom: 0; +} +.player img { + width: 1.5rem; + height: 1.5rem; +} +.player_musicInfo_area { + display: flex; + align-items: center; +} +.musicInfo_icon_box { + padding: 1rem; + background-color: #2a2a2a; + display: flex; + justify-content: center; + align-items: center; + margin: 0 1rem 0 1.5rem; +} +.player_musicInfo_text { + height: 3rem; + display: flex; + flex-direction: column; + justify-content: space-around; +} +.musicInfo_text_first { + font-weight: bold; +} +.musicInfo_text_last { + color: gray; + font-size: small; +} +.player_btn_area { + width: 25%; + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; + overflow: hidden; +} +.player_btn_area button { + background-color: transparent; + border: none; +} +.player_btn_area .play_icon { + width: 2rem; + height: 2rem; +} +.play_btn { + width: 4rem; + height: 4rem; +} +.player_btn_area .play_btn:hover { + background-color: #2a2a2a; + border-radius: 100%; + width: 4rem; + height: 4rem; +} +.player_btn_area .music_btn { + transition: transform 0.3s ease; +} +.player_btn_area .music_btn:hover { + transform: scale(1.3); +} + +.player_sound_area { + width: 370px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + cursor: pointer; +} +.player_sound_area > span { + color: gray; + display: flex; +} +.playlist_btn { + background-color: transparent; + border: none; +} +.playlist_btn img { + width: 35px; + height: 35px; +} +.range { + width: 90%; + background: linear-gradient( + to right, + gray 0%, + gray 50%, + #4b4b4b 50%, + #4b4b4b 100% + ); + border-radius: 8px; + outline: none; + transition: background 450ms ease-in; + -webkit-appearance: none; + accent-color: #ffffff; +}