08월 27일

1. 학습 내용

유투브 상단

HTML

<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/90px*20px">
					</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-menu1"></button>
				<button type="button" class="btn-menu btn-menu2"></button>
				<a href="#" class="btn-login">로그인</a>
			</div>
		</div>

CSS

#wrapper #youtube-top-nav {
	position: fixed;
	width: 100%;
	height: 56px;

	background-color: #212121;

	padding: 0 16px;

	z-index: 99999;}


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

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

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


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


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

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

	margin-right: 16px;}

#youtube-top-nav .youtube-top-wrap .nav-right .btn-menu1 {
	background-color: grey;}

#youtube-top-nav .youtube-top-wrap .nav-right .btn-menu2 {
	background-color: blue;}

#youtube-top-nav .youtube-top-wrap .nav-right .btn-login {
	border: solid 1px #3ea6ff;
	padding: 10px 12px 8px;

	font-size: 14px;

	color: #3ea6ff;}



#youtube-top-nav .youtube-top-wrap .nav-center {
	position: absolute;
	/* flex의 영향을 해제 */
	left: 50%;
	transform: translateX(-50%);
	/* 가운데 정렬 */}

#youtube-top-nav .youtube-top-wrap .nav-center .search-wrap {
	width: 640px;
	height: 30px;}

#youtube-top-nav .youtube-top-wrap .nav-center .search-wrap input {
	width: calc(100% - 65px);
	height: 30px;
	border: solid 1px grey;

	background-color: #212121;
	color: #ffffff;
	font-size: 14px;

	padding: 2px 6px;}

#youtube-top-nav .youtube-top-wrap .nav-center .search-wrap .btn-search {
	width: 65px;
	height: 30px;

	border: solid 1px grey;
	background-color: grey;}

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

	margin-left: 16px;

	background-color: blue;}

2. 학습 중 어려웠던 점

그 동안 해왔던 것들이어서 어려운 점은 없었다.

3. 해결 방안

4. 학습 소감

혼자서도 할 수 있는 능력을 키우고 싶다.