---

과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권38 유튜브2_210613(2/3)
주제 : html / css

---

유튜브 페이지 카피

페이지 상단의 nav영역, 그곳을 채우는 여러 오브젝트들의 설계도면, 디자인 작업이다.

<div id="wrapper">
		
	<nav id="youtube_top_nav">

		<div class="youtube-top-wrap flex-align-between">
			<div class="nav-left flex-align-start">
				<button class="btn-menu" type="button"></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" type="button"></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 영역을 유튜브 로고, 검색창 그리고 로그인 3부분으로 나누어 주었다. 각 영역의 배치는 flex속성을 사용해 주었는데 가운데 영역을 차지하는 검색창 오브젝트는 position: absolute;를 사용하는 중앙정렬 방법을 적용해 주었다.

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

부모태그에 flex의 space-between 속성이 적용되어 있어 중앙으로 정열됨은 물론 속성이 없더라도 중앙으로 위치하는데, 다시금 정렬을 시켜주는 이유는 잘 이해가 되지 않았다. 아마 브라우저의 크기 조절에 맞춰 정렬하기 위해서가 아닐까 생각해 본니다.

---

Review

css의 속성의 사용방법에는 같은 결과를 나타내는 코드가 몇몇 있다. 단순히 발전된 코딩의 형태라고 볼 수도 있겠다만 분명 웹 개발의 조건과 환경에 따라 각각을 특징에 맞춰 사용해야할 필요를 느낀다. 지금은 각 코딩방법의 특징들을 이해하지 못하지만 작은 차이에도 맞춰 코딩을 할 수 있는 역량을 기르겠다.