[Bootstrap] Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인

안녕하세요. 명월입니다.

이 글은 부트스트랩에서 Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인에 대한 글입니다.

웹 페이지를 만들면 기본적으로 헤더, 푸터, 메뉴를 만듭니다. 그리고 컨텐츠를 중앙에 배치하는 게 일반적인 구조라 생각됩니다.

딱 거기까지만 만들어도 문제는 없는데 왠지 부족하고 불편함을 느낍니다. 많은 사용자가 이제는 웹 네비게이션과 웹 페이징은 기본적인 유저 학습이 되었기 때문에 불편함을 느끼지 않을까 싶습니다.

제 블로그만 해도, 제목 밑에 카테고리와 작성 일시가 배치되어 있고 하단에는 페이징이 배치되어 있습니다.

카테고리를 누르면 해당 글의 카테고리 메뉴가 나오고 하단의 페이징으로 이전, 이후 버튼을 누르면 페이지가 이동합니다.

가장 많이 사용되는 이 두 기능에 대한 디자인이 부트스트랩에 있습니다.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

구현 화면

1. Home
2. Library
3. Data

Breadcrumbs의 경우는 보통 메뉴 밑, 컨텐츠 상단에 배치하는 게 일반적입니다.

<nav aria-label="Page navigation">
  <ul class="pagination">
  	<!-- disabled가 있으면 마우스 커서가 금지표시로 바뀐다. -->
    <li class=disabled>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <!-- 현재 페이지 -->
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

구현 화면

• «
• 1
• 2
• 3
• 4
• 5
• »

일반적으로 페이징은 위처럼 화살표, 숫자가 일반적인데 이전, 다음으로만 표시하는 경우도 있습니다.

<!-- 기본적인 형태 -->
<nav aria-label="...">
  <ul class="pager">
  	<!-- disabled되어 있으면 선택 금지 -->
    <li class="disabled"><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
<!-- 양끝 -->
<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
    <!-- disabled되어 있으면 선택 금지 -->
    <li class="next disabled"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
  </ul>
</nav>

구현 화면

• Previous
• Next

• ← Older
• Newer →

부트스트랩 3.x - https://getbootstrap.com/docs/3.4/components/#breadcrumbs

부트스트랩 4.x - https://getbootstrap.com/docs/4.3/components/breadcrumb/

                 https://getbootstrap.com/docs/4.3/components/pagination/

여기까지 부트스트랩에서 Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인에 대한 설명이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.