사이트를 보면 제일 상단에 위치하며 메인로고와 각종 버튼들이 있다. 또한 사용자가 스크롤을 내려도 해당 바는 사라지지 않고 사용자의 이동을 따라다닌다. 해당 기능은 HTML 문서 내에서 기능을 구현할 수 있고 CSS도 기본적으로 받쳐줘야한다.
이 기능에 대해 기본 구조를 알아보자.
HTML
//HTML 문서 구조--
<body>
<header>
<nav>
<div class="logo">
<a href="#">로고</a>
</div>
<ul class="nav-links">
<li><a href="#">홈</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">포트폴리오</a></li>
<li><a href="#">연락</a></li>
</ul>
</nav>
</header>
<!-- 페이지 내용 -->
</body>
</html>
CSS
/* 네비게이션 바 스타일링 */
header {
background-color: #333; /* 네비게이션 바 배경색 */
color: #fff; /* 텍스트 색상 */
padding: 20px 0; /* 위아래 패딩 */
position: fixed; /* 화면 상단 고정 */
width: 100%; /* 너비 100% */
top: 0; /* 화면 상단으로 고정 */
}
nav {
display: flex; /* 아이템을 가로로 정렬 */
justify-content: space-between; /* 로고와 네비게이션 링크 간격을 최대로 설정 */
align-items: center; /* 수직 정렬을 중앙으로 설정 */
max-width: 1200px; /* 최대 너비 설정 */
margin: 0 auto; /* 가운데 정렬 */
padding: 0 20px; /* 좌우 패딩 */
}
.logo a {
text-decoration: none; /* 밑줄 제거 */
font-size: 24px; /* 로고 텍스트 크기 */
font-weight: bold; /* 글꼴 두껍게 */
color: #fff; /* 로고 텍스트 색상 */
}
ul.nav-links {
list-style: none; /* 목록 기호 제거 */
display: flex; /* 네비게이션 링크를 가로로 정렬 */
gap: 20px; /* 링크 간격 설정 */
}
ul.nav-links li a {
text-decoration: none; /* 밑줄 제거 */
color: #fff; /* 링크 텍스트 색상 */
font-size: 16px; /* 링크 텍스트 크기 */
font-weight: bold; /* 글꼴 두껍게 */
}
/* 호버 효과 추가 (선택 사항) */
ul.nav-links li a:hover {
color: #f00; /* 호버 시 링크 텍스트 색상 변경 */
}
'HTML , CSS , JS' 카테고리의 다른 글
| 투 두 리스트 (ToDoList) 페이지 만들기 (0) | 2023.11.06 |
|---|---|
| <div> (0) | 2023.09.30 |