한국어

CSS 튜토리얼

CSS3 튜토리얼

CSS 고급

CSS 참조

CSS 응답형

CSS - Pagination: A Beginner's Guide

안녕하세요, 미래의 웹 디자인 슈퍼스타 여러분! 오늘 우리는 CSS 페이지네이션의 fascinatin한 세계로 접수하겠습니다. 코드를 한 줄도 작성해본 적이 없으신 분들도 걱정하지 마세요 - 이 흥미로운 여정에서 여러분의 친절한 안내자가 되겠습니다. 이 튜토리얼이 끝나면, 여러분은 프로처럼 아름답고 기능적인 페이지네이션을 만들 수 있을 것입니다!

CSS - Pagination

What is Pagination?

먼저, 페이지네이션이 정확히 무엇인지 이야기해보겠습니다. 책을 읽는다고 상상해보세요. 모든 텍스트가 하나의 무한히 긴 페이지에 짐벼라짐벼라 밀려 있지 않고, 관리 가능한 조각으로 나뉘어져 있습니다 - 이것이 물리적인 세계에서의 페이지네이션입니다. 웹사이트에서는 페이지네이션을 통해 긴 콘텐츠 목록(검색 결과나 블로그 게시물 등)을 별도의 페이지로 나눕니다. 이는 사용자들에게 가상의 "페이지를 돌리는" 버튼을 주는 것과 같습니다!

이제 손을 걷어붙이고 시작해보겠습니다!

Step 1: Add HTML Markup

먼저, 우리의 페이지네이션을 위한 기본 구조를 만들어야 합니다. 이를 우리의 디자인의 뼈대로 생각해보세요.

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

이 예제에서 우리는 클래스 "pagination"을 가진 <div>를 만듭니다. 안쪽에는 여러 개의 <a> 태그(링크)가 있으며, 이는 우리의 페이지 번호를 나타냅니다. &laquo;와 &raquo;는 왼쪽과 오른쪽 화살표 특수 문자입니다 - 멋지죠?

Step 2: Define CSS Classes

이제 뼈대가 완성되었으므로, 조금 더 스타일을 더해보겠습니다. 우리는 기본적인 CSS를 사용하여 페이지네이션에 형태를 부여하겠습니다.

.pagination {
display: inline-block;
}

.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}

이 코드는 다음과 같은 작용을 합니다:

  • display: inline-block;는 우리의 페이지네이션 컨테이너를 인라인 요소로 행동하게 하지만 width와 height를 설정할 수 있게 합니다.
  • 우리의 pagination div 내 모든 <a> 태그를 스타일링합니다.
  • float: left;는 링크를 수평으로 정렬합니다.
  • padding은 텍스트 주변에 공간을 제공합니다.
  • text-decoration: none;는 링크 아래줄을 제거합니다.

Step 3: Pagination Link Styles

이제 우리의 페이지네이션 링크를 좀 더 흥미롭게 만들어보겠습니다!

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

이 코드는 두 가지 멋진 작용을 합니다:

  1. "active" 페이지(현재 페이지)를 녹색 배경과 白色 텍스트로 스타일링합니다.
  2. 다른 모든 링크에 호버 효과를 추가하여 마우스를 올리면 배경색이 변합니다.

CSS Simple Pagination

축하합니다! 여러분은 간단하고 기능적인 페이지네이션을 만들었습니다. 하지만 여기서 멈추지 마세요! 더 흥미로운 변형을 탐구해보겠습니다!

CSS Active and Hoverable Pagination

페이지네이션을 더 상호작용적으로 만들고 싶으신가요? 이를 시도해보세요:

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: white;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

transition 속성은 링크를 호버할 때 배경색이 부드럽게 변하는 효과를 추가합니다. 마법 같죠!

CSS Rounded Active and Hoverable Buttons

버튼에 둥근 모서리를 주어보겠습니다:

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius는 버튼의 모서리를 둥글게 하고, margin은 그 사이에 공간을 추가합니다. 멋지죠?

CSS Hoverable Transition Effect

조금 더 매력을 더해보겠습니다. 이 부드러운 확대 효과를 시도해보세요:

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

이제 링크를 호버할 때 약간 커집니다. 손을 뻗어 클릭하려고 합니다!

CSS Bordered Pagination

페이지네이션을 더 두드러지게 하기 위해 테두리를 추가해보겠습니다:

.pagination a {
border: 1px solid #ddd;
}

이 간단한 줄은 각 링크 주변에 연한 회색 테두리를 추가합니다. 작은 변화가 큰 차이를 만들 수 있습니다!

CSS Rounded Borders

테두리를 부드럽게 하기 위해 둥근 모서리를 시도해보겠습니다:

.pagination a {
border-radius: 50%;
}

이렇게 하면 우리의 사각형 버튼을 완전한 원으로 만듭니다. 얼마나 멋질까요?

CSS Space Between Links

occasionally, we need a little more breathing room:

.pagination a {
margin: 0 4px;
}

이는 각 링크 사이에 작은 간격을 추가하여 페이지네이션에 더 넓은 느낌을 줍니다.

CSS Pagination Size

한尺寸并不适合所有人。让我们来学习如何调整大小：

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

这些值进行实验，以找到适合您设计的完美尺寸！

CSS Centered Pagination

想要您的分页在页面中间看起来很漂亮吗？

.pagination {
text-align: center;
}

这行简单的代码将使您的整个分页块居中。魔法！

CSS Pagination With Next Previous Buttons

让我们添加一些导航按钮：

<div class="pagination">
<a href="#">&laquo; Previous</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Next &raquo;</a>
</div>
.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

这添加了“Previous”和“Next”按钮，并以不同的方式设置样式。

CSS Pagination With Breadcrumb

想要向用户展示他们在页面序列中的位置吗？试试这个：

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Page 2 of 3</p>
</div>
.pagination p {
margin-left: 10px;
display: inline-block;
}

这添加了一个文本指示器，显示当前页面和总页面数。

CSS Pagination With List

最后，让我们尝试列表样式的分页：

<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#" class="active">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">&raquo;</a></li>
</ul>
.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

这创建了一个干净한 목록式的 페이지네이션 레이아웃.

그렇게 해서 여러분은 CSS 페이지네이션의 내와 밖을 배웠습니다. 이 기술을 마스터하는 열쇠는 연습입니다. 그러니 이 스타일을 실험하고, 혼합하고, 자신만의 독특한 페이지네이션 디자인을 만들어보세요. 누가 알략니까? 여러분이 웹 디자인의 다음 큰 물결을 만들 수 있을지도 모릅니다!

기쁜 코딩을 하시고, 여러분의 페이지는 항상 완벽하게 페이지네이션이 되기를 바랍니다!

Credits: Image by storyset

이전 튜토리얼:
CSS - 버튼
다음 튜토리얼:
CSS - 변수