CSS로 페이지 매김 스타일 설정하기
웹사이트에서 게시글 목록이나 검색 결과처럼 많은 콘텐츠를 여러 페이지로 나누어 보여줄 때 페이지 매김(Pagination)을 사용합니다. 기본 링크만 나열된 페이지 매김은 밋밋하지만, CSS를 활용하면 클릭하기 쉽고 디자인적으로도 완성도 높은 UI를 만들 수 있습니다.
아래 예제 코드를 실행하면 CSS로 스타일링된 페이지 매김을 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
float: left;
padding: 7px 10px;
text-decoration: none;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html"><</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html">Quiz3</a>
<a href = "quiz4.html">Quiz4</a>
<a href = "next.html">></a>
</div>
</body>
</html>코드 설명
이 예제에서 사용된 주요 CSS 속성은 다음과 같습니다.
- display: inline-block — 페이지 매김 컨테이너(.demo)가 텍스트 흐름 안에서 자연스럽게 배치되도록 합니다.
- float: left — 각 페이지 링터가 가로 방향으로 나란히 정렬되어 가로형 페이지 매김을 만듭니다.
- padding: 7px 10px — 링크에 적절한 여백을 주어 클릭 영역을 넓히고 시각적인 균형을 잡아 줍니다.
- text-decoration: none — 링크에 기본으로 적용되는 밑줄을 제거해 더 깔끔한 모양을 만듭니다.
- color: red — 링크 텍스트 색상을 지정합니다. 사이트 테마에 맞게 원하는 색상으로 변경할 수 있습니다.
<a> 태그의 href 속성에는 이전 페이지(prev.html), 각 퀴즈 페이지(quiz1~4.html), 다음 페이지(next.html)의 경로가 연결되어 있어, 실제 서비스에서는 해당 URL로 이동하는 내비게이션 역할을 하게 됩니다.
활용 팁
실무에서는 :hover 선택자를 추가해 마우스를 올렸을 때 배경색이 변하도록 하거나, 현재 페이지에 .active 클래스를 적용해 강조 효과를 주면 사용자 경험이 한층 향상됩니다.