작성 방법: 고정폭 네비게이션 링크

고정폭 네비게이션 링크를 포함한 네비게이션 패널을 어떻게 생성하는지 배웁니다.

반응형 네비게이션 패널 생성

第一步 - HTML 추가:

<!-- 네비게이션 메뉴 -->
<div class="navbar">
  <a class="active" href="#">홈</a>
  <a href="#">검색</a>
  <a href="#">연락처</a>
  <a href="#">로그인</a>
</div>

第二步 - CSS 추가:

/* 네비게이션 메뉴 스타일 설정 */
.navbar {
  width: 100%;
  background-color: #555;
  overflow: auto;
}
/* 네비게이션 링크 */
.navbar a {
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 25%; /* 네 가지 고정폭 링크. 두 개의 링크가 있으면 50%，세 개의 링크가 있으면 33.33%，이를 계속 확장합니다. */
  text-align: center; /* 텍스트를 중앙에 정렬하려면 */
}
/* 마우스 오버 시 배경색 추가 */
.navbar a:hover {
  background-color: #000;
}
/* 현재/활성 링크 스타일 설정 */
.navbar a.active {
  background-color: #04AA6D;
}
/* 반응성을 추가 - 500 픽셀 미만의 화면에서 네비게이션 링크가 쌓이도록 표시되고, 골라서 표시되지 않도록 합니다 */
@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; /* 텍스트가 작은 화면에서 왼쪽 정렬되도록 하고 싶다면 */
  }
}

직접 시도해보세요

관련 페이지

강의:CSS 네비게이션 바