210827 개발일지

1) 학습한 내용

국내외 사이트 카피캣 유튜브

> 유튜브 상단 영역 (1\2) 

<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 href="#">
<img src="https://via.placeholder.com/90x20">
</a>
</h1>
</div>

<div class="nav-center flex-align-start">
<div class="search-wrap flex-align-start">
<input type="text" placeholder="검색">
<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">로그인</a>
</div>
</div>
			
</nav>

/*상단 메뉴*/
#youtube-top-nav 
	{position: fixed;

	width: 100%;
	height: 56px;
	background-color: #212121;

	padding: 0 16px;

	z-index: 99999;}

#youtube-top-nav .nav-left 
	{height: 56px;}

#youtube-top-nav .nav-left .btn-menu 
	{width: 24px;
	height: 24px;
	background-color: yellow;}

#youtube-top-nav .nav-left h1 
	{margin-left: 16px;}

#youtube-top-nav .nav-left h1 a {}

#youtube-top-nav .nav-left h1 img 
	{width: 90px;
	height: 20px;}

#youtube-top-nav .nav-right 
	{height: 56px;}

#youtube-top-nav .nav-right .btn-menu 
	{width: 40px;
	height: 40px;
	margin-right: 16px;}

#youtube-top-nav .nav-right .btn-menu.btn-menu-1 
	{background-color: grey;}

#youtube-top-nav .nav-right .btn-menu.btn-menu-2 
	{background-color: yellow;}

#youtube-top-nav .nav-right .btn-login 
	{display: inline-block;
	border: solid 1px #3ea6ff;
	padding: 10px 12px 8px;
	font-size: 14px;

	color: #3ea6ff;}

#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;
	border: solid 1px grey;
	background-color: #212121;

	color: #ffffff;
	padding: 2px 6px;

	font-size: 14px;}

#youtube-top-nav .nav-center .search-wrap .btn-search 
	{width: 65px;
	height: 30px;
	border: solid 1px grey;
	background-color: grey;}

#youtube-top-nav .nav-center .btn-voice 
	{width: 24px;
	height: 24px;
	background-color: blue;

	margin-left: 16px;}

2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

할만 했다!

3)해결방법 작성

강의를 들으며 해나갔다.

4)학습 소감

상단바를 열심히 만들었다.
벌써 금요일이다 8월 마지막주도 수고했다