8월 27일 금

학습한 내용
유튜브 상단 부분 마무리

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

해결방법 작성
x

학습 소감
일정한 틀이 정해져있는 것 같다. 벌써 4개월 중 1달이 남았고 다음 달에는 실무 관련 프로젝트를 한다는데 그걸 제대로 수행할 자신이 없다. 정해진 강의 보고서 쓰고 남는 시간에는 계속 강의 보면서 실습을 진행했는데 따라하는 건 쉽다. 오타도 줄어들고 오류가 있어도 대부분 시간이 걸려도 찾아내거나 정 안되면 질문을 통해서 해결 할 수 있다. 하지만 중요한 것은 혼자서도 만들 줄 알아야 하는데 처음 부터 시작하라고 하면 html 기본 틀 넣는 거, css 연결하는거 아주 큰 틀을 div 태그로 클래스명 대강 넣을 줄은 알겠는데 더 자세한 뼈대는 잘 모르겠다. 실습한 코드를 답지로 두고 백지로 작성하는 것을 해보기도 했는데 너무 막히고 이게 맞는 방법인지도 모르겠다.

유튜브

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

			<div class="nav-center flex-align-start">
			<div class="search-wrap">
				<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>

	<nav id="youtube-left-nav">
		<div id="youtube-left-content">
			
		</div>
	</nav>

	<main id="youtube-main" role="main">
		
	</main>
</div>

• {
  margin: 0;
  padding: 0;

  box-sizing: border-box;

  }

html, body {
width: 100%;
height: 100%;
}

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: 1320px;
}

.flex-align-between {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}

.flex-align-start {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: stretch;
}

.flex-align-end {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
align-content: stretch;
}

/상단 메뉴/
#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 {

}

#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 {
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;

}

/왼쪽 사이드 메뉴/
#youtube-left-nav {
overflow-y: auto;
overflow-x: hidden;
position: fixed;

width: 240px;
background-color: #212121;

top: 56px;
left: 0;
bottom: 0;

}

#youtube-left-content {
position: absolute;
width: 225px;
height: 100%;
background-color: grey;
}

/유튜브 메인/
#youtube-main {
position: absolute;
left: 240px;
top: 56px;
right: 0;
bottom: 0;
background-color: grey;
}