2021.07.16 일지

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/90x24">
						</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 type="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>

.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%;
	height: 56px;
	background-color: #212121;

	padding: 0 16px;
}

#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 img {
	width: 90px;
	height: 24px;

	margin-bottom: 5px;
}

#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: #212121;

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

	border: solid 1px grey;

	padding: 2px 6px;
}

#youtube_top_nav .nav_center .search_wrap .btn_search {
	width: 65px;
	height: 30px;
	background-color: grey;

	border: solid 1px grey;
}

#youtube_top_nav .nav_center .btn_voice {
	width: 24px;
	height: 24px;
	background-color: blue;

	margin-left: 16px;
}

#youtube_top_nav .nav_right .btn_menu {
	width: 40px;
	height: 40px;

	margin-right: 16px;
}


#youtube_top_nav .nav_right .btn_menu_1 {
	background-color: grey;
}

#youtube_top_nav .nav_right .btn_menu_2 {
	background-color: yellow;
}

#youtube_top_nav .nav_right .btn_login {
	font-size: 14px;
	color: #3ea6ff;

	border: solid 1px #3ea6ff;

	padding: 10px 12px;
}

3. 어려웠던 점과 해결방법

크게 어려웠던 점은 없었습니다.

4. 아쉬웠던 점

기관에서 홈페이지에 대해 피드백이나 참고자료 제공등 적극적으로 소통해주면 빠르게 작업이 가능할텐데 그렇지 못한 부분이 아쉬웠습니다.