[dg_ai_school] 웹프로그래밍 47

이채환·2021년 9월 1일
0

webprogramming

목록 보기
47/51

학습내용

<!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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

							<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>
				</ul>
			</div>
		</main>
	</div>

</body>
</html>

어려운점

  • Wrapper, nav 태그, align 배열

해결방법

  • 영상 복습

학습소감

  • 유투브 학습이 생각보다 어려움
profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 46

다음 포스트

[dg_ai_school] 웹프로그래밍 48

0개의 댓글