배운내용
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> CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nanum Gothic', sans-serif;
}
html, body {
width: 100%;
height: 100%;
background-color: #181818;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
}
input {
outline: none;
border: none;
}
input:focus {
outline: none;
}
/* 디폴트 작업 */
#wrapper {
position: relative;
width: 100%;
height: 100%;
min-width: 1300px;
}
.flex-align-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.flex-align-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.flex-align-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* 상단 영역 */
#youtube-top-nav {
position: fixed;
width: 100%;
min-width: 1380px;
height: 56px;
background-color: #212121;
padding: 0 16px;
z-index: 999999;
}
#youtube-top-nav .nav-left {
height: 56px;
}
#youtube-top-nav .nav-left .btn-menu {
width: 40px;
height: 40px;
padding: 8px;
background-image: url(../img/menu.png);
background-size: 24px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap {
margin-left: 8px;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap .youtube-logo {
display: block;
width: 30px;
height: 28px;
background-image: url(../img/youtube.png);
background-size: 30px 28px;
background-repeat: no-repeat;
background-position: 50% 35%;
margin-right: 3px;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap span {
font-size: 20px;
color: #ffffff;
letter-spacing: -2px;
}
#youtube-top-nav .nav-left h1 .youtube-logo-wrap p {
color: #aaa;
font-size: 1px;
margin-top: -17px;
margin-left: 5px;
}
#youtube-top-nav .nav-right {
height: 56px;
}
#youtube-top-nav .nav-right .btn-menu {
width: 40px;
height: 40px;
cursor: pointer;
margin-right: 16px;
}
#youtube-top-nav .nav-right .btn-menu.btn-menu-1 {
background-image: url(../img/menu-2.png);
background-repeat: no-repeat;
background-size: 22px;
background-position: center;
}
#youtube-top-nav .nav-right .btn-menu.btn-menu-2 {
background-image: url(../img/more.png);
background-repeat: no-repeat;
background-size: 22px;
background-position: center;
}
#youtube-top-nav .nav-right .btn-login {
display: inline-block;
border: solid 1px #3ea6ff;
padding: 10px 12px 8px;
color: #3ea6ff;
font-size: 14px;
font-weight: bold;
}
#youtube-top-nav .nav-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#youtube-top-nav .nav-center .search-wrap {
width: 640px;
height: 30px;
}
#youtube-top-nav .nav-center .search-wrap input {
width: calc(100% - 65px);
height: 30px;
background-color: hsl(0, 0%, 7%);
border: solid 1px hsl(0, 0%, 18.82%);
border-radius: 2px 0 0 2px;
padding: 2px 6px;
font-size: 14px;
}
#youtube-top-nav .nav-center .search-wrap input:focus {
border: solid 1px #065fd4;
color: #aaa;
font-weight: bold;
}
#youtube-top-nav .nav-center .search-wrap input::placeholder {
font-weight: bold;
}
#youtube-top-nav .nav-center .search-wrap .btn-search {
width: 65px;
height: 30px;
background-image: url(../img/search.png);
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
background-color: hsla(0, 0%, 100%, .08);
border: solid 1px hsl(0, 0%, 18.82%);
border-radius: 0 2px 2px 0;
cursor: pointer;
}
#youtube-top-nav .nav-center .btn-voice {
width: 35px;
height: 35px;
background-color: black;
border-radius: 50%;
background-image: url(../img/voice.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: center;
margin-left: 8px;
cursor: pointer;
}
어려운점
- 유투브 연결 링크별 세부 조정 내역
해결방법
-
코드를 홀로 뜯어보며 해결
-
복습 또 복습
-
웹 페이지의 검사기능을 이용해서 각 항목들을 뜯어봄
학습소감
- 네이버 카피캣에 비해 더 흥미롭게 느껴짐 차이점이 랜딩페이지가 굉장히 복잡하고 뭔가 많은 네이버에 비해 단순한 느낌이었는데 또 유투브는 영상기반 콘텐츠가 주로 모여있어서인지 독특하게 느껴짐.
Please be wonderful but don't be so serious, enjoy this journey with the good people!