학습내용
<!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">
<div id="youtube-channel-content">
<div id="channel-banner">
<a class="btn-wrap flex-align-start" href="#">
<i></i>
<h3>1theK Originals - 원더케이오리지널</h3>
</a>
<div class="btn-icons flex-align-start">
<a class="facebook" href="#"></a>
<a class="twitter" href="#"></a>
<a class="kakao" href="#"></a>
</div>
</div>
<div class="channel-header">
<div class="channel-container">
<div class="channel-profile-wrap flex-align-between">
<div class="channel-profile flex-align-start">
<img class="channel-thumbnail" src="https://via.placeholder.com/80">
<div class="txt-wrap">
<h2>1theK (원더케이)</h2>
<p>23.3M subscribe</p>
</div>
</div>
<button type="button" class="btn-subscribe">SUBSCRIBE</button>
</div>
</div>
</div>
<div id="channel-nav">
<div class="channel-container">
<div class="flex-align-start">
<ul class="flex-align-start">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">VIDEO</a></li>
<li><a href="#">PLAYLISTS</a></li>
<li><a href="#">COMMUNITY</a></li>
<li><a href="#">CHANNELS</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
<div class="search-wrap flex-align-start">
<i></i>
<input type="text" placeholder="Search">
</div>
</div>
</div>
</div>
<div id="channel-content">
<div class="channel-container">
<div id="channel-recent" class="flex-align-start">
<img src="https://via.placeholder.com/424x238">
<div class="txt-wrap">
<h2>[MV] KIM JONG KOOK(김종국) X ATEEX(에이티즈) _ Be My Lover(바다 보러 갈래?)</h2>
<div class="view flex-align-start">
<p class="count">1,129,681 views</p>
<p class="date">1 week ago</p>
</div>
<span class="title">[MV] KIM JONG KOOK(김종국) X ATEEX(에이티즈) _ Be My Lover(바다 보러 갈래?)</span>
<div class="link-wrap">
<p>Melon ▶ <em>https://bit.ly/3sjacGy</em></p>
<p>genie ▶ <em>https://bit.ly/3g6mL3e</em></p>
<p>Vibe ▶ <em>https://bit.ly/3iM5Pkm</em></p>
<p>Youtube Music ▶ <em>https://bit.ly/3AZjAT9</em></p>
</div>
<span class="more">READ MORE</span>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-header-description">
<span>The Hottest K-pop Videos You Shouldn't Miss Today</span>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
<div class="channel-playlists-section">
<div class="playlists-header flex-align-start">
<h3>1theK HOT CHOICE</h3>
<div class="play-wrap flex-align-start">
<i class="icon-play"></i>
<a href="#" class="play-link">PLAY ALL</a>
</div>
</div>
<div class="playlists-body">
<ul class="flex-align-between">
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:20</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] CRAVITY _ Gad Pedal
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">129K views</span>
<span class="date">5 days ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:17</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] LUMINOUS(루미너스) _ Dreaming LUMINOUS((꿈루)꿈을 꾸는 루미너스)
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">13K views</span>
<span class="date">5 days ago</span>
</div>
</div>
</li>
<li>
<div class="channel-thumbnail">
<a href="#">
<img src="https://via.placeholder.com/210x118">
<span class="time">3:24</span>
</a>
</div>
<div class="channel-txt-wrap">
<h3>
<a href="#">
[MV] KWON EUN BE(권은비) _ Door
</a>
</h3>
<p><a href="channel.html" class="channel-link">1theK (원더케이)</a></p>
<div class="txt-bottom flex-align-start">
<span class="count">140K views</span>
<span class="date">4 hourse ago</span>
</div>
<span class="caption">CC</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>어려운점
- 채널의 갯수에 대한 디테일한 부분
해결방법
- 복습
학습소감
- 유투브 코드를 뜯어보자
Please be wonderful but don't be so serious, enjoy this journey with the good people!