[html/css] mission3 - spooootify

괴발·2022년 12월 27일

완성페이지로 이동

html

<!DOCTYPE html>
<html lang="kr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./main.css" type="text/css" />
  <script src="https://kit.fontawesome.com/f84198edf4.js" crossorigin="anonymous"></script>
  <title>-Spotify</title>
</head>
<body>
  <div class="header">
    <div class="h-img">
      <img src="https://noona-spotify.netlify.app/image/logo.png" alt="Spotify Logo" class="logo-image">
    </div>
    <div class="h-nav">
      <span> <a href="#" class="nav-hov premium">Premium</a></span>
      <span><a href="#" class="nav-hov support">Support</a></span>
      <span><a href="#" class="nav-hov download">Download</a></span>
      <span>|</span>
      <span><a href="#" class="nav-hov signup">Signup</a></span>
      <span><a href="#" class="nav-hov login">Login</a></span>
    </div>
  </div>

  <div class="main">
    <div class="m-container">
      <div class="title">
        <div class="m-title title-first">Listening is</div>
        <div class="m-title title-second">everything</div>
      </div>
      <div class="m-subtitle">Millions of songs and podcasts. No credit card needed.</div>
      <button class="m-btn">Get Spotify free</button>
    </div>
  </div>

  <div class="footer">
    <div class="container">
      <div class="top-box">
        <div class="left-box">
          <div class="f-logo">
            <img src="https://noona-spotify.netlify.app/image/logo.png" alt="Spotify Logo" class="logo-image">
          </div>
          <div class="f-column company">
            <span>COMPANY</span>
            <a href="#" class="nav-hov f-link about">About</a>
            <a href="#" class="nav-hov f-link jobs">Jobs</a>
            <a href="#" class="nav-hov f-link for-the-record">For the Record</a>
          </div>
          <div class="f-column communities">
            <span>COMMUNITIES</span>
            <a href="#" class="nav-hov f-link for-artists">For Artists</a>
            <a href="#" class="nav-hov f-link developers">Developers</a>
            <a href="#" class="nav-hov f-link advertising">Advertising</a>
            <a href="#" class="nav-hov f-link investors">Investors</a>
            <a href="#" class="nav-hov f-link vendors">Vendors</a>
          </div>
          <div class="f-column useful">
            <span>USEFUL LINK</span>
            <a href="#" class="nav-hov f-link support">Support</a>
            <a href="#" class="nav-hov f-link web-player">Web Player</a>
            <a href="#" class="nav-hov f-link free-mobile-app">Free Mobile App</a>
          </div>
        </div>
        <div class="right-box">
          <div class="f-circle">
            <i class="nav-hov fa-brands fa-instagram"></i>
          </div>
          <div class="f-circle">
            <i class="nav-hov fa-brands fa-twitter"></i>
          </div>
          <div class="f-circle">
            <i class="nav-hov fa-brands fa-facebook-f"></i>
          </div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="top-line">
          <!-- <div> </div> -->
          <i class="fa-solid fa-earth-americas">USA</i>
        </div>
        <div class="bottom-line">
          <div class="bottom-left">
            <a href="#" class="nav-hov legal">Legal</a>
            <a href="#" class="nav-hov privacy-center">Privacy Center</a>
            <a href="#" class="nav-hov privacy-policy">Privacy Policy</a>
            <a href="#" class="nav-hov cookies">Cookies</a>
            <a href="#" class="nav-hov about-ads">About Ads</a>
            <a href="#" class="nav-hov additional-CA">Additional CA Privacy Disclosures</a>
          </div>
          <div class="bottom-right">
            <i class="fa-regular fa-copyright"></i>
            <span>2023 Spotify AB</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

css

@import "reset.css";
body{
  font-family: spotify-circular, Helvetica, Arial, sans-serif;
  color: #fff;
}

.logo-image{
  width: 132px;
}

.nav-hov:hover{
  color: #1ed760;
}




.header{
  height: 80px;
  background-color: #000;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.h-nav>span{
  padding: 20px;
  font-weight: 700;
  font-size: 16px;
}




.main{
  height: 968px;
  width: 100%;
  background-color: rgb(41, 65, 171);
  background-image: url(https://www-growth.scdn.co/static/home/bursts.svg);
  background-size: 155%;
  background-position: 40% 0%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.m-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #1ed760;
}
.title{
  padding-bottom: 50px;
}
.m-title{
  font-size: 150px;
  font-weight: 700;
  position: relative;
  left: 200px;
}
.title-first{
  position: relative;
  left: -200px;
}
.m-subtitle{
  font-weight: 500;
  font-size: 19px;
  padding-bottom: 50px;
}
.m-btn{
  border: none;
  border-radius: 45px;
  width: 210px;
  height: 50px;
  background-color: #1ecd5b;
  color: rgb(41, 65, 171);
  font-weight: 600;
  font-size: 17px;
}
.m-btn:hover{
  border: none;
  border-radius: 45px;
  width: 210px;
  height: 50px;
  background-color: #30f776;
  color: rgb(41, 65, 171);
  font-weight: 600;
  font-size: 17px;
  transform: scale(1.05);
}




.footer{
  height: 530px;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  display: flex;
  flex-direction: column;
  padding: 70px 0;
  max-width: 1170px;
  width: 100%;
}
.top-box{
  height: 346px;
  display: flex;
  justify-content: space-between;
}
.left-box{
  display: flex;
}
.f-column{
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.f-column>span{
  color: rgb(189, 189, 189);
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0;
}
.f-link {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 20px;
}
.right-box{
  display: flex;
  justify-content: space-around;
}
.f-circle{
  background-color: #222322;
  border-radius: 100%;
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
}
.fa-brands{
  font-size: 30px;
}
.top-line{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
  font-size: 12px;
}
.bottom-line{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
}
.bottom-left>a{
  margin-right: 20px;
}

설명
display: flex; 와 justify-content: space-around 를 적용하고
a태그마다 hover 이벤트를 걸어줌.
header의 우측 a태그 모음 부분에서 "|" 해당 텍스트를 span으로 감싸고 flex-space-around를 적용함

main

설명
처음에는 BG의 이미지를 그냥 넣는 건 줄 알았는데
css background-image: url(adress) 로 이미지를 바로 적용할 수 있고,
background-size: 0px, 0%, 0em, 0rem... 으로 크기 조절이 가능하며,
background-position: x축 y축 으로 이미지의 이동이 가능하다.
이번에는 background-color를 주고 그 위에 png 이미지를 얹었다.

설명
"Listening is / everything" 이게 처음에는 한 줄을 wrap으로 감싸서 두 줄로 만든건 줄 알았는데 알고보니 걍 두 줄.
btn에 hover 줄 때, 그냥 냅다 width, height로 버튼을 키우니 위에 title 글씨가 움직여서 어떡하지 했는데
강의를 보니 transeform: scale(1.05) scale 배수로 표현하는 css가 있어서 아주 좋았다.

설명
flex 원없이 쓰게 해준다더니 증맬 엄청 사용했다. 딱 봐도 column 나오겠구나 싶었는데 많이 적용 시켜본 만큼 이해가 빨리 된 것 같다. 다만 고민은 flex 가 부모 요소에 적용하는 거다 보니 하위요소도 flex를 적용하고 싶으면 또 적여야 하는 경우도 생기는데 이게 과연 맞는 방향성인지 의구심이 든다. display:flex를 극혐하는 사람도 있던데 뭔가 별로인 부분이 있어서 그런건가 싶기도 하고, 쓰라고 만들어 놓은 기능인데 많이 쓰면 어떤가 싶기도 하고, 일단 코드량이 많아지면 별로인건 맞으니까 간단하게 적용하는 방법은 없나 고민도 된다.

설명
footer는 상부와 하부로 나누어 진행했다. 상부는 좌측에 a 태그 모음 부분에서 정렬은 헤매지 않았으나 margin과 padding에서 계속 고민이 되었다. margin을 주는 것과 padding을 주는 것의 차이는 알고 있으나 어떤 요소에 적용시킬 때 과연 어떤 걸 사용해야 좀 더 원하는 모양을 빠르게 도출 할 수 있는 흐름을 만들 수 있을까 고민이 되었다. margin-padding 모두 공간을 주는 건 맞지만 요소의 내부인가 외부인가의 차이가 다음 css 적용에 영향을 줄 수 있으니 말이다. 그걸로 적용하며 고민이 됐던 것 말고는 상부는 수월했다.
문제는 하부의 첫번째 줄. USA. 모범답안은 하부의 첫줄과 마지막줄을 따로 두었으나 나는 두개를 한번 더 div로 묶어두었다.
해당 그룹으로 인해 정렬 시 그룹화가 가능할 것이라 생각했으나, 무슨 이유인지 usa 첫 줄이 flex-end를 주었을 때 space-around 범위를 벗어나 정렬되었다. 문제 해결을 위해 flex를 다시 설정해보기도 하고, 하부 div를 제거해보기도 했다. 그러다가 display: flex는 '부모' 요소에 적용되는 것을 떠올려 상위 요소들에 flex를 만져보다가 footer 최상단 태그인 footer에 flex를 적용하기 그제야 usa가 제 자리를 찾았다. 가장 큰 태그에 적용했어야 범위가 지정되나보다. (+ width와 max-width도 설정해줌)

회고

이제 쫌 속도가 나고 미션을 보면 어떻게 할 지 생각하는게 재미있다.
전반적으로 구획을 나누는 것은 어렵지 않으나, 실제로 제작하는 과정에서 조율되는 부분들은 여러번 만들다 보면 자연스레 사고 범위 내로 들어올 거라 예상된다. 아 그리고 나는 html을 짜면서 class까지 한번에 만들어 놓고 거기에 맞춰 css를 적는 편인데 강사님은 '눈으로 구역 나누기'-'구역 하나씩 적으면서'-'css 바로 만들고,'-'그걸 html에 적용' 하는 순서던데 다음에 다시 만들어 볼 때는 해당 방식으로 한번 적어봐야 겠다. 지금 내 방식은 내가 전체적인 그림을 그린다는 점에서 좋지만 아무래도 사용할거라 생각해서 만들어둔 class명이 사용되지 않는 경우도 있어서 쓸데 없는 코드가 늘어나는데 문제는 내가 그걸 지우지도 않는다는 것....강사님의 방식으로 하면 필요한 것만 만들고 만든 건 바로 쓰니까 사용하지 않는 코드는 없을테지
내일은 반응형을 만든다고 했는데 너무너무너무너무 기대된다. PWA에 관심은 있는데 엄두가 안났었는데 반응형을 배우면 너무 좋을 것 같다.

괴발

괴발개발

이전 포스트

[html/css] mission 02 - gooogle 메인화면 그리기

다음 포스트

[html/css] mission3 - spooootify

HTML과 CSS

완성페이지로 이동

html

css

header

main

footer

회고

[html/css] mission 02 - gooogle 메인화면 그리기

[html/css] mission4 - MongsTacks - BootStrap/MediaQuery를 이용한 웹사이트

0개의 댓글