하단 내비게이션(bottom navigation) 메뉴는 모바일 웹사이트나 앱에서 흔히 볼 수 있는 UI 요소로, 화면 아래쪽에 고정되어 있어 사용자가 언제든지 주요 메뉴에 빠르게 접근할 수 있다는 장점이 있습니다. CSS의 position: fixed 속성을 활용하면 몇 줄의 코드만으로도 손쉽게 구현할 수 있습니다.
전체 예제 코드
다음은 CSS를 이용해 하단 내비게이션 메뉴를 만드는 전체 코드입니다.
<!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:10px;
padding: 0px;
}
nav{
position: fixed;
bottom: 0;
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h2>Bottom navigation menu</h2>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#"> Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
</body>
</html>핵심 CSS 속성 살펴보기
- position: fixed; bottom: 0; — 내비게이션 바를 브라우저 화면의 맨 아래에 고정시킵니다. 페이지를 스크롤해도 항상 하단에 유지됩니다.
- width: 100%; — 내비게이션 바가 화면 전체 너비를 차지하도록 설정합니다.
- background-color — 어두운 배경색(rgb(39, 39, 39))을 적용해 메뉴 항목과 대비를 만듭니다.
- .links 클래스 — 각 메뉴 링크를 인라인 블록으로 배치하고, 패딩과 글자색, 폰트 크기를 지정해 클릭하기 편한 버튼 형태로 만듭니다.
- :hover 효과 — 마우스를 올렸을 때 배경색이 밝아지도록 하여 사용자에게 시각적 피드백을 제공합니다.
- .selected 클래스 — 현재 머무르고 있는 페이지의 메뉴 항목을 다른 배경색으로 강조합니다.
실행 결과
위 코드를 실행하면 화면 하단에 어두운 배경의 내비게이션 바가 고정되고, Home, Login, Register, Contact Us, More Info 메뉴가 가로로 나열된 것을 확인할 수 있습니다. 마우스를 메뉴 위에 올리면 배경색이 변하고, 선택된 항목은 진한 남색 배경으로 강조됩니다.
마무리
이처럼 position: fixed와 간단한 링크 스타일링만으로도 실용적인 하단 내비게이션 메뉴를 만들 수 있습니다. 여기에 반응형 디자인이나 아이콘 추가 등을 적용하면 더욱 완성도 높은 모바일 친화적인 UI를 구현할 수 있습니다.