Bootstrap - Pagination: A Comprehensive Guide for Beginners

안녕하세요, 야심찬 웹 개발자 여러분! 오늘 우리는 Bootstrap 페이지네이션의 세계로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해드리는 것을 기쁘게 생각합니다. 코딩에 새로운 사람이라也不用担心 - 우리는 기본부터 시작해 점진적으로 올라갈 거예요. 이 튜토리얼이 끝나면, 여러분은 페이지네이션의 달인이 될 거예요!

What is Pagination?

먼저 Bootstrap에 뛰어들기 전에, 페이지네이션이 무엇인지 이해해 보겠습니다. 긴 책을 읽고 계신 상상해 보세요. 모든 내용을 한 페이지에 짧게 늘어놓지 않고, 관리 가능한 조각으로 나누는 것 - 디지털 세계에서의 페이지네이션입니다. 이는 대량의 콘텐츠를 여러 페이지로 정리하여 사용자가 더 쉽게 이동할 수 있도록 도와줍니다.

Bootstrap Pagination: The Basics

Bootstrap, 우리의 신뢰할 수 있는 프론트엔드 도구 모음이, 간단하고 스타일리시한 방법으로 페이지네이션을 만들 수 있게 해줍니다. 기본적인 것으로 시작해 보겠습니다.

Simple Pagination

Bootstrap에서 기본적인 페이지네이션을 만들기 위해 <nav>과 <ul> 요소를 특정 클래스와 함께 사용합니다. 다음은 간단한 예제입니다:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>

이를 다음과 같이 설명할 수 있습니다:

• <nav> 요소는 페이지네이션을 래핑하여语意적 목적을 위해 사용됩니다.
• <ul> 요소는 pagination 클래스를 가지고 있어 Bootstrap의 페이지네이션 스타일을 적용합니다.
• 각 <li>는 페이지를 나타내며 page-item 클래스를 가집니다.
• <a> 태그는 각 <li> 내부에 있으며 page-link 클래스를 가지고 있어 클릭 가능한 부분을 스타일링합니다.

Working with Icons

페이지네이션이 더 멋지게 보이고 싶으신가요? 아이콘을 추가해 보세요! Bootstrap은 Font Awesome와 같은 아이콘 라이브러리와 잘 작동합니다. 아이콘을 페이지네이션에 사용하는 방법을 보여드리겠습니다:

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>

이 예제에서는 «와 »를 사용하여 왼쪽과 오른쪽 화살표 아이콘을 만들었습니다. 이는 HTML 엔티티로, 각각 «와»로 렌더링됩니다.

Pagination States: Disabled and Active

때로는 현재 페이지를 강조하거나 특정 导航 옵션을 비활성화하고 싶을 수 있습니다. Bootstrap은 active와 disabled 클래스를 사용하여 이를 쉽게 할 수 있게 해줍니다.

<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

여기서 "Previous" 링크는 비활성화되어 있으며, 페이지 2는 현재 선택된 상태로 강조됩니다.

Sizing

Goldilocks와 같이, 때로는 페이지네이션이 적절한 크기가 필요할 수 있습니다. Bootstrap은 다양한 크기 옵션을 제공합니다:

<!-- Large pagination -->
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>

<!-- Small pagination -->
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>

pagination-lg를 추가하여 더 큰 페이지네이션을 만들거나, pagination-sm를 추가하여 더 작은 페이지네이션을 만들 수 있습니다. 커피숍에서 그란데 또는 탈을 선택하는 것과 같은 것입니다!

Alignment

기본적으로 페이지네이션은 왼쪽에 정렬됩니다. 하지만 중앙이나 오른쪽으로 정렬하고 싶다면요? Bootstrap은 이를 도와줍니다:

<!-- Center alignment -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

<!-- Right alignment -->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>

justify-content-center를 사용하여 페이지네이션을 중앙에 정렬하거나, justify-content-end를 사용하여 오른쪽에 정렬할 수 있습니다.

Alignment Using a Flex Utility

페이지네이션 정렬에 더 많은 제어를 원하신다면, Bootstrap의 flex 유틸리티를 사용할 수 있습니다:

<nav aria-label="Page navigation">
<div class="d-flex justify-content-center">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<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"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</div>
</nav>

여기서 우리는 페이지네이션을 감싸는 <div>에 d-flex와 justify-content-center 클래스를 추가했습니다. 이는 페이지네이션 위치를 더 유연하게 설정할 수 있게 해줍니다.

Conclusion

그렇다면 여러분! Bootstrap 페이지네이션의 대장정을 마치셨습니다. 기본 구조에서 멋진 정렬까지, 여러분은 이제 웹 프로젝트에 아름답고 기능적인 페이지네이션을 만들 수 있는 도구를 가지고 있습니다. 연습이 완벽을 만든다는 것을 기억하세요, 그러므로 이 예제들을 실험해 보지 마세요.

여기서 다루었던 클래스들의 빠른 참조 표입니다:

Class	Purpose
pagination	기본 페이지네이션 구조를 만듭니다
page-item	각 페이지 요소를 스타일링합니다
page-link	클릭 가능한 부분을 스타일링합니다
active	현재 페이지를 강조합니다
disabled	페이지 요소를 비활성화합니다
pagination-lg	더 큰 페이지네이션을 만듭니다
pagination-sm	더 작은 페이지네이션을 만듭니다
justify-content-center	페이지네이션을 중앙에 정렬합니다
justify-content-end	페이지네이션을 오른쪽에 정렬합니다
d-flex	flex 컨테이너를 만듭니다

행복하게 코딩하시고, 여러분의 페이지가 항상 완벽하게 페이지네이션이 되길 바랍니다!

Credits: Image by storyset