웹 페이지에서 페이지네이션이나 이미지 갤러리를 구현할 때 이전(Previous)과 다음(Next) 버튼은 빠질 수 없는 요소입니다. CSS만 잘 활용하면 별도의 이미지 파일이나 JavaScript 없이도 깔끔하고 직관적인 원형 버튼을 손쉽게 만들 수 있습니다.
CSS 이전·다음 버튼 예제 코드
다음은 CSS를 사용하여 이전 및 다음 버튼을 만드는 전체 소스 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
a {
text-decoration: none;
display: inline-block;
padding: 20px;
font-size: 35px;
width: 40px;
text-align: center;
}
.back:hover {
background-color: #ddd;
color: black;
}
.next:hover {
background-color: rgb(121, 37, 133);
color: white;
}
.back {
border-radius: 50%;
background-color: #acacac;
color: black;
}
.next {
border-radius: 50%;
background-color: rgb(68, 30, 112);
color: white;
}
</style>
</head>
<body>
<h1>이전 및 다음 버튼 예제</h1>
<a href="#" class="back">‹</a>
<a href="#" class="next">›</a>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 회색 배경의 이전 버튼(‹)과 보라색 배경의 다음 버튼(›)이 나란히 표시됩니다. 마우스 커서를 버튼 위에 올리면 배경색과 글자색이 부드럽게 바뀌면서 시각적인 피드백을 제공합니다.
코드 핵심 포인트
- display: inline-block; — <a> 태그는 기본적으로 인라인 요소이기 때문에 padding과 width가 의도한 대로 적용되지 않습니다. inline-block으로 지정해야 크기 조절이 가능합니다.
- border-radius: 50%; — 정사각형 형태의 요소에 50% 값을 적용하면 완전한 원형 버튼이 완성됩니다.
- :hover 선택자 — 마우스를 올렸을 때 배경색과 글자색을 변경하여 해당 요소가 클릭 가능하다는 것을 직관적으로 알려줍니다.
- 유니코드 화살표 문자 — 왼쪽 꺾쇠(‹)와 오른쪽 꺾쇠(›) 특수 문자를 사용하면 이미지 없이도 버튼 아이콘을 표현할 수 있어 페이지 로딩 속도 면에서 유리합니다.
이처럼 몇 줄의 CSS만으로도 세련된 내비게이션 버튼을 구현할 수 있습니다. 배경색, 글자 크기, 여백 등의 값을 조정하여 자신의 웹 사이트 디자인에 맞게 자유롭게 응용해 보세요.