웹 페이지에서 페이지 매김(pagination)을 구현할 때 링크들이 서로 붙어 있으면 가독성이 떨어지고 클릭하기도 불편합니다. CSS를 활용하면 페이지네이션 링크 사이에 적절한 간격을 쉽게 추가할 수 있습니다.
핵심 원리
페이지네이션 링크 사이에 공백을 만드는 대표적인 방법은 다음과 같습니다.
- display: inline-block; — 링크를 인라인 블록 요소로 만들어 패딩과 마진이 정상적으로 적용되도록 합니다.
- padding — 링크 내부의 여백을 조절해 클릭 영역을 넓히고 시각적 간격을 만듭니다.
- margin — 링크 요소 사이의 외부 간격을 직접 지정할 수 있습니다.
예제 코드
아래 예제는 .demo 클래스를 사용한 페이지네이션입니다. 각 링크에 패딩을 적용하고, 현재 페이지(.active)와 마우스 오버(:hover) 상태를 스타일링했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
transition: background-color 2s;
border: 1px solid orange;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
.demo a:first-child {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.demo a:last-child {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
</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" class = "active">Quiz3</a>
<a href = "quiz4.html">Quiz4</a>
<a href = "next.html">»</a>
</div>
</body>
</html>코드 설명
1. 기본 링크 스타일
.demo a 선택자에서 padding: 5px 12px;를 사용해 각 링크의 상하좌우 여백을 확보했습니다. 이 패딩이 링크 사이의 실질적인 공백 역할을 하며, 동시에 클릭하기 편한 터치 영역도 만들어 줍니다.
2. 활성 페이지 강조
.demo a.active는 현재 보고 있는 페이지를 나타냅니다. 배경색을 주황색으로, 글자색은 흰색으로 지정하고 border-radius: 5px;로 모서리를 둥글게 처리했습니다.
3. 마우스 오버 효과
.demo a:hover:not(.active)는 활성 페이지를 제외한 나머지 링크에 마우스를 올렸을 때 배경색이 노란색으로 부드럽게 전환되도록 합니다. transition: background-color 2s; 덕분에 색상 변화가 자연스럽게 이루어집니다.
4. 첫 번째와 마지막 링크의 둥근 모서리
:first-child와 :last-child 선택자를 사용하면 페이지네이션 양 끝 링크만 바깥쪽 모서리를 둥글게 만들 수 있어 완성도 높은 디자인을 구현할 수 있습니다.
추가 팁: margin으로 간격 더 넓히기
패딩만으로 부족하다면 링크 사이에 명시적인 마진을 추가할 수 있습니다.
.demo a {
margin-right: 8px; /* 링크 사이에 8px 간격 추가 */
}또는 최신 CSS인 플렉스박스(Flexbox)를 활용하면 간격 관리가 더욱 편리합니다.
.demo {
display: flex;
gap: 8px; /* 링크 사이 균일한 간격 */
}gap 속성을 사용하면 첫 번째/마지막 요소의 불필요한 마진을 신경 쓰지 않아도 되므로 코드가 더 깔끔해집니다.
마무리
CSS의 padding, margin, 그리고 gap 속성을 활용하면 페이지네이션 링크 사이의 간격을 자유롭게 조절할 수 있습니다. 위 예제처럼 활성 상태와 호버 효과까지 함께 적용하면 사용자 경험이 크게 향상되는 페이지네이션 UI를 만들 수 있습니다.