diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..74907df5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# Created by https://www.toptal.com/developers/gitignore/api/visualstudiocode +# Edit at https://www.toptal.com/developers/gitignore?templates=visualstudiocode + +### VisualStudioCode ### +.vscode/ +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +### VisualStudioCode Patch ### +# Ignore all local history of files +.history +.ionide + +# End of https://www.toptal.com/developers/gitignore/api/visualstudiocode \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index cc6a3b23..8b56466c 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,20 @@ -[참고 내용] +## 기획 의도 +- Spotify 멤버십 페이지를 클론코딩하기 +- flex와 grid를 사용해, css를 통한 웹 페이지 레이아웃에 대한 이해 키우기 -👀 자신이 원하는 사이트 레이아웃 클론 -원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요. -평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요. -과제 수행 및 리뷰 기간은 별도 공지를 참고하세요! +## 링크 +- 참고한 주소: https://www.spotify.com/kr-ko/premium/ +- 배포 주소: https://velvety-puppy-c1029b.netlify.app/ -과제 수행 및 제출 방법 +## 구성 +- header, nav, main, footer의 시맨틱 태그로 구성됨 +- style.css 파일을 통해, 공통적으로 사용되는 font-size, color, margin 등의 속성을 정의해 같은 css 속성을 태그마다 중복해서 입력하는 경우를 최소화함 -1. 현재 저장소를 로컬에 클론(Clone)합니다. -2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름) -3. 자신의 본명 브랜치에서 과제를 수행합니다. -4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름) -5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름) +## 회고 +- 처음부터 레이아웃에 대한 구조를 그려놓고 시작했어야 했는데, 막연히 시작하다 보니 원하는 속성이 제대로 적용되지 않아 계속 같은 작업을 반복하는 문제가 있었습니다. + - 이번 과제를 수행하면서, 웹 페이지를 보면서 어떤 레이아웃으로 구성되었는지 분별할 수 있는 능력을 키우게 되었습니다. + - 순수하게 CSS만으로 페이지를 구현할 의도로 JS를 사용하지 않았지만, 굳이 사용하지 않을 필요가 있었나 싶은 생각이 들었습니다.. -- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요! -- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요! -- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요! -- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요! - -필수 요구사항 - -- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! -- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! -- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! -- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. - -선택 요구사항 - -- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요. -- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요. -- 부분적으로 BEM 방법론을 도입해보세요. -- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!) -- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요) - -손쉬운 이미지 추출 방법 - -사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요. - -1. 원하는 사이트 접속 -2. Image Downloader 확장 프로그램 실행 -3. 다운로드 원하는 이미지 선택 -4. 서브 폴더 이름(Save to subfolder) 명시 -5. 다운로드! +## 비고 +- 과제 마감일까지는 동일한 웹 페이지였지만, 참고한 링크 페이지에서 현재 header 아랫 부분 배너가 변경되어있습니다... \ No newline at end of file diff --git a/assets/image/Spotify_Logo_CMYK_White.png b/assets/image/Spotify_Logo_CMYK_White.png new file mode 100644 index 00000000..fce40d8c Binary files /dev/null and b/assets/image/Spotify_Logo_CMYK_White.png differ diff --git a/assets/image/app-store-badge.svg b/assets/image/app-store-badge.svg new file mode 100644 index 00000000..667005c8 --- /dev/null +++ b/assets/image/app-store-badge.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/assets/image/facebook.png b/assets/image/facebook.png new file mode 100644 index 00000000..660d931a Binary files /dev/null and b/assets/image/facebook.png differ diff --git a/assets/image/google-play-store-badge.svg b/assets/image/google-play-store-badge.svg new file mode 100644 index 00000000..94574891 --- /dev/null +++ b/assets/image/google-play-store-badge.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/assets/image/hamburger.png b/assets/image/hamburger.png new file mode 100644 index 00000000..36d2e675 Binary files /dev/null and b/assets/image/hamburger.png differ diff --git a/assets/image/icons8-done.svg b/assets/image/icons8-done.svg new file mode 100644 index 00000000..cd2a78fa --- /dev/null +++ b/assets/image/icons8-done.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/image/instagram.png b/assets/image/instagram.png new file mode 100644 index 00000000..9f1103ab Binary files /dev/null and b/assets/image/instagram.png differ diff --git a/assets/image/register-banner-image.JPG b/assets/image/register-banner-image.JPG new file mode 100644 index 00000000..abbef507 Binary files /dev/null and b/assets/image/register-banner-image.JPG differ diff --git a/assets/image/twitter.png b/assets/image/twitter.png new file mode 100644 index 00000000..e51e26d2 Binary files /dev/null and b/assets/image/twitter.png differ diff --git a/footer.css b/footer.css new file mode 100644 index 00000000..ff717ed3 --- /dev/null +++ b/footer.css @@ -0,0 +1,280 @@ +footer { + padding: 80px 0 20px; + font-size: 16px; + font-weight: 400; +} + +@media (min-width: 992px) { + footer { + padding: 80px 0 50px; + } +} + +.footer { + width: 100%; + margin: 0 auto; +} + +@media (min-width: 768px) { + .footer { + width: 750px; + } +} + +@media (min-width: 992px) { + .footer { + display: flex; + flex-wrap: wrap; + width: 970px; + } +} + +@media (min-width: 1200px) { + .footer { + width: 1170px; + } +} + +.footer__logo { + display: block; + box-sizing: border-box; + padding: 0 15px; +} + +@media (min-width: 768px) { + .footer__logo { + width: 16.67%; + } +} + +@media (min-width: 992px) { + .footer__logo { + min-height: 346px; + flex: 0 0 auto; + } +} + +.footer__logo--image { + display: inline-block; + height: 27px; + width: 89px; + background-color: white; + filter: invert(100%); + margin: 0; +} + +@media (min-width: 992px) { + .footer__logo--image { + height: 40px; + width: 132px; + } +} + +.footer__logo--image > span { + width: 100%; + height: 100%; + font: 0/0 a; + display: inline-block; + border: 0; + text-shadow: none; +} + +.footer__info { + display: flex; + flex-direction: column; +} + +@media (min-width: 768px) { + .footer__info { + flex-direction: row; + } +} + +@media (min-width: 992px) { + .footer__info { + width: 50%; + flex: 0 0 auto; + } +} + +.footer__info > dl { + padding: 0 15px; + margin: 0; +} + +@media (min-width: 768px) { + .footer__info > dl { + flex: 1 0; + } +} + +.footer__info > dl > dt { + font-size: 12px; + font-weight: 900; + color: #919496; + line-height: 1.4; + letter-spacing: .08em; + text-transform: uppercase; + margin: 50px 0 22px; +} + +@media (min-width: 992px) { + .footer__info > dl > dt { + margin: 20px 0; + } +} + +.footer__info > dl > dd { + margin: 0; +} + +.footer__info > dl > dd > a { + color: white; + display: inline-block; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + text-decoration: none; + padding: 3px 0 15px; +} + +.footer__info > dl > dd > a:hover { + color: #1ED760; +} + +.footer__link { + margin: 120px 15px 15px; +} + +@media (min-width: 992px) { + .footer__link { + margin: 0 15px 0 auto; + } +} + +.footer__link > ul { + margin: 20px 0 0; + padding: 0; +} + +.footer__link > ul > li { + display: inline-block; + margin-right: 15px; +} + +.footer__link > ul > li > a { + display: inline-flex; + align-items: center; + justify-content: center; + overflow: hidden; + width: 44px; + height: 44px; + border-radius: 50%; + background-color: #222326; +} + +@media (min-width: 992px) { + .footer__link > ul > li > a { + width: 54px; + height: 54px; + color: white; + } +} + +.footer__link > ul > li > a > span { + display: block; + width: 24px; + height: 24px; +} + +.footer__link--instagram { + background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448' fill='%23222326'%3E%3Cpath d='M0 230.126v-.793c.016 55.974.294 63.853 1.344 87.03 3.733 81.349 48.87 126.56 130.293 130.293C155.55 447.739 163.165 448 224 448H0V230.126zm229.242-189.75c55.006.014 62.368.256 85.291 1.307 60.704 2.762 89.059 31.565 91.822 91.821 1.05 22.905 1.275 30.266 1.287 85.272v10.487c-.014 55.022-.255 62.365-1.287 85.27-2.782 60.2-31.062 89.059-91.822 91.822-23.159 1.06-30.399 1.297-87.005 1.306h-7.054c-56.572-.009-63.848-.245-86.989-1.306-60.853-2.782-89.058-31.715-91.821-91.84-1.05-22.905-1.292-30.249-1.306-85.271v-8.77c.01-56.572.263-63.83 1.306-86.989 2.781-60.237 31.061-89.058 91.821-91.821 22.923-1.032 30.268-1.274 85.273-1.287h10.484zm-5.242 68.6c-63.523 0-115.024 51.501-115.024 115.024S160.477 339.043 224 339.043 339.024 287.54 339.024 224c0-63.523-51.501-115.024-115.024-115.024zm0 40.357c41.235 0 74.667 33.432 74.667 74.667 0 41.253-33.432 74.667-74.667 74.667S149.333 265.253 149.333 224c0-41.235 33.432-74.667 74.667-74.667zM343.579 77.56c-14.859 0-26.899 12.04-26.899 26.88s12.04 26.88 26.899 26.88c14.84 0 26.861-12.04 26.861-26.88s-12.021-26.88-26.861-26.88zM448 224v224H224c60.835 0 68.47-.261 92.363-1.344 81.274-3.733 126.597-48.87 130.274-130.293C447.74 292.469 448 284.835 448 224zm-1.344-92.344c-3.659-81.275-48.85-126.56-130.275-130.293C293.187.294 285.307.016 229.333 0H448v224c0-60.835-.261-68.45-1.344-92.344zM0 0h218.667c-55.973.016-63.834.294-87.011 1.344C50.306 5.077 5.096 50.214 1.363 131.637.299 154.722.019 162.62 0 217.873V0z'/%3E%3C/svg%3E"), + currentColor +} + +.footer__link--twitter { + background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448' fill='%23222326'%3E%3Cpath d='M448 0v448H0V0h448zM299.75 64c-22.333 0-41.375 7.875-57.125 23.625S219 122.417 219 144.75c0 6 .667 12.167 2 18.5-33-1.667-63.958-9.958-92.875-24.875S74.667 103.583 54.5 78.75c-7.333 12.5-11 26.083-11 40.75 0 13.833 3.25 26.667 9.75 38.5 6.5 11.833 15.25 21.417 26.25 28.75-12.717-.49-24.637-3.77-35.76-9.841L43 176.5v1c0 19.5 6.125 36.625 18.375 51.375s27.708 24.042 46.375 27.875a83.54 83.54 0 01-21.25 2.75c-4.667 0-9.75-.417-15.25-1.25 5.167 16.167 14.667 29.458 28.5 39.875 13.833 10.417 29.5 15.792 47 16.125-29.333 23-62.75 34.5-100.25 34.5-7.167 0-13.667-.333-19.5-1C64.5 371.917 105.833 384 151 384c28.667 0 55.583-4.542 80.75-13.625s46.667-21.25 64.5-36.5 33.208-32.792 46.125-52.625c12.917-19.833 22.542-40.542 28.875-62.125 6.333-21.583 9.5-43.208 9.5-64.875 0-4.667-.083-8.167-.25-10.5 15.833-11.5 29.333-25.417 40.5-41.75-15.5 6.667-31 10.833-46.5 12.5C392 104 403.833 89.167 410 70c-16 9.5-33.083 16-51.25 19.5-16-17-35.667-25.5-59-25.5z'/%3E%3C/svg%3E"), + currentColor +} + +.footer__link--facebook { + background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 448' fill='%23222326'%3E%3Cpath d='M448 0v448H0V0h448zM276.877 16h-1.127c-28.833 0-51.917 8.542-69.25 25.625-17.16 16.912-25.826 40.645-25.997 71.197l-.003.928v54.5h-63.75v74h63.75V432H257V242.25h63.5l9.75-74H257V121c0-12 2.5-21 7.5-27 4.923-5.908 14.37-8.907 28.342-8.998L293.5 85h39.25V19c-13.085-1.938-31.336-2.938-54.754-2.997l-1.12-.003z'/%3E%3C/svg%3E"), + currentColor +} + +.footer__language { + display: flex; + justify-content: flex-end; + margin: 0 15px; +} + +@media (min-width: 992px) { + .footer__language { + width: 100%; + } +} + +.footer__language > a { + font-size: 12px; + padding: 1em; + display: flex; + flex-shrink: 0; + align-items: center; + white-space: nowrap; + text-decoration: none; + color: #919496 +} + +.footer__link > img { + width: 30px; + height: 30px; + background-color: white; +} + + +.footer__law { + display: flex; +} + +@media (min-width: 992px) { + .footer__law { + width: 100% + } +} + +.footer__law > ul { + margin: 0 45px 0 0; + padding: 0 0 0 15px; +} + +.footer__law > ul > li { + display: inline-block; + list-style: none; + line-height: normal; + letter-spacing: 0; + padding: 0; + margin-right: 24px; +} + +.footer__law > ul > li > div { + display: flex; +} + +.footer__law > ul > li > div > a { + display: flex; + flex-shrink: 0; + align-items: center; + white-space: nowrap; + text-decoration: none; + color: #919496; + font-size: 12px; + padding: 1em; +} + +.footer__law > span { + flex-shrink: 0; + color: #919496; + padding: 1em 0; + margin: 0 30px 0 auto; + font-size: 12px; +} \ No newline at end of file diff --git a/header.css b/header.css new file mode 100644 index 00000000..eec1e5df --- /dev/null +++ b/header.css @@ -0,0 +1,141 @@ +.container__banner { + display: flex; + justify-content: center; + background-color: #1D75DE; + color: #FFFFFF; +} + +.container__banner--inner_div { + width: 100%; + display: flex; + justify-content: space-between; + box-sizing: border-box; + align-items: center; + padding: 15px; +} + +@media (min-width: 768px) { + .container__banner--inner_div { + width: 750px; + } +} + +@media (min-width: 992px) { + .container__banner--inner_div { + width: 970px; + } +} + +@media (min-width: 1200px) { + .container__banner--inner_div { + width: 1170px; + } +} + +.container__banner--name { + text-decoration: underline; +} + +.container__banner--close { + cursor: pointer; + background: transparent; + border: 0; + padding: 0; +} + +header { + position: relative; + top: 0; + right: 0; + left: 0; + line-height: 1.5; + min-height: 54px; + background-color: black; +} + +.header__inner_container { + display: flex; + justify-content: space-between; + box-sizing: border-box; + margin: 0 auto; + padding: 0 15px; + max-width: 750px; + height: 54px; +} + +@media (min-width: 992px) { + .header__inner_container { + max-width: 970px; + height: 80px; + } +} + +@media (min-width: 1200px) { + .header__inner_container { + max-width: 1170px; + } +} + +.header__mobile_menu { + display: flex; + position: relative; +} + +.header__mobile_menu > button { + border: none; + padding: 0 0 1px 9px; + display: inline-block; + position: relative; + z-index: 2; +} + +.header__mobile_menu > button > span { + display: block; + height: 3px; + width: 22px; + transition: transform .2s; + border-radius: 1px; + background-color: white; +} + +.header__mobile_menu > button > span:nth-child(n+2) { + margin-top: 4px; +} + +@media (min-width: 992px) { + .header__mobile_menu { + display: none; + } +} + +@media (max-width: 992px) { + nav { + display: none; + } +} + +.header__logo { + margin-top: 13px; +} + +@media (min-width: 992px) { + .header__logo { + margin-top: 20px; + } +} + +.header__logo > a > img { + height: 27px; + width: 89px; +} + +@media (min-width: 992px) { + .header__logo > a > img { + height: 40px; + width: 132px; + } +} + +.header__image { + position: relative; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..65e43b71 --- /dev/null +++ b/index.html @@ -0,0 +1,434 @@ + + + + + + + Premium 멤버십 - Spotify (KR) + + + + + + + + + +
+
+
+ South Korea (English) + +
+
+
+
+ + +
+ + +
+
+
+
+
+
+
+
+
+

Spotify⁠ Premium 멤버가 되어보세요.⁠ 1개월⁠ 무료입니다.

+
+
+

매월 최소 10,900원입니다(부가세 별도). 언제든 해지 가능합니다.

+
+
+
+ +
+
+ +
+
+
+

이후에는 월정액 요금이 적용됩니다. 개인 요금제에만 적용되며, 아직 Premium에 가입하지 않았던 분들을 위한 것 입니다. 약관이 적용됩니다.

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

앱을 다운로드하세요

+
+
+

1대의 모바일 기기에서 7일 동안 무료로 Spotify Premium 멤버십을 이용해보세요. 결제 세부 정보는 필요하지 않습니다.

+
+
+ + +
+
+

약관이 적용됩니다. Premium을 이미 이용해 보셨거나 다른 기기로 이용하시려는 경우 이 프로모션을 이용할 수 없습니다.

+
+

7일 후에도 계속 Spotify 서비스를 이용하려면 Premium을 구독해야 합니다.

+
+
+
+
+
+
+
+
+
+

Spotify를 이용해야 하는 이유

+
+
+
    +
  • +
    +
    +

    새로운 음악 발견하기

    +

    8천만 개가 넘는 트랙을 즐겨보세요.

    +
    +
    • +
  • +
    +
    +

    나만의 맞춤 플레이리스트

    +

    음악 취향에 맞춰 만들었습니다.

    +
    +
    • +
  • +
    +
    +

    오프라인에서 감상

    +

    내 기기에 노래 다운로드.

    +
    +
    • +
  • +
    +
    +

    여러 기기에서 스트리밍

    +

    모바일, PC, 태블릿에서 음악을 들어보세요.

    +
    +
    • +
+
+
+
+
+
+

요금제 선택하기

+

휴대폰, 스피커 및 기타 기기에서 제한 없이 마음껏 들으세요.

+
+
+
+
    +
  • + 1개월 무료 +
    • +
+

개인

+

체험 기간 이후 매월 10,900원 정기결제(부가세 별도).

+

계정 1개

+
+
+
    +
  • +
    + +
    +

    무광고로 음악 감상하기

    +
    • +
  • +
    + +
    +

    다운로드하여 오프라인에서 감상

    +
    • +
  • +
    + +
    +

    나만의 맞춤 플레이리스트

    +
    • +
  • +
    + +
    +

    8천만 곡 감상 가능

    +
    • +
  • +
    + +
    +

    여러 디바이스에서 감상

    +
    • +
    +
    +
+
+ + + +
+
+

체험 기간 이후 매월 정기결제되고 이용 약관이 적용됩니다.
+ Premium을 이미 이용해 봤다면 참여할 수 없습니다.

+
+
+
    +
  • + 1개월 무료 +
    • +
+

듀오

+

매월 16,350원 정기결제(부가세 별도).

+

계정 2개

+
+
+ +
    +
  • +
    + +
    +

    Premium 별도 계정 2개

    +
    • +
  • +
    + +
    +

    무광고로 음악 감상하기

    +
    • +
  • +
    + +
    +

    다운로드하여 오프라인에서 감상

    +
    • +
  • +
    + +
    +

    나만의 맞춤 플레이리스트

    +
    • +
  • +
    + +
    +

    8천만 곡 감상 가능

    +
    • +
  • +
    + +
    +

    여러 디바이스에서 감상

    +
    • +
+
+ + + +
+
+

이용 약관이 적용됩니다. 아직 Premium 구독을 해본 적이 없는 + 사용자만 참여할 수 있습니다. 같은 주소지에 거주하는 두 사람을 위한 서비스입니다.

+
+ +
+

베이직

+

매월 7,900원(부가세 별도)

+

계정 1개

+
+
+
    +
  • +
    + +
    +

    무광고로 음악 감상하기

    +
    • +
  • +
    + +
    +

    나만의 맞춤 플레이리스트

    +
    • +
  • +
    + +
    +

    8천만 곡 감상 가능

    +
    • +
  • +
    + +
    +

    여러 디바이스에서 감상

    +
    • + +
+
+ + + +
+
+

체험 기간 이후 매월 정기결제되고 이용 약관이 적용됩니다.
+ Premium을 이미 이용해 봤다면 참여할 수 없습니다.

+
+
+
+
+
+
+
+

궁금한 점이 있으신가요?

+

답변을 드리겠습니다.

+
+
    +
  • + + +
    Spotify Premium이란 무엇인가요?
    + +     +

    Spotify Premium은 유료 멤버십 서비스입니다. 대한민국에서는 베이직, 개인 및 듀오 요금제로 Spotify Premium을 사용할 수 있습니다.

    +     +
    • +
  • + +
    Spotify Premium을 무료로 이용해볼 수 있나요?
    + +     +

    예. 아직 Premium을 이용해 보신 적이 없다면 1개의 모바일 폰에서 7일 동안 무료로 Spotify Premium을 이용하실 수 있습니다. 결제 세부 정보는 필요하지 않습니다. 7일 무료 체험 기간 이후에 개인 또는 듀오 요금제를 구독하면 1개월 동안 무료로 Premium 멤버십을 이용하실 수 있습니다.

    + +
    • +
  • + +
    7일간 무료로 Spotify Premium을 이용하려면 어떻게 해야 하나요?
    + +     +

    Spotify Premium에 가입한 다음 모바일 폰의 Spotify 앱을 통해서 7일간 무료로 체험해 보실 수 있습니다. 이 기간에는 모바일 폰 이외의 다른 기기에 이 혜택이 제공되지 않습니다.

    + +
    • +
  • + +
    내 프로모션 기간이 종료되기 전에 Spotify Premium을 해지할 수 있나요?
    + +     +

    예. 계정 페이지에서 언제든 해지 가능합니다.

    + +
    • +
  • + +
    Spotify에서 곡을 찾으려면 어떻게 해야 하나요?
    + +     +

    Spotify에서는 원하는 곡을 검색할 수 있는 음악 검색 기능을 쉽게 사용할 수 있습니다. iOS 또는 Android 앱에서도 노래가사검색이 지원됩니다.

    + +
    • +
+
+
+
+ +
+ + + + diff --git a/main.css b/main.css new file mode 100644 index 00000000..302035b3 --- /dev/null +++ b/main.css @@ -0,0 +1,806 @@ +.section__register--banner { + background-color: #ffcdd2; +} + +.section__register--banner article{ + display: flex; + flex-direction: column; + box-sizing: border-box; + height: auto; + margin: 0px auto; + padding-top: 0px; + padding-bottom: 0px; + padding-left: 15px; + padding-right: 15px; + min-height: 0px; + max-width: 100%; +} + +@media (min-width: 768px) { + .section__register--banner article { + width: 750px; + } +} + +@media (min-width: 992px) { + .section__register--banner article { + width: 970px; + } +} + +@media (min-width: 1200px) { + .section__register--banner article { + width: 1170px; + } +} + +.section__register--inner_container { + display: flex; + flex-grow: 1; + align-items: center; + flex-direction: column; +} + +@media (min-width: 1200px) { + .section__register--inner_container { + flex-direction: row; + } +} + +.section__register--text { + padding-top: 48px; + padding-bottom: 24px; + width: 100%; +} + +@media (min-width: 768px) { + .section__register--text { + padding-bottom: 24px; + } +} + +@media (min-width: 1200px) { + .section__register--text { + margin-right: 32px; + text-align: left; + padding-top: 72px; + padding-bottom: 40px; + } +} + +.section__register--text > div:nth-child(1) > h1 { + display: inline-block; + font-size: 24px; + box-sizing: border-box; + margin: 0px; + padding: 0px; + max-width: 100%; +} + +@media (min-width: 480px) { + .section__register--text > div:nth-child(1) > h1 { + font-size: 28px; + } +} + +@media (min-width: 768px) { + .section__register--text > div:nth-child(1) > h1 { + font-size: 40px; + } +} + +@media (min-width: 992px) { + .section__register--text > div:nth-child(1) > h1 { + width: auto; + } +} + +.section__register--text > div:nth-child(2) > h2 { + box-sizing: border-box; + margin-block: 0px; + display: inline-block; + width: 100%; + max-width: 100%; + font-size: 18px; + padding: 0px; + margin: 15px 0px 0px; + line-height: 1.5; +} + +@media (min-width: 480px) { + .section__register--text > div:nth-child(2) > h2 { + width: auto; + margin: 30px 0px; + } +} + +@media (min-width: 768px) { + .section__register--text > div:nth-child(2) > h2 { + font-size: 24px; + margin-bottom: 0px; + } +} + +.section__register--button { + display: block; +} + +@media (min-width: 768px) { + .section__register--button { + margin: 35px 0px 0px; + } +} + +@media (min-width: 768px) { + .section__register--button > div { + display: inline-block; + } +} + +.section__register--button > div:first-child { + margin-bottom: 10px; +} + +@media (min-width: 768px) { + .section__register--button > div:first-child { + margin-right: 8px; + margin-bottom: 0px; + } +} + +.section__register--button > div:last-child > button { + background-color: transparent; + border: 1px solid; +} + +.section__register--button > div > button { + width: 100%; + box-sizing: border-box; + font-size: 14px; + line-height: 20px; + border: 0px; + border-radius: 500px; + padding: 14px 32px; +} + +.section__register--text > div:last-child { + margin-top: 40px; + width: 100%; +} + +.section__register--text > div:last-child > p { + box-sizing: border-box; + margin-block: 0px; + display: inline-block; +} + +@media (min-width: 992px) { + .section__register--text > div:last-child > p { + max-width: 630px; + } +} + +.section__register--image { + width: 100%; + height: 100%; + max-width: 320px; + padding-bottom: 40px; +} + +@media (min-width: 992px) { + .section__register--image { + max-width: 400px; + } +} + +@media (min-width: 1200px) { + .section__register--image { + padding-bottom: 0px; + } +} + +.section__register--image > div { + background-image: url("https://i.scdn.co/image/ab678e040000ed3a15b8bd60628173a13eb8d7ae"); + background-position: center center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + width: 100%; + padding-top: 100%; +} + +.section__download--banner article { + box-sizing: border-box; + display: flex; + flex-direction: column; + margin: 0px auto; + padding-top: 0px; + padding-bottom: 0px; + height: auto; + min-height: 480px; +} + +@media (min-width: 768px) { + .section__download--banner article { + width: 750px; + padding-left: 15px; + padding-right: 15px; + } +} + +@media (min-width: 992px) { + .section__download--banner article { + width: 970px; + } +} + +@media (min-width: 1200px) { + .section__download--banner article { + width: 1170px; + } +} + +.section__download--banner article > div { + display: flex; + align-items: center; + flex-direction: column; + flex-grow: 1; +} + +@media (min-width: 1200px) { + .section__download--banner article > div { + flex-direction: row; + } +} + +.section__download--text { + padding-top: 48px; + padding-bottom: 48px; + width: 100%; + text-align: center; +} + +@media (min-width: 768px) { + .section__download--text { + padding-bottom: 72px; + } +} + +@media (min-width: 1200px) { + .section__download--text { + padding-top: 72px; + padding-bottom: 72px; + } +} + +.section__download--text > div:nth-child(1) > h1 { + font-size: 24px; + display: inline-block; + width: auto; + max-width: 100%; + margin: 0px; + padding: 0px; + font-weight: 900; +} + +@media (min-width: 480px) { + .section__download--text > div:nth-child(1) > h1 { + font-size: 28px; + } +} + +@media (min-width: 768px) { + .section__download--text > div:nth-child(1) > h1 { + font-size: 40px; + } +} + +.section__download--text > div:nth-child(2) > h2 { + font-size: 18px; + display: inline-block; + width: 100%; + max-width: 100%; + margin: 15px 0px 0px; + padding: 0px; +} + +@media (min-width: 480px) { + .section__download--text > div:nth-child(2) > h2 { + width: auto; + margin: 30px 0px; + } +} + +@media (min-width: 768px) { + .section__download--text > div:nth-child(2) > h2 { + font-size: 24px; + margin-bottom: 0px + } +} + +.section__download--image { + display: block; + margin: 20px 0px; +} + +@media (min-width: 768px) { + .section__download--image { + margin: 35px 0px 0px; + } +} + +.section__download--text > div:last-child { + margin-top: 40px; + width: 100%; +} + +.section__download--text > div:last-child > p { + display: inline-block; +} + +@media (min-width: 992px) { + .section__download--text > div:last-child > p { + max-width: 630px; + } +} + +.section__reason--banner { + margin: 0px auto; + max-width: 100%; + box-sizing: border-box; + padding: 35px 15px; +} + +@media (min-width: 768px) { + .section__reason--banner { + width: 750px; + padding: 75px 15px; + } +} + +@media (min-width: 992px) { + .section__reason--banner { + width: 970px; + } +} + +@media (min-width: 1200px) { + .section__reason--banner { + width: 1170px; + } +} + +.section__reason--text { + text-align: center; + font-size: 24px; + font-weight: 900; +} + +@media (min-width: 768px) { + .section__reason--text { + margin-bottom: 72px; + } + .section__reason--text > div > h1 { + font-size: 28px; + } +} + +@media (min-width: 1200px) { + .section__reason--text>div>h1 { + font-size: 40px; + } +} + +.section__reason--list { + padding: 0px; + margin: 0px; + list-style: none; +} + +@media (min-width: 768px) { + .section__reason--list { + display: flex; + flex-wrap: wrap; + } +} + +@media (min-width: 1200px) { + .section__reason--list { + flex-wrap: nowrap; + justify-content: space-between; + } +} + +.section__reason--list > li { + display: flex; + margin-bottom: 20px; +} + +@media (min-width: 768px) { + .section__reason--list > li { + flex-grow: 1; + width: 50%; + } +} + +@media (min-width: 1200px) { + .section__reason--list > li { + display: block; + width: 270px + } +} + +.section__reason--list > li > div:first-child { + background-position: center top; + margin-right: 20px; + flex-grow: 1; + width: 142px; + height: 142px; +} + +@media (min-width: 1200px) { + .section__reason--list > li > div:first-child { + display: block; + margin: 0px auto 40px; + } +} + +.section__reason--inner_img { + display: inline-block; + background-repeat: no-repeat; + background-size: contain; + background-position: center center; +} + +.section__reason--inner_img.first { + background-image: url("https://i.scdn.co/image/ab671c3d0000f430cd6c528745e510c5be63a012"); +} + +.section__reason--inner_img.second { + background-image: url("https://i.scdn.co/image/ab671c3d0000f4306998d3ffd58aad6da6afdf67"); +} + +.section__reason--inner_img.third { + background-image: url("https://i.scdn.co/image/ab671c3d0000f43009302fbaf6259b4c117c704f"); +} + +.section__reason--inner_img.fourth { + background-image: url("https://i.scdn.co/image/ab671c3d0000f4304884c3f94083925da17092d4"); +} + +.section__reason--inner_text { + display: inline-block; + width: 100%; + flex-grow: 1; + margin: 16px 0px; +} + +@media (min-width: 1200px) { + .section__reason--inner_text { + display: block; + text-align: center; + } +} + +section:nth-child(n + 4) { + background-color: #f8f8f8; +} + +.section__price--choice { + overflow-wrap: break-word; +} + +.section__price--choice article { + max-width: 100%; + box-sizing: border-box; + padding: 35px 15px; + margin: 0 auto; +} + +@media (min-width: 768px) { + .section__price--choice article { + width: 750px; + padding: 75px 15px; + } +} + +@media (min-width: 992px) { + .section__price--choice article { + width: 970px; + } +} + +@media (min-width: 1200px) { + .section__price--choice article { + width: 1170px; + } +} + +.section__price--text > h1 { + text-align: center; + margin: 0px; + padding: 0px; + font-size: 32px; +} + +@media (min-width: 1200px) { + .section__price--text > h1 { + font-size: 40px; + } +} + +.section__price--text > p { + text-align: center; + margin: 10px 0px; + padding: 0px; +} + +.section__price--list { + margin: 50px 0px 26px; +} + +@media (min-width: 1200px) { + .section__price--list { + display: grid; + grid-template-rows: repeat(4, auto); + grid-template-columns: repeat(3, 1fr); + grid-auto-flow: column; + justify-content: center; + } +} + +.section__price--list > #child { + background-color: white; + margin: 0 auto; + max-width: 400px; + width: auto; + padding: 0 20px; + +} + +@media (min-width: 1200px) { + .section__price--list > #child { + margin: 0px 16px 0px 0px; + padding: 0px 16px; + } +} + +.section__price--name { + position: relative; + border-radius: 10px 10px 0px 0px; + padding-top: 20px !important; + display: flex; + flex-direction: column; + align-items: flex-start; + box-shadow: rgb(255, 255, 255) 0px 8px 0px 0px, + rgba(0, 0, 0, 0.3) 0px 0px 8px; +} + +@media (min-width: 1200px) { + .section__price--name { + grid-row: 1/auto; + padding-top: 16px !important; + } +} + +.section__price--name > ul { + padding: 0px; + margin: 0px; +} + +.section__price--name > ul > li { + border-radius: 4px; + font-size: 14px; + padding: 4px 8px; + display: inline-block; + font-weight: 900; + margin: 0px 4px 10px 0px; + margin-block: 0px 10px; + color: white; + background-color: #2D77D0; +} + +.section__price--name > h2 { + box-sizing: border-box; + color: black; + font-weight: 900; + margin: 0px 0px 5px; + padding: 0px; +} + +.section__price--name > p { + display: block; + font-size: 16px; + font-weight: 400; + line-height: 22px; + margin: 0px 0px 2px; +} + +.section__price--name > p:last-of-type{ + margin-bottom: 20px; +} + +.section__price--name > hr { + align-self: stretch; + border-color: rgb(204, 204, 204); + margin: auto 0px 0px; +} + +.section__price--ul { + padding-top: 32px !important; + padding-bottom: 16px !important; + list-style: none; + margin-top: 0px; + box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 8px; +} + +@media (min-width: 1200px) { + .section__price--ul { + grid-row: 2/auto; + padding-top: 20px !important; + } +} + +.section__price--ul > li { + display: flex; + margin-bottom: 5px; +} + +.section__price--inner_div { + display: inline-block; + color: black; + padding-right: 10px; +} + +.section__price--ul > li > p { + line-height: 22px; + list-style: none; + margin: 0px; + padding: 0px; +} + +.section__price--button { + box-shadow: rgb(255, 255, 255) 0px -9px 0px 0px, + rgba(0, 0, 0, 0.3) 0px 0px 8px; + text-align: center; + padding-bottom: 14px !important; +} + +@media (min-width: 1200px) { + .section__price--button { + grid-row: 3/auto; + padding-bottom: 0px; + } +} + +.section__price--button > a > button { + box-sizing: border-box; + font-size: 14px; + line-height: 20px; + font-weight: 700; + display: inline-block; + inline-size: 100%; + padding: 14px 32px; + border: 0px; + border-radius: 500px; + cursor: pointer; + +} + +.section__price--small-text { + border-radius: 0px 0px 10px 10px; + box-shadow: rgb(255, 255, 255) 0px -9px 0px 0px, + rgba(0, 0, 0, 0.3) 0px 0px 8px; + padding-top: 4px !important; + padding-bottom: 20px !important; + margin-bottom: 16px !important; +} + +@media (min-width: 1200px) { + .section__price--small-text { + grid-row: 4/auto; + padding-top: 4px !important; + padding-bottom: 16px !important; + } +} + +.section__qna { + margin: 0px auto; + max-width: 100%; + box-sizing: border-box; + padding: 35px 15px; +} + +@media (min-width: 768px) { + .section__qna { + width: 750px; + padding: 75px 15px; + } +} + +@media (min-width: 992px) { + .section__qna { + width: 970px; + } +} + +@media (min-width: 1200px) { + .section__qna{ + width: 1170px; + } +} + +.section__qna--text { + text-align: center; + line-height: 1; +} + +@media (min-width: 768px) { + .section__qna--text { + margin-bottom: 72px; + width: auto; + } +} + +.section__qna--text > h1 { + box-sizing: border-box; + padding: 0px; + margin: 0; +} + +@media (min-width: 768px) { + .section__qna--text > h1 { + width: auto; + } +} + +@media (min-width: 768px) { + .section__qna--text > h2 { + font-size: 24px; + line-height: 30px; + margin-top: 15px + } +} + +.section__qna--list { + list-style: none; + margin: 0; + padding: 0; + background-color: white; +} + +.section__qna--list > li { + border-bottom: 3px solid #F8F8F8; +} + +.section__qna--summary { + cursor: pointer; + font-size: 18px; + font-weight: 900; + padding: 26px 28px; + margin-top: 2px; + position: relative; + list-style: none; + outline: none; +} + +.section__qna--summary > div { + display: inline-block; + vertical-align: middle; + padding-right: 10px; + width: calc(100% - 40px); + box-sizing: border-box; +} + +.section__qna--summary > svg { + transform: rotate(180deg); + vertical-align: middle; + width: 24px; + height: 24px; +} + +.section__qna--summary + p { + padding: 15px 32px 32px; + margin: 0px; + display: none; +} \ No newline at end of file diff --git a/nav.css b/nav.css new file mode 100644 index 00000000..1f5b8aca --- /dev/null +++ b/nav.css @@ -0,0 +1,114 @@ +/* .nav { + align-items: center; +} */ + +.header__mobile_nav { + display: none; +} + +@media (min-width: 992px) { + .header__inner_nav { + display: inline-block; + } +} + +.header__inner_nav--link { + display: inline; + margin: 0; + padding: 0; +} + +@media (min-width: 992px) { + .header__inner_nav--link { + display: inline-flex; + list-style: none; + } +} + +.header__inner_nav--link>li { + display: inline-block; + line-height: inherit; + letter-spacing: 0; +} + +.header__inner_nav--link>li>a { + text-decoration: none; + font-weight: 700; + color: white; + padding: 28px 17px; + display: block; +} + +.header__inner_nav--link>li:nth-last-child() > a { + padding-right: 0; +} + +.header__inner_nav--link>li>a:hover { + color: #1ED760; +} + +.header__mobile_nav { + display: none; + flex-direction: column; + justify-content: space-between; + width: 447px; + max-width: 100vw; + height: 100vh; + box-sizing: border-box; + position: fixed; + top: 0; + right: 0; + margin: 0; + padding: 38px; + border-width: 0; + background-color: black; +} + +.header__mobile_nav > ul{ + margin: 0; + padding: 0; + display: inline; + list-style: none; +} + +.header__mobile_nav > ul > li { + font-size: 16px; + line-height: inherit; + display: inline-block; +} + +@media (max-width: 991px) { + .header__mobile_nav > ul > li { + display: block; + margin: 0; + } +} + +.header__mobile_nav>ul>li>a { + padding: 28px 17px; + display: block; + line-height: 1; + font-size: 36px; + text-decoration: none; + color: white; + font-weight: 700; +} + +.header__mobile_nav>ul>li:nth-child(n+4) > a { + padding: 0 0 25px; + display: block; + line-height: 1; + font-size: 28px; + font-weight: 400; +} + +.header__mobile_nav > ul > li > a:hover { + color: #1ED760; +} + +@media (max-width: 991px) { + .header__mobile_nav > ul > li > a { + cursor: pointer; + padding: 0 0 25px; + } +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..9975f569 --- /dev/null +++ b/script.js @@ -0,0 +1,38 @@ +let head_banner = document.getElementsByClassName( + "container__banner--close white-text" +)[0]; + +head_banner.addEventListener("click", function () { + let parentNode = head_banner.parentNode.parentNode; + parentNode.classList.add("hidden"); +}); + +const mobile_menu = function () { + let header_mobile = document.getElementsByClassName("header__mobile_menu")[0]; + header_mobile.addEventListener("click", function () { + header_mobile.classList.toggle("active"); + let childElement = header_mobile.lastElementChild; + if ( + childElement.style.display === "none" || + childElement.style.display === "" + ) { + childElement.style.display = "flex"; + } else { + childElement.style.display = "none"; + } + console.log(childElement); + }); +}; + +let qna_toggle = document.querySelectorAll(".section__qna--toggle"); +qna_toggle.forEach((toggle) => { + toggle.addEventListener("click", () => { + toggle.classList.toggle("active"); + let qna_text = toggle.nextElementSibling; + if (toggle.classList.contains("active")) { + qna_text.style.display = "block"; + } else { + qna_text.style.display = "none"; + } + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 00000000..014e0e68 --- /dev/null +++ b/style.css @@ -0,0 +1,82 @@ +body { + margin: 0; +} + +.mb0 { + margin-bottom: 0; +} + +.mb15 { + margin-bottom: 15px; +} + +.xsmall-text { + font-size: 10px; +} + +.small-text { + font-size: 12px; +} + +.weight400 { + font-weight: 400; +} + +.weight700 { + font-weight: 700; +} + +.fs16 { + font-size: 16px; +} + +.fs18 { + font-size: 18px; +} + +.fs20 { + font-size: 20px; +} + +.fs24 { + font-size: 24px; +} + +.fs40 { + font-size: 40px; +} + +.thick { + font-weight: bold; +} + +.black { + background-color: black; +} + +.white { + background-color: white; +} + +.transparent { + background-color: transparent; +} + +.white-text { + color: white; +} + +.black-text { + color: black; +} + +.gray-text { + color: gray; +} + +.hidden { + width: auto; + height: auto; + z-index: -1; + position: absolute; +} \ No newline at end of file