๊ตฌํ ํ๋ฉด
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;
}
}