학습내용
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>
<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>
동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이 동해물과 백두산이
</p>
</div>
어려운점
- 카피캣을 하면서 완벽하게 같게 만들지는 못해서 어려움
해결방법
- 여전히 아는게 별로 없어서 복습을 함
학습소감
- 효과적으로 배울 수 있는 방법이 없는지 의문이 듦. 영상을 보고 카피캣을 하는데 여전히 어렵게만 느껴짐
Please be wonderful but don't be so serious, enjoy this journey with the good people!