웹 개발 - CSS 연습(1)

개발/프론트엔드 개발

by oVeron 2023. 1. 11. 23:02

728x90

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>You Are Awesome!</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.14.0/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <div class="mainbar">
        <span class="mainbar__icon"
          ><i class="fas fa-times fa-lg mainbar__icon_x"></i
        ></span>
        <span class="mainbar__title">Playlist</span>
        <div class="mainbar__div"></div>
      </div>

      <div class="nowsong">
        <img
          class="nowsong__img"
          src="https://i.ytimg.com/vi/c_2gHmpZmzU/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCQxhG7eUdfjq7ZLVfh8jQuaRqxFQ"
        />
        <div class="nowsong__info">
          <span class="nowsong__title">Gris, Pt. 1</span>
          <span class="nowsong__writer">by Berlinist</span>
        </div>
      </div>

      <div class="button">
        <div class="button__play">
          <span><i class="fas fa-play"></i></span>
          <span class="button__play__title">Play</span>
        </div>
        <div class="button__heart">
          <span><i class="far fa-heart"></i></span>
        </div>
        <div class="button__plus">
          <span><i class="fas fa-plus"></i></span>
        </div>
      </div>

      <div class="playlist">
        <div class="playlist__nextsong">
          <img
            class="playlist__nextsong__img"
            src="https://i.ytimg.com/vi/EBhFHJMVfiI/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLACM5PAPfo0YAUCMc0wVo8nFCeH4g"
          />
          <div class="playlist__nextsong__info">
            <span class="playlist__nextsong__title">Undertale</span>
            <span class="playlist__nextsong__writer">by Toby Fox</span>
          </div>
        </div>
        <div class="playlist__nextsong">
          <img
            class="playlist__nextsong__img"
            src="https://i.ytimg.com/vi/qmsjvBivRkU/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBVtnUtbqFXn8lPt0mYrulj4cm4LQ"
          />
          <div class="playlist__nextsong__info">
            <span class="playlist__nextsong__title">Grimm</span>
            <span class="playlist__nextsong__writer"
              >by Christopher Larkin</span
            >
          </div>
        </div>
        <div class="playlist__nextsong">
          <img
            class="playlist__nextsong__img"
            src="https://i.ytimg.com/vi/VXIqXaX1blY/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFbyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLABtvnMPYyuKxN1GAoY0E-UNefnMw"
          />
          <div class="playlist__nextsong__info">
            <span class="playlist__nextsong__title">Farewell</span>
            <span class="playlist__nextsong__writer">by Lena Raine</span>
          </div>
        </div>
        <div class="playlist__nextsong">
          <img
            class="playlist__nextsong__img"
            src="https://i.ytimg.com/vi/6Cs54V-F0c8/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVvKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLCwnX59U9IrnMLWUy-xB6OtTtDfuw"
          />
          <div class="playlist__nextsong__info">
            <span class="playlist__nextsong__title">Bootlegger Boogie</span>
            <span class="playlist__nextsong__writer">Kristofer Maddigan</span>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

* {
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
}

main{
    background-color: #FFFFFF;
    height: 560px;
    width: 260px;
    border: 4px solid #00C6AD;
}

.mainbar{
    display: flex;
    align-items: center;
    margin-top: 47px;
    margin-bottom: 33px;
}
.mainbar__icon{
    width: 33%;
}
.mainbar__icon_x{
    margin-left: 20px;
}
.mainbar__title{
    width: 33%;
    text-align: center;
    font-weight: 700;
}
.mainbar__div{
    width: 33%;
}

.nowsong{
    display: flex;
    margin-left: 15px;
    margin-bottom: 30px;
}
.nowsong__img{
    height: 85px;
    width: 85px;
    border-radius: 10px;
    border: 2px solid black;
}
.nowsong__info{
    margin-left: 12px;
}
.nowsong__title{
    display: block;
    font-size: 25px;
    font-weight: 700;
    margin-top: 10px;
}
.nowsong__writer{
    display: block;
    font-weight: 700;
    opacity: 0.9;
    margin-top: 10px;
}

.button{
    display: flex;
    margin-left: 15px;
    margin-bottom: 27px;
}
.button__play{
    height: 40px;
    width: 110px;
    border: 2px solid black;
    border-bottom: 5px solid black;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button__play__title{
    font-weight: 700;
    margin-left: 8px;
}
.button__heart{
    height: 40px;
    width: 40px;
    border: 2px solid black;
    border-bottom: 5px solid black;
    border-radius: 50%;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button__plus{
    height: 40px;
    width: 40px;
    border: 2px solid black;
    border-bottom: 5px solid black;
    border-radius: 50%;
    margin-left: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.playlist__nextsong{
    display: flex;
    margin-left: 15px;
    margin-bottom: 30px;
}
.playlist__nextsong__img{
    height: 40px;
    width: 40px;
    border-radius: 10px;
    border: 2px solid black;
    margin-right: 8px;    
}
.playlist__nextsong__title{
    display: block;
    font-weight: 700;
    margin-top: 3px;
    margin-bottom: 8px;
}
.playlist__nextsong__writer{
    display: block;
    opacity: 0.6;
    font-size: 10px;
}

728x90

'개발 > 프론트엔드 개발' 카테고리의 다른 글

웹 개발 - CSS 연습(2) (0)	2023.01.12
웹 개발 - JavaScript(2) (0)	2023.01.12
웹 개발 - JavaScript(1) (0)	2023.01.11
웹 개발 - CSS(3) (0)	2022.12.29
웹 개발 - CSS(2) (0)	2022.12.28