CSS로 왼쪽 정렬 및 오른쪽 정렬 링크가 있는 내비게이션 바 만들기
웹사이트 상단의 내비게이션 바에서는 로고나 주요 메뉴를 왼쪽에, 로그인·문의하기 같은 보조 메뉴를 오른쪽에 배치하는 경우가 많습니다. 이때 CSS의 Flexbox를 활용하면 별도의 float나 position 트릭 없이도 손쉽게 양쪽 정렬 레이아웃을 구현할 수 있습니다.
핵심 아이디어는 다음과 같습니다.
<nav>요소에display: flex를 적용해 자식 요소들을 가로 방향으로 배치합니다.- 왼쪽 링크 컨테이너(
.left-links)에flex: 1 1 200px;를 지정하여 남은 공간을 모두 차지하게 합니다. 그러면 오른쪽 링크 컨테이너는 자연스럽게 화면 오른쪽 끝으로 밀려납니다. - 링크에는 패딩과 hover 시 밑줄 효과를 추가해 사용자 경험을 높입니다.
예제 코드
다음은 왼쪽 정렬 링크와 오른쪽 정렬 링크를 함께 가지는 내비게이션 바의 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0px;
margin-top:60px;
padding: 0px;
}
nav{
display: flex;
position: fixed;
top:0;
width: 100%;
background-color: rgb(251, 255, 196);
overflow: auto;
height: auto;
}
.left-links{
flex:1 1 200px;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 17px;
font-weight: bolder;
}
.links:hover {
border-bottom: 2px solid purple;
}
.selected{
border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<div class="left-links">
<a class="links selected" href="#">Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
</div>
<div class="right-links">
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</div>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>실행 결과
위 코드를 실행하면 노란색 배경의 고정형(fixed) 내비게이션 바가 화면 최상단에 나타나며, Home · Login · Register 링크는 왼쪽에, Contact Us · More Info 링크는 오른쪽에 정렬됩니다. 또한 마우스를 링크 위에 올리면(hover) 보라색 밑줄이 표시되고, 현재 선택된 메뉴(.selected 클래스) 역시 동일한 스타일로 강조됩니다.
정리
이처럼 Flexbox의 flex: 1 속성만으로도 왼쪽 메뉴와 오른쪽 메뉴를 깔끔하게 분리할 수 있습니다. 반응형 웹에서도 컨테이너 너비에 따라 자동으로 공간이 조절되므로, 추가 미디어 쿼리 없이도 안정적인 내비게이션 바 레이아웃을 유지할 수 있다는 점이 큰 장점입니다.