[SeSAC Front-end] CSS flex를 이용한 Youtube Navbar 만들기

Harimad·2022년 10월 27일

css

목록 보기

2/6

0. Intro

flex 속성은 CSS에서 중요한 개념 중에 하나입니다.
flex 속성을 이해하고 있으면 가로, 세로 정렬을 쉽게 할 수 있습니다.
또한 반응형 웹을 만드는데 도움이 됩니다.
이번 장에서는 Flexbox란 무엇인지 확인하고, CSS display flex 속성을 이용해서 유튜브 Navbar를 만들어 보겠습니다.

1. Flexbox란?

Flexbox는 CSS3의 새로운 layout 방식입니다.

기존의 layout은 Position, Float, Table태그를 이용했습니다.
하지만 기존의 layout은 단점이 있습니다.
먼저 복잡하고 시간이 오래걸립니다.
또 박스 안 아이템들의 수직 정렬 등에 제약이 있습니다.

플렉스 박스(Flex Box)를 이용하면 가변적인 박스를 만들 수 있습니다.
박스 요소를 자유롭게 배치할 수 있게 됩니다.
반응형 웹사이트를 만드는데에 적합한 기술입니다.

먼저, display: flex 속성을 어느 영역에 줘야하는지 알아야 합니다.
그래서 위의 이미지에서 영역을 나눠줘야 합니다.
이미지를 나누면 아래의 그림처럼 나눌 수 있습니다.

display: flex를 줘야하는 영역은 다음과 같습니다.
체크가 되어있는 영역에 display:flex를 주면 자식영역을 정렬할 수 있습니다.

3. 코드 확인

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Youtube Navbar</title>
	<!-- font awesome cdn -->
	<script src="https://kit.fontawesome.com/fb38926c9b.js" crossorigin="anonymous"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		nav {
			display: flex;
			justify-content: space-between;
			padding: 1rem;
			background-color: black;
			color: white;
		}

		.titleArea {
			display: flex;
			align-items: center;
		}

		.logoArea {
			display: flex;
			font-size: 1rem;
		}

		.logoArea p {
			font-size: 1.3rem;
			font-weight: 700;
		}

		.toggleBtn {
			margin-right: 1rem;
		}

		.logoArea p:first-child {
			margin-right: 0.2rem;
			color: red;
		}

		.buttonArea {
			display: flex;
			align-items: center;
		}

		.buttonArea p {
			margin-right: 0.4rem;
		}

	</style>
</head>

<body>
	<nav>
		<!-- Title Area -->
		<div class="titleArea">
			<p class="toggleBtn"><i class="fa-solid fa-bars"></i></p>
			<div class="logoArea">
				<p><i class="fa-brands fa-youtube"></i></p>
				<p>Premium</p>
			</div>
		</div>
		<!-- Button Area -->
		<div class="buttonArea">
			<p><i class="fa-solid fa-magnifying-glass"></i></p>
			<p><i class="fa-solid fa-microphone"></i></p>
			<p><i class="fa-solid fa-video"></i></p>
			<p><i class="fa-solid fa-bell"></i></p>
			<p><i class="fa-sharp fa-solid fa-image-portrait"></i></p>
		</div>

	</nav>
</body>

</html>