웹 페이지에서 내비게이션 바(탐색 메뉴)를 항상 화면 하단에 고정하고 싶다면 position: fixed 속성과 bottom 속성을 함께 사용하면 됩니다.
핵심 원리
position: fixed;는 요소를 뷰포트(브라우저 화면) 기준으로 고정시키는 속성입니다. 여기에 bottom: 0;을 지정하면 해당 요소가 화면 맨 아래에 붙어 있게 되며, 페이지를 스크롤해도 내비게이션 바가 항상 하단에 유지됩니다.
- position: fixed; — 요소를 화면 기준으로 고정
- bottom: 0; — 화면 하단에 배치
- width: 100%; — 내비게이션 바가 화면 전체 너비를 차지하도록 설정
- list-style-type: none; — 목록의 기본 불릿(점) 제거
예제 코드
아래 코드를 실행하면 스크롤과 상관없이 항상 화면 하단에 고정된 메뉴를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
position: fixed;
bottom: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid white;
}
li a {
display: block;
padding: 8px;
background-color: orange;
}
li:last-child {
border-right: none;
}
div {
padding:10px;
margin-top:10px;
background-color:white;
height:1000px;
}
</style>
</head>
<body>
<ul>
<li><a href = "#home">Home</a></li>
<li><a href = "#news">News</a></li>
<li><a href = "#contact">Contact</a></li>
<li><a href = "#about">About</a></li>
</ul>
<div>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
<p>Adding demo text to check fixed menu.</p>
</div>
</body>
</html>코드 설명
1. 내비게이션 바(ul) 스타일
ul 요소에 position: fixed;와 bottom: 0;을 적용해 화면 하단에 고정하고, width: 100%;로 전체 너비를 차지하게 했습니다. 또한 list-style-type: none;으로 기본 불릿을 제거했습니다.
2. 메뉴 항목(li) 정렬
float: left;를 사용해 각 메뉴 항목이 가로로 나란히 배치되도록 했으며, 항목 사이에는 흰색 1px 구분선(border-right)을 추가했습니다. 마지막 항목은 :last-child 선택자로 구분선을 제거해 깔끔한 마무리를 만들었습니다.
3. 링크(a) 스타일
display: block;과 padding: 8px;을 적용해 클릭 영역을 넓히고, 주황색 배경으로 가독성을 높였습니다.
4. 본문(div) 영역
고정 메뉴의 동작을 확인할 수 있도록 높이를 1000px로 설정해 충분히 스크롤되는 데모 콘텐츠를 넣었습니다. 페이지를 아래로 스크롤해도 메뉴가 계속 하단에 고정되어 있는 것을 확인할 수 있습니다.
참고 사항
float 대신 최신 방법인 Flexbox(display: flex;)를 사용하면 더 깔끔하게 메뉴 항목을 정렬할 수 있습니다. 또한 고정된 내비게이션 바가 본문 콘텐츠를 가리지 않도록, body나 컨테이너에 padding-bottom 값을 충분히 주는 것이 좋습니다.