웹 페이지에서 여러 콘텐츠를 나누어 보여줄 때 사용하는 페이지 매김(Pagination)은 사용자 경험을 좌우하는 중요한 UI 요소입니다. 이번 글에서는 CSS의 border 속성을 활용해 페이지 매김 버튼에 테두리를 추가하고, 시각적으로 돋보이는 디자인을 만드는 방법을 알아보겠습니다.
CSS border 속성으로 테두리 추가하기
페이지 매김 링크에 테두리를 적용하려면 border 속성을 사용합니다. 테두리의 두께, 스타일(실선, 점선 등), 색상을 한 번에 지정할 수 있어 간편합니다.
아래 예제 코드를 실행하면 주황색 점선 테두리가 적용된 페이지 매김을 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
display: inline-block;
}
.demo a {
color: red;
padding: 5px 12px;
text-decoration: none;
border-radius: 5px;
transition: background-color 2s;
border: 1px dashed orange;
}
.demo a.active {
background-color: orange;
color: white;
border-radius: 5px;
}
.demo a:hover:not(.active) {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html">&lt;</a>
<a href = "quiz1.html">Quiz1</a>
<a href = "quiz2.html">Quiz2</a>
<a href = "quiz3.html">Quiz3</a>
<a href = "quiz4.html" class="active">Quiz4</a>
<a href = "next.html">&gt;</a>
</div>
</body>
</html>코드 핵심 포인트 살펴보기
1. 테두리 적용
border: 1px dashed orange; 구문이 각 페이지 링크에 1px 두께의 주황색 점선(dashed) 테두리를 추가합니다. dashed 대신 solid(실선), dotted(점선) 등 다양한 스타일로 변경할 수 있습니다.
2. 둥근 모서리 처리
border-radius: 5px; 속성으로 테두리 모서리를 부드럽게 둥글게 만들어 현대적인 느낌을 더했습니다.
3. 현재 페이지 강조
.active 클래스가 적용된 링크는 배경색이 주황색으로 채워지고 글자색이 흰색으로 변경되어, 사용자가 현재 위치한 페이지를 한눈에 파악할 수 있습니다.
4. 마우스 오버 효과
:hover:not(.active)transition 속성 덕분에 색상 변화가 부드럽게 전환됩니다.
마무리
이처럼 CSS의 border 속성 하나만으로도 페이지 매김의 가독성과 디자인 완성도를 크게 높일 수 있습니다. 테두리 스타일, 색상, 굵기를 자유롭게 조합하여 자신만의 개성 있는 페이지 매김 UI를 만들어 보세요.