コース名称:大邱AI学校一般コース
講座:ネットプログラミング金仁権38 YouTube 2 210613(2/3)
件名:html/css

YouTubeページコピー

ページ上部の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領域をyoutube logo、検索ウィンドウ、ログインの3つの部分に分けます.各領域のレイアウトはflex属性を使用し、中間領域を占める検索ウィンドウオブジェクトはposition: absolute;の中央ソート方法を使用する.

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

親ラベルにはflexのspace-between属性が適用されており、中央に配列されているだけでなく、属性がなくても中央に位置しているため、並べ替えの原因はよくわかりません.ブラウザのサイズを調整するためかもしれません.

Review

cssプロパティの使用方法には、同じ結果を表すコードがあります.開発された符号化形式ともいえるが,Web開発の条件や環境によっては,それぞれの特徴に基づいてそれらを使用する必要があると感じた.現在では、それぞれの符号化方法の特徴は理解されていませんが、微小な違いに基づいて符号化できる能力を育成します.