HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>유튜브</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<nav id="youtube-top-nav">
<div class="youtube-top-wrap flex-align-between">
<div class="nav-left flex-align-start">
<button type="button" class="btn-menu"></button> <!-- 다른 페이지로 이동하는 것이 아니기 때문에 button태그 사용 -->
<h1>
<a class="youtube-logo-wrap flex-align-start" href="#">
<i class="youtube-logo"></i>
<span>YouTube</span>
<p>KR</p>
</a>
</h1>
</div>
<div class="nav-center flex-align-start">
<div class="search-wrap flex-align-start">
<input type="text" placeholder="Search">
<button type="button" class="btn-search"></button>
</div>
<button class="btn-voice"></button>
</div>
<div class="nav-right flex-align-end">
<button type="button" class="btn-menu btn-menu-1"></button>
<button type="button" class="btn-menu btn-menu-2"></button>
<a href="#" class="btn-login">SIGN IN</a>
</div>
</div>
</nav>
<nav id="youtube-left-nav">
<div id="youtube-left-content">
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="on flex-align-start">
<i class="icon icon-1"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="explore.html" class="flex-align-start">
<i class="icon icon-2"></i>
<span>Explore</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-3"></i>
<span>Subscriptions</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-4"></i>
<span>Library</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-5"></i>
<span>History</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<div class="txt-wrap">
<p>Sign in to like videos, commemnt, and subascribe.</p>
<a href="#" class="btn-login">SIGN IN</a>
</div>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>BEST OF YOUTUBE</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-1"></i>
<span>Music</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-2"></i>
<span>Sports</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-3"></i>
<span>Gaming</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-4"></i>
<span>Movie</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-5"></i>
<span>News</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-6"></i>
<span>Live</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-7"></i>
<span>Learning</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="circle-icon icon-8"></i>
<span>360º Video</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-6"></i>
<span>Browse channels</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-title-wrap">
<h2>MORE FROM YOUTUBE</h2>
</div>
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-7"></i>
<span>YouTube Premium</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-8"></i>
<span>Live</span>
</a>
</li>
</ul>
</div>
</div>
<div class="nav-section">
<div class="nav-body">
<ul>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-9"></i>
<span>Setting</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-10"></i>
<span>Report history</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-11"></i>
<span>Help</span>
</a>
</li>
<li>
<a href="#" class="flex-align-start">
<i class="icon icon-12"></i>
<span>Send feedback</span>
</a>
</li>
</ul>
</div>
</div>
<footer id="youtube-footer">
<div class="txt-wrap">
<a href="#">About</a>
<a href="#">Press</a>
<a href="#">Copyright</a>
<a href="#">Contact us</a>
<a href="#">Creators</a>
<a href="#">Advertise</a>
<a href="#">Developers</a>
</div>
<div class="txt-wrap">
<a href="#">Terms</a>
<a href="#">Privacy</a>
<a href="#">Policy & Safety</a>
<a href="#">How YouTube Works</a>
<a href="#">Test new features</a>
</div>
<div class="txt-wrap">
<p>
Quisque velit nisi<br>
Vivamus suscipit tortor eget felis porttitor volutpat. Sed porttitor lectus nibh. Nulla quis lorem ut libero malesuada feugiat.
</p>
</div>
</footer>
</div>
</nav>
<main id="youtube-main" role="main">
<nav class="tag-wrap">
<ul class="flex-align-between">
<li class="on">
<a href="#">All</a>
</li>
<li>
<a href="#">K-Pop</a>
</li>
<li>
<a href="#">Game shows</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Variety shows</a>
</li>
<li>
<a href="#">Korean dramas</a>
</li>
<li>
<a href="#">Live</a>
</li>
<li>
<a href="#">Playlists</a>
</li>
<li>
<a href="#">Muckbang</a>
</li>
<li>
<a href="#">Training</a>
</li>
<li>
<a href="#">Background music</a>
</li>
</ul>
</nav>
<div class="youtube-banner">
<div class="banner-container">
<h1 class="youtube-music-logo flex-align-start">
<i></i>
<span>YouTube Music</span>
</h1>
<p>Explore music based on your unique taste</p>
<a class="btn-join" href="#">GEI IT NOW</a>
</div>
<button class="close"></button>
</div>
<div id="youtube-main-content">
<ul class="flex-align-between">
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">3:23</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36x36">
</a>
<div class="txt">
<h3>
<a href="#" class="title-link">
[MV] Hi-L(하이엘) _ Too Too (22)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom">
<span class="count">170K views</span>
<span class="date">1 week ago</span>
</div>
</div>
</div>
</li>
<li>
<div class="video-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/1024x640">
<span class="time">3:23</span>
</a>
</div>
<div class="video-txt-wrap flex-align-start">
<a href="#" class="image-link">
<img class="profile" src="https://via.placeholder.com/36x36">
</a>