웹 페이지에서 페이지네이션(페이지 매김)의 크기를 조절하고 싶다면 CSS의 font-size 속성을 활용하면 됩니다. 폰트 크기를 키우면 링크의 패딩과 함께 전체 페이지네이션 버튼도 자연스럽게 커지기 때문에, 별도의 복잡한 설정 없이 간단하게 크기를 변경할 수 있습니다.
font-size 속성으로 페이지네이션 크기 늘리기
아래 예제 코드를 실행하면 페이지네이션 항목들이 기본 크기보다 더 크게 표시되는 것을 확인할 수 있습니다. 이 예제에서는 18px의 폰트 크기를 적용했으며, 마우스 오버(hover) 효과와 현재 페이지를 나타내는 active 스타일도 함께 구현했습니다.
예제 코드
<!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;
font-size: 18px;
}
.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>코드 설명
- .demo:
display: inline-block;을 적용해 페이지네이션 요소가 한 줄에 나란히 배치되도록 설정합니다. - .demo a:
font-size: 18px;가 핵심 부분으로, 이 값을 조정하면 페이지네이션 전체 크기가 달라집니다. 또한padding,border,transition을 통해 시각적 완성도를 높였습니다. - .demo a.active: 현재 보고 있는 페이지를 주황색 배경과 흰색 글자로 강조합니다.
- .demo a:hover:not(.active): 마우스를 올렸을 때 노란색 배경이 서서히 나타나는 효과를 줍니다.
:not(.active)선택자 덕분에 현재 페이지에는 hover 효과가 적용되지 않습니다. - :first-child / :last-child: 첫 번째와 마지막 버튼의 모서리를 둥글게 처리해 자연스러운 외형을 만듭니다.
크기를 더 키우거나 줄이고 싶다면?
font-size 값만 변경하면 됩니다. 예를 들어 24px로 설정하면 더 큰 페이지네이션이 만들어지고, 14px로 설정하면 더 작고 컴팩트한 디자인이 됩니다. 필요에 따라 padding 값도 함께 조절하면 버튼의 여백 균형을 유지할 수 있습니다.