고정 메뉴 생성 방법

고정된 상단 메뉴를 생성하는 방법

첫 번째 단계 - HTML 추가

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Some text some text some text some text..</p>
</div>

두 번째 단계 - CSS 추가

고정된 상단 메뉴를 생성하려면 사용하세요 position:fixed 과 top:0주의하세요, 고정된 메뉴는 다른 내용을 덮습니다. 이 문제를 해결하려면, 메뉴 높이와 같거나 더 큰 상단 외부 여백(margin-top)을 추가하세요.

/* 탐색 표시줄 */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* 탐색 표시줄을 고정 위치로 설정 */
  top: 0; /* 탐색 표시줄을 페이지 상단에 배치 */
  width: 100%; /* 전체 너비 */
}
/* 탐색 표시줄 내의 링크 */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 마우스 오버 시 배경 변경 */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* 주요 내용 */
.main {
  margin-top: 30px; /* 추가하려는 상단 외부 여백을 피하기 위해 */
}

직접 시도해 보세요

고정된 하단 메뉴를 생성하는 방법

고정된 하단 메뉴를 생성하려면 사용하세요 position:fixed 과 bottom:0：

/* 탐색 표시줄 */
.navbar {
  position: fixed; /* 탐색 표시줄을 고정 위치로 설정 */
  bottom: 0; /* 탐색 표시줄을 페이지 하단에 배치 */
  width: 100%; /* 전체 너비 */
}
/* 주요 내용 */
.main {
  margin-bottom: 30px; /* 추가하려는 하단 외부 여백을 피하기 위해 */
}

직접 시도해 보세요

관련 페이지

강의:CSS 네비게이션 바