GiantStepDEV
article thumbnail

๊ตฌํ˜„ ํ™”๋ฉด

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;
  }
}

profile

GiantStepDEV

@kongmi

ํฌ์ŠคํŒ…์ด ์ข‹์•˜๋‹ค๋ฉด "์ข‹์•„์š”โค๏ธ" ๋˜๋Š” "๊ตฌ๋…๐Ÿ‘๐Ÿป" ํ•ด์ฃผ์„ธ์š”!