웹사이트에서 게시글이나 상품 목록처럼 콘텐츠가 많은 경우, 모든 내용을 한 화면에 담기보다 여러 페이지로 나누어 보여주는 것이 좋습니다. 이렇게 페이지를 나누어 탐색할 수 있게 해주는 UI 요소가 바로 페이지네이션(pagination)입니다. 이번 글에서는 자바스크립트 없이 순수 CSS만으로 페이지네이션을 만드는 방법을 예제와 함께 살펴보겠습니다.
CSS 페이지네이션 예제 코드
다음은 CSS로 페이지네이션을 구현한 완전한 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,*::before,*::after{
box-sizing: border-box;
}
.pagePagination{
margin: 15px;
display: inline-block;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h1> Page pagination example </h1>
<div class="pagePagination">
<a class="links" href="#">«</a>
<a class="links selected" href="#">1</a>
<a class="links" href="#">2</a>
<a class="links" href="#">3</a>
<a class="links" href="#">4</a>
<a class="links" href="#">5</a>
<a class="links" href="#">»</a>
</div>
<h2>Hover on the above numbers to see effect</h2>
</body>
</html>
핵심 코드 분석
1. 페이지네이션 컨테이너 (.pagePagination)
.pagePagination 클래스는 페이지 번호들을 감싸는 컨테이너 역할을 합니다. display: inline-block;을 지정해 내용 크기에 맞춰 너비가 결정되도록 하고, 어두운 배경색(rgb(39, 39, 39))을 적용해 주변 콘텐츠와 시각적으로 구분되는 영역을 만들었습니다.
2. 개별 링크 스타일 (.links)
각 페이지 번호는 <a> 태그로 작성되며 .links 클래스로 스타일링됩니다. 충분한 padding(14px)을 주어 클릭 영역을 넓히고, text-decoration: none;으로 기본 밑줄을 제거했습니다. 밝은 보라색 계열의 글자색(rgb(178, 137, 253))이 어두운 배경 위에서 잘 어울립니다.
3. 마우스 오버(hover) 효과
:hover 가상 클래스를 활용하면 사용자가 링크에 마우스를 올렸을 때 배경색이 회색(rgb(100, 100, 100))으로 변경됩니다. 덕분에 어떤 요소가 클릭 가능한지 직관적으로 알 수 있어 사용성이 크게 향상됩니다.
4. 현재 페이지 강조 (.selected)
.selected 클래스는 사용자가 현재 머물러 있는 페이지를 표시합니다. 더 짙은 남색 배경(rgb(0, 18, 43))을 적용해 다른 번호들과 명확하게 구분됩니다.
실행 결과
위 코드를 브라우저에서 실행하면 어두운 배경의 페이지네이션 바가 생성되고, « 버튼과 1~5까지의 페이지 번호, » 버튼이 가로로 정렬된 것을 확인할 수 있습니다. 각 번호에 마우스를 올리면 배경색이 변하는 호버 효과도 함께 동작합니다.
마무리
이처럼 몇 줄의 CSS만으로도 세련된 페이지네이션을 손쉽게 구현할 수 있습니다. 색상 값이나 패딩 크기를 조절해 자신의 웹사이트 디자인에 맞게 커스터마이징해 보세요. 여기에 border-radius로 둥근 모서리를 추가하거나 transition으로 전환 애니메이션을 넣으면 더욱 부드럽고 매력적인 사용자 경험을 제공할 수 있습니다.