이번 시간에는 부트스트랩 Breadcrumb에 대해서 알아보자.
사이트 이동 경로(Breadcrumb trail)는 사용자 인터페이스에서 현재 사용자가 어떤 위치에 있는지를 시각적으로 나타내는 기법 중 하나이다. 이 기법의 영어 이름은 《헨젤과 그레텔》에서 집을 찾기 위해 남매가 뿌리는 빵 부스러기에서 유래했다.
출처 : https://ko.wikipedia.org/wiki/%EC%82%AC%EC%9D%B4%ED%8A%B8_%EC%9D%B4%EB%8F%99_%EA%B2%BD%EB%A1%9C
위에서 설명한 것과 같이 사용자가 사이트내에서 현재 어느 위치에 있는지를 알려주는 네비게이션이라고 생각하면 쉽게 이해가 갈것이다.
예제에서 사용된 클래스는 breadcrumb / breadcrumb-item / active 를 참고하면 되겠다.
적용모습
소스코드
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
분리기호의 수정
예제에서 부트스트랩의 breadcrumb의 기본 분리기호는 / 을 사용하고 있다.
개인적으로 이 분리기호를 변경하고 싶은 경우 css파일에서 변경하면 되겠다. breadcrumb-item 클래스를 보면 content속성이 있다. 여기에 "/" 로 되어 있는 것을 사용자가 원하는 ">"(예) 으로 변경하면 되겠다.
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: "/";
}어렵지 않죠?? 따라하시면 쉽게 적용가능합니다.
분리기호가 제대로 안보이고 겹쳐보일 수 있습니다. 로컬이나 개인적으로 하시면 제대로 나올겁니다.
