Breadcrumb 깔끔하게 정리하기

이번에 제가 front-end 관련 프로젝트에 투입되면서요.
 - Breadcrumb에 대해서 정리하려고 하는데요 

Breadcrumb은 한마디로 정리하자면, 
 - CSS를 통해 구분 기호를 자동으로 추가하는 탐색 계층 구조 내에서 현재 페이지의 위치를 나타냅니다.

우선 사용방법을 차근차근 말씀드리자면...
당근! Bootstrap 을 해당 폴더에 저장하셔야 하고요..

위의 파일을 압축 푸시면요 아래와 같이 css / fonts / js 디렉토리로 구성되어 있는데요..

아래와 같이 html 관련 head 에 세팅하시면 됩니다. 
 - css / js 

그리고, 아래와 같이 코딩하신 후 웹브라우저에서 실행하시면 bootstrap 를 활용해서 이쁜(?) Breadcrumb 를 보실 수 있습니다.

아래는 실행결과입니다.

추가적으로 구분자에 대해서 설명드리자면요..

Dividers

분할자는 ::before 및 content 를 통해 CSS에 자동으로 추가되고요..
로컬 CSS 사용자 정의 속성 --bs-breadcrumb-divider 를 수정하거나 $breadcrumb-divider Sass 변수를 통해 변경할 수 있으며 필요한 경우 RTL 대응 항목에 대해 $breadcrumb-divider-flipped 사용할 수 있고요..

그리고, 기본적으로 사용자 지정 속성에 대한 폴백으로 설정된 Sass 변수를 사용합니다. 
당근!! 이렇게하시면 언제든지 CSS를 다시 컴파일하지 않고도 재정의 할 수있는 전역 구분선을 얻을 수 있겠죠?

<nav style="--bs-breadcrumb-divider: '>';" 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>

그리고, Sass를 통해 수정할 때 문자열 주위에 따옴표를 생성하려면 quote 함수가 필요하고요..
 - 예를 들어 > 를 구분선으로 사용하면 다음을 사용할 수 있습니다.

$breadcrumb-divider: quote(">");

 

추가적으로, 삽입 된 SVG 아이콘 을 사용할 수도 있습니다 .
CSS 사용자 정의 속성을 통해 적용하거나 Sass 변수를 사용하시면 됩니다. 

<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" 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>

$breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E");

구분선 설정 --bs-breadcrumb-divider: ''; (CSS 사용자 정의 속성의 빈 문자열은 값으로 계산) 또는 Sass 변수를 $breadcrumb-divider: none; .

예시는 아래와 같고요..

<nav style="--bs-breadcrumb-divider: '';" 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>

$breadcrumb-divider: none;

 

아무튼 오늘 블로그는 여기까지고요...

이만 줄이겠습니다. 
항상 믿고 봐주셔서 감사합니다..

오늘도 마지막까지 제 글을 끝까지 읽어주셔서 진심으로 감사드리고, 제 글이 조금이라도 여러분의 각자의 삶을 살아가시는데 도움이 되셨길 기원합니다.

앞으로도 더욱 좋은 블로그를 남기는 제가 되도록 노력하겠습니다.

​그리고, 제 글을 읽으시면 말이 됩니다.
항상 말에는 반드시 삶을 움직이는 힘이 있습니다.
제가 열심히 정성스럽게 정리한 저만의 지식과 1일 1블로그하는 제 블로그에 담긴 글들을 통해서,
여러분들의 삶과 운명을 반드시 조각하고 움직이시길 기원합니다.​

이상입니다. 감사합니다.