CSS로 페이지네이션에 전환 효과 추가하기
페이지네이션(페이지 번호 목록) 링크에 마우스를 올렸을 때(hover) 색상이 갑자기 바뀌는 대신 부드럽게 변하도록 하고 싶다면, CSS의 transition 속성을 사용하면 됩니다. transition 속성은 배경색, 글자색 등 지정한 스타일이 일정 시간에 걸쳐 자연스럽게 변화하도록 만들어 줍니다.
예를 들어 transition: background-color 2s;라고 설정하면, 마우스를 올리거나 뗄 때 배경색이 약 2초에 걸쳐 서서히 전환됩니다.
예제 코드
아래 코드를 실행하면 페이지네이션 링크에 마우스를 올릴 때 배경색이 노란색으로 부드럽게 변하는 것을 확인할 수 있습니다.
<!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;
}
.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"><</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">></a>
</div>
</body>
</html>핵심 포인트 정리
- transition: background-color 2s; — 배경색이 2초에 걸쳐 천천히 변하도록 설정합니다. 원하는 속도에 따라 시간 값을 조절할 수 있습니다.
- :hover:not(.active) — 현재 보고 있는 페이지(active 클래스가 적용된 링크)에는 호버 효과가 적용되지 않도록 제외합니다.
- .active 클래스 — 주황색 배경과 흰색 글자로 현재 선택된 페이지를 시각적으로 강조합니다.
transition 속성에 여러 속성을 함께 지정하거나, ease, linear 같은 타이밍 함수를 추가하면 더욱 다양하고 세련된 전환 효과를 연출할 수 있습니다.