💻 학습 내용

🛫 GIT-HUB

HTML | youtube_top_nav
CSS | youtube_top_nav

youtub_top_nav

🖤 youtube_top_nav 부분을 left / center / right 3 군데로 나누었다.
그 중 center 부분에 input 태그와 button 태그가 x축으로 정렬 되지 않고 button 태그 부분(grey 색깔)이 밑으로 내려가 버렸다.
flex를 줄때 center 부분으로 한 번 주고 그 다음 input과 button태그가 묶여 있는 search_wrap 부분에도 flex를 작성해 주어야 했던 것 이다.
flex로 제대로 된 정렬을 입력해 주자 사진과 같이 x축 정렬이 되었다.

🖤 center 부분을 x축 중앙정렬을 해주었다.

#youtube_top_nav .nav_center{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

📝 마무리

저번 수업 시간에는 큰 틀만 작성하였는데 오늘 세세한 디자인 작업 까지 진행 하였다.
유튜브의 메인 헤더 부분을 만들어 보았는데, 맨날 보던 창을 내가 직접 만들어 보니
느낌이 색달랐고 생각보다 만드는 방법이 지금까지 연습했던 카피캣 만으로도
유사하게 만들어 낼 수 있어서 신기했다.