πŸ“‚ My Project

HTML/CSS πŸ’‘[λ ˆμ΄μ•„μ›ƒ μ—°μŠ΅] 클둠 νŽ˜μ΄μ§€ β‘‘ - YouTube ν™ˆνŽ˜μ΄μ§€ (λ°˜μ‘ν˜•)

kongmi 2023. 3. 26. 17:38

κ΅¬ν˜„ ν™”λ©΄

PC

λͺ¨λ°”일

μ½”λ“œ

HTML

<!DOCTYPE html>
<html lang="en">
<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="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
  <script src="https://kit.fontawesome.com/847d54d8db.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <header>
    <nav class="header-navbar">
      <div class="navbar__hamburger-logo" href="">
        <i class="fa-solid fa-bars"></i>
        <img class="navbar__logo" src="./images/logo.png" alt="">
      </div>
      <div class="navbar__search">
        <input type="text" placeholder="   검색">
        <i class="material-icons">search</i>
      </div>
      <ul class="navbar__icons">
        <li class="videoplus">
          <span class="material-icons">video_call</span>
        </li>
        <li class="alarm">
          <span class="material-icons">notifications</span>
        </li>
        <li class="user">
          <span class="material-icons">account_circle</span>
        </li>
      </ul>
    </nav>
  </header>
  <div class="container">
    <aside>
      <div class="sidemenu-container">
        <ul class="sidemenu-item sidemenu__main">
          <li>
            <span class="material-icons">home</span>
            <p>ν™ˆ</p>
          </li>
          <li>
            <span class="material-icons">ondemand_video</span>
            <p>Shorts</p>
          </li>
          <li>
            <span class="material-icons">video_library</span>
            <p>ꡬ독</p>
          </li>
          <li>
            <span class="material-icons">smart_display</span>
            <p>Originals</p>
          </li>
          <li>
            <span class="material-icons">headphones</span>
            <p>YouTube Music</p>
          </li>
        </ul>
        <hr>
        <ul class="sidemenu-item sidemenu__user">
          <li>
            <span class="material-icons">subscriptions</span>
            <p>보관함</p>
          </li>
          <li>
            <span class="material-icons">history</span>
            <p>μ‹œμ²­ 기둝</p>
          </li>
          <li>
            <span class="material-icons">live_tv</span>
            <p>λ‚΄ λ™μ˜μƒ</p>
          </li>
          <li>
            <span class="material-icons">schedule</span>
            <p>λ‚˜μ€‘μ— λ³Ό λ™μ˜μƒ</p>
          </li>
          <li>
            <span class="material-icons">download</span>
            <p>μ˜€ν”„λΌμΈ μ €μž₯ λ™μ˜μƒ</p>
          </li>
        </ul>
        <hr>
        <ul class="sidemenu-item sidemenu__subscribe">
          <h1>ꡬ독</h1>
          <li>
            <img src="./images/프사1.jpg" alt="">
            <p>μ§€λ‹ˆλͺ¬JINIMON</p>
          </li>
          <li>
            <img src="./images/프사2.jpg" alt="">
            <p>ν”Όμ‹λŒ€ν•™Psick Univ</p>
          </li>
          <li>
            <img src="./images/프사3.jpg" alt="">
            <p>λ“œλ¦Όμ½”λ”©</p>
          </li>
          <li>
            <img src="./images/프사4.jpg" alt="">
            <p>λŒλΉ„κ³΅ν¬λΌλ””μ˜€</p>
          </li>
          <li>
            <img src="./images/프사5.jpg" alt="">
            <p>κΈ°λ¬˜ν•œ λ°€</p>
          </li>
        </ul>
        <hr>
        <footer>
          <p>© 2023 Google LLC, Sundar Pichai, 1600 Amphitheatre Parkway, Mountain View CA 94043, USA, 0807-882-594 (무료), yt-support-solutions-kr@google.com, ν˜ΈμŠ€νŒ…: Google LLC, μ‚¬μ—…μžμ •λ³΄, λΆˆλ²•μ΄¬μ˜λ¬Ό μ‹ κ³ 
            크리에이터듀이 유튜브 상에 κ²Œμ‹œ, νƒœκ·Έ λ˜λŠ” μΆ”μ²œν•œ μƒν’ˆλ“€μ€ νŒλ§€μžλ“€μ˜ 약관에 따라 νŒλ§€λ©λ‹ˆλ‹€. μœ νŠœλΈŒλŠ” μ΄λŸ¬ν•œ μ œν’ˆλ“€μ„ νŒλ§€ν•˜μ§€ μ•ŠμœΌλ©°, 그에 λŒ€ν•œ μ±…μž„μ„ 지지 μ•ŠμŠ΅λ‹ˆλ‹€.</p>
          <p>© 2023 Google LLC, Sundar Pichai, 1600 Amphitheatre Parkway, Mountain View CA 94043, USA, 0807-882-594 (무료), yt-support-solutions-kr@google.com, ν˜ΈμŠ€νŒ…: Google LLC, μ‚¬μ—…μžμ •λ³΄, λΆˆλ²•μ΄¬μ˜λ¬Ό μ‹ κ³  크리에이터듀이 유튜브 상에 κ²Œμ‹œ, νƒœκ·Έ λ˜λŠ” μΆ”μ²œν•œ μƒν’ˆλ“€μ€ νŒλ§€μžλ“€μ˜ 약관에 따라 νŒλ§€λ©λ‹ˆλ‹€. μœ νŠœλΈŒλŠ” μ΄λŸ¬ν•œ μ œν’ˆλ“€μ„ νŒλ§€ν•˜μ§€ μ•ŠμœΌλ©°, 그에 λŒ€ν•œ μ±…μž„μ„ 지지 μ•ŠμŠ΅λ‹ˆλ‹€.</p>
        </footer>
      </div>
    </aside>
    <main>
      <nav class="navbar">
        <li><a href="#">전체</a></li>
        <li><a href="#">μŒμ•…</a></li>
        <li><a href="#">믹슀</a></li>
        <li><a href="#">κ²Œμž„</a></li>
        <li><a href="#">λ‰΄μŠ€</a></li>
        <li><a href="#">μ‹€μ‹œκ°„</a></li>
        <li><a href="#">μ•‘μ…˜ μ–΄λ“œλ²€μ²˜ κ²Œμž„</a></li>
        <li><a href="#">μš”λ¦¬</a></li>
        <li><a href="#">μ΅œκ·Όμ— μ—…λ‘œλ“œλœ λ™μ˜μƒ</a></li>
        <li><a href="#">μƒˆλ‘œμš΄ 맞좀 λ™μ˜μƒ</a></li>
      </nav>
      <div class="video-container">
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일1.png" alt="">
          <div class="video-info">
            <img src="./images/프사1.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">λ°œλ¦¬μ—μ„œ ν•  일, μ˜€λ‘œμ§€ λ‚˜μ—κ²Œ μ§‘μ€‘ν•˜κΈ° (κ°“μ„±λΉ„ μˆ™μ†Œ|ν™˜μ „|둜컬 맛집|μ„ μ…‹ λΉ„μΉ˜ 클럽|17,000원 ν˜Έν…” 데이패슀? ν—¬μŠ€, 수영, λ§ˆμ‚¬μ§€, μ‹μŒλ£ŒκΉŒμ§€</h1>
              <p class="nickname">μ§€λ‹ˆλͺ¬JINIMON</p>
              <p>쑰회수 8.1μ²œνšŒγ†1일 μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일2.png" alt="">
          <div class="video-info">
            <img src="./images/프사5.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">μŠ€λ¦¬λž‘μΉ΄μ˜ κΉŠμ€ 동꡴ μ†μ—μ„œ 발견된 κΈ°κ΄΄ν•œ λͺ¨μŠ΅μ˜ λ²½ν™”λ“€ [λ―ΈμŠ€ν„°λ¦¬]</h1>
              <p class="nickname">κΈ°λ¬˜ν•œ λ°€</p>
              <p>쑰회수 6.7λ§ŒνšŒγ†1일 μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일3.png" alt="">
          <div class="video-info">
            <img src="./images/프사6.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">μ—¬μœ λ‘œμš΄ λ‚  κΈ°λΆ„ μ „ν™˜μ„ μœ„ν•œ 졜고의 λ…Έλž˜ πŸ¦„ Chilled Soul & R&B</h1>
              <p class="nickname">Mimi Lofi Chill</p>
              <p>쑰회수 259λ§ŒνšŒγ†10κ°œμ›” μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일4.png" alt="">
          <div class="video-info">
            <img src="./images/프사2.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">[05ν•™λ²ˆμ΄μ¦ˆνžˆμ–΄] μ‹ λ„μ‹œ μ•„μž¬λ“€ : 세상에 μ™„λ²½ν•œ μ΄ν˜Όμ€ μ—†λ‹€</h1>
              <p class="nickname">ν”Όμ‹λŒ€ν•™Psick Univ</p>
              <p>쑰회수 47λ§ŒνšŒγ†22μ‹œκ°„ μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일1.png" alt="">
          <div class="video-info">
            <img src="./images/프사1.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">λ°œλ¦¬μ—μ„œ ν•  일, μ˜€λ‘œμ§€ λ‚˜μ—κ²Œ μ§‘μ€‘ν•˜κΈ° (κ°“μ„±λΉ„ μˆ™μ†Œ|ν™˜μ „|둜컬 맛집|μ„ μ…‹ λΉ„μΉ˜ 클럽|17,000원 ν˜Έν…” 데이패슀? ν—¬μŠ€, 수영, λ§ˆμ‚¬μ§€, μ‹μŒλ£ŒκΉŒμ§€</h1>
              <p class="nickname">μ§€λ‹ˆλͺ¬JINIMON</p>
              <p>쑰회수 8.1μ²œνšŒγ†1일 μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일2.png" alt="">
          <div class="video-info">
            <img src="./images/프사5.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">μŠ€λ¦¬λž‘μΉ΄μ˜ κΉŠμ€ 동꡴ μ†μ—μ„œ 발견된 κΈ°κ΄΄ν•œ λͺ¨μŠ΅μ˜ λ²½ν™”λ“€ [λ―ΈμŠ€ν„°λ¦¬]</h1>
              <p class="nickname">κΈ°λ¬˜ν•œ λ°€</p>
              <p>쑰회수 6.7λ§ŒνšŒγ†1일 μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일3.png" alt="">
          <div class="video-info">
            <img src="./images/프사6.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">μ—¬μœ λ‘œμš΄ λ‚  κΈ°λΆ„ μ „ν™˜μ„ μœ„ν•œ 졜고의 λ…Έλž˜ πŸ¦„ Chilled Soul & R&B</h1>
              <p class="nickname">Mimi Lofi Chill</p>
              <p>쑰회수 259λ§ŒνšŒγ†10κ°œμ›” μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일4.png" alt="">
          <div class="video-info">
            <img src="./images/프사2.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">[05ν•™λ²ˆμ΄μ¦ˆνžˆμ–΄] μ‹ λ„μ‹œ μ•„μž¬λ“€ : 세상에 μ™„λ²½ν•œ μ΄ν˜Όμ€ μ—†λ‹€</h1>
              <p class="nickname">ν”Όμ‹λŒ€ν•™Psick Univ</p>
              <p>쑰회수 47λ§ŒνšŒγ†22μ‹œκ°„ μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일1.png" alt="">
          <div class="video-info">
            <img src="./images/프사1.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">λ°œλ¦¬μ—μ„œ ν•  일, μ˜€λ‘œμ§€ λ‚˜μ—κ²Œ μ§‘μ€‘ν•˜κΈ° (κ°“μ„±λΉ„ μˆ™μ†Œ|ν™˜μ „|둜컬 맛집|μ„ μ…‹ λΉ„μΉ˜ 클럽|17,000원 ν˜Έν…” 데이패슀? ν—¬μŠ€, 수영, λ§ˆμ‚¬μ§€, μ‹μŒλ£ŒκΉŒμ§€</h1>
              <p class="nickname">μ§€λ‹ˆλͺ¬JINIMON</p>
              <p>쑰회수 8.1μ²œνšŒγ†1일 μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일2.png" alt="">
          <div class="video-info">
            <img src="./images/프사5.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">μŠ€λ¦¬λž‘μΉ΄μ˜ κΉŠμ€ 동꡴ μ†μ—μ„œ 발견된 κΈ°κ΄΄ν•œ λͺ¨μŠ΅μ˜ λ²½ν™”λ“€ [λ―ΈμŠ€ν„°λ¦¬]</h1>
              <p class="nickname">κΈ°λ¬˜ν•œ λ°€</p>
              <p>쑰회수 6.7λ§ŒνšŒγ†1일 μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일3.png" alt="">
          <div class="video-info">
            <img src="./images/프사6.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">μ—¬μœ λ‘œμš΄ λ‚  κΈ°λΆ„ μ „ν™˜μ„ μœ„ν•œ 졜고의 λ…Έλž˜ πŸ¦„ Chilled Soul & R&B</h1>
              <p class="nickname">Mimi Lofi Chill</p>
              <p>쑰회수 259λ§ŒνšŒγ†10κ°œμ›” μ „</p>
            </div>
          </div>
        </div>
        <div class="video-item">
          <img class="thumbnail" src="./images/썸넀일4.png" alt="">
          <div class="video-info">
            <img src="./images/프사2.jpg" alt="">
            <div class="video-info-detail">
              <h1 class="title">[05ν•™λ²ˆμ΄μ¦ˆνžˆμ–΄] μ‹ λ„μ‹œ μ•„μž¬λ“€ : 세상에 μ™„λ²½ν•œ μ΄ν˜Όμ€ μ—†λ‹€</h1>
              <p class="nickname">ν”Όμ‹λŒ€ν•™Psick Univ</p>
              <p>쑰회수 47λ§ŒνšŒγ†22μ‹œκ°„ μ „</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>
</html>

CSS

body {
  font-family: 'Roboto', sans-serif;
}
.header-navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 15px 30px;
}
.navbar__hamburger-logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  flex-grow: 1;
}
.navbar__hamburger-logo i {
  font-size: 20px;
}
.navbar__logo {
  width: 120px;
}
.navbar__search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-grow: 2;
}
.navbar__search input {
  width: 30vw;
  height: 35px;
  border-radius: 30px;
  border: 1px solid #c8c8c8;
}
.navbar__search i {
  font-size: 30px;
  color: #696969;
}
.navbar__icons {
  justify-content: flex-end;
  display: flex;
  gap: 10px;
  flex-grow: 1;
}
.navbar__icons > li > span {
  font-size: 30px;
  line-height: 30px;
}
.container {
  display: flex;
}
.sidemenu-container {
  background-color: #fff;
  padding: 10px 10px 10px 20px;
  font-size: 0.8em;
  width: 9vw;
}
.sidemenu-item {
  padding: 10px 0;
}
.sidemenu-item li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.9em;
  margin-bottom: 12px;
}
.sidemenu-item li:hover {
  background-color: #eee;
  border-radius: 10px;
  padding: 8px;
}
.sidemenu__subscribe h1 {
  font-size: 1vw;
  margin-bottom: 10px;
}
.sidemenu__subscribe img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
footer {
  color: #696969;
  line-height: 15px;
  font-size: 0.9em;
}
.navbar {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.navbar > li {
  list-style: none;
  padding: 5px 10px;
  background-color: #eee;
  border-radius: 5px;
}
.navbar a {
  text-decoration: none;
  color: #000;
  font-size: 0.8em;
}
main {
  flex-grow: 1;
  padding: 10px;
}
.video-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 20px 0;
  gap: 10px;
}
.video-item {
  display: flex;
  flex-direction: column;
  width: 23%;
  gap: 10px;
}
.thumbnail {
  border-radius: 13px;
}
.video-info {
  display: flex;
  gap: 10px;
}
.video-info img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.video-info-detail {
  display: flex;
  flex-direction: column;
  line-height: 20px;
}
.video-info-detail h1 {
  font-size: 1em;
}
.video-info-detail p {
  font-size: 0.8em;
  color: #696969;
}
@media screen and (max-width: 768px) {
  .navbar__icons {
    display: none;
  }
  .video-item {
    width: 100%;
  }
  .sidemenu-item > li > p, footer {
    display: none;
  }
}

μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ λ³€κ²½κΈˆμ§€ (μƒˆμ°½μ—΄λ¦Ό)