🔵 Bootstrap 페이지네이션 UI에서 현재 페이지 강조하기

🔵 Bootstrap 페이지네이션 UI에서 현재 페이지 강조하기

---

🎯 목표

Bootstrap의 기본 페이지네이션 UI를 이용해 현재 페이지(active) 를 파란색으로 강조하는 방법을 배웁니다.
이를 통해 사용자에게 현재 위치를 명확하게 보여주는 UX 향상을 기대할 수 있습니다.

---

🧱 Bootstrap 페이지네이션 기본 구조

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item active"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">4</a></li>
</ul>

• page-item: 각 페이지 버튼을 감싸는 <li>에 적용
• page-link: 실제 페이지 번호가 표시되는 <a> 태그
• active: 현재 페이지에만 추가하여 강조 효과 적용

---

✅ 핵심: active 클래스의 위치

<li class="page-item active">
  <a class="page-link" href="#">3</a>
</li>

🔹 이 구조에서 active 클래스는 li.page-item에 붙는 것이 표준입니다.

하지만 아래처럼 작성하면 잘못된 구조가 됩니다:

<li class="page-item">
  <a class="page-link active" href="#">3</a>
</li>

• 이렇게 해도 일부 스타일은 적용되지만, 파란 배경이 반쪽만 적용되거나 깨질 수 있습니다
• Bootstrap은 li.active > a.page-link 구조를 기준으로 스타일을 구성하기 때문입니다

---

🎨 실제 스타일 적용 (Bootstrap 5 기준)

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;  /* 파란 배경 */
  border-color: #0d6efd;
}

---

🛠 Django 템플릿에서 현재 페이지 감지하기

{% for i in page_obj.paginator.page_range %}
  {% if page_obj.number == i %}
    <li class="page-item active">
      <a class="page-link" href="#">{{ i }}</a>
    </li>
  {% else %}
    <li class="page-item">
      <a class="page-link" href="?page={{ i }}">{{ i }}</a>
    </li>
  {% endif %}
{% endfor %}

• page_obj.number: 현재 페이지 번호
• page_obj.paginator.page_range: 전체 페이지 범위
• 조건문을 통해 현재 페이지에만 .active 클래스 적용

---

❗ href="#"의 의미와 주의점

• href="#"는 "현재 페이지의 최상단으로 이동"을 의미합니다
• 실제 페이지 이동이 필요할 경우 ?page={{ i }} 형식으로 작성해야 합니다

<a href="?page={{ i }}">{{ i }}</a>

---

✅ 요약 정리

요소 역할 주의사항

li.page-item	페이지 버튼 컨테이너	.active 클래스는 여기에 적용
a.page-link	실제 링크 요소	텍스트는 이 안에 있어야 함
.active	현재 페이지 강조용 클래스	li에 붙여야 배경 적용됨
href="#"	임시 링크 또는 최상단 이동	실제 이동은 ?page=숫자 사용

---

이제 Bootstrap 페이지네이션에서 현재 페이지를 시각적으로 명확히 표시하는 방법을 정확히 이해하고 사용할 수 있습니다 🔵