제작 방법: CSS 브랜치 네비게이션

CSS를 사용하여 브랜치 네비게이션을 만들어보세요.

직접 시도해보세요

브랜치 네비게이션 생성 방법

브랜치 네비게이션은 사용자가 이전에 방문한 각 페이지의 링크를 제공하고, 사용자가 웹사이트에서의 현재 위치를 표시합니다.

第一步 - HTML 추가:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

第二步 - CSS 추가:

/* 목록 스타일 설정 */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
/* 목록 항목을 가로로 표시 */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
/* 각 목록 항목前后에 슬래시 기호 (/) 추가 */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
/* 목록 내 모든 링크에 색상 추가 */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
/* 마우스 오버시 색상 추가 */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

직접 시도해보세요

관련 페이지

강의:CSS 페이지네이션