웹 페이지에서 페이지 매김(pagination)을 디자인할 때 첫 번째 링크의 왼쪽 모서리와 마지막 링크의 오른쪽 모서리를 둥글게 처리하면 훨씬 세련된 사용자 인터페이스를 만들 수 있습니다. 이를 위해서는 CSS의 border-radius 계열 속성을 활용하면 됩니다.
핵심 CSS 속성 정리
- border-top-left-radius — 요소의 왼쪽 상단 모서리를 둥글게 만듭니다.
- border-bottom-left-radius — 요소의 왼쪽 하단 모서리를 둥글게 만듭니다.
- border-top-right-radius — 요소의 오른쪽 상단 모서리를 둥글게 만듭니다.
- border-bottom-right-radius — 요소의 오른쪽 하단 모서리를 둥글게 만듭니다.
여기에 :first-child 가상 클래스 선택자로 첫 번째 링크를, :last-child 선택자로 마지막 링크를 지정한 뒤 각각 해당하는 모서리에 둥근 반경 값을 설정해 주면 됩니다.
예제
아래 코드를 실행하면 페이지 매김의 첫 번째 링크는 왼쪽 모서리가, 마지막 링크는 오른쪽 모서리가 둥글게 처리된 것을 확인할 수 있습니다.
<!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 dashed orange;
}
.demo a.active {
background-color: red;
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 a:first-child 규칙은 페이지 매김 목록에서 가장 앞에 있는 링크(« 이전 버튼)를 선택하여 왼쪽 상단·하단 모서리에 10px의 둥근 반경을 적용합니다. 반대로 .demo a:last-child 규칙은 가장 뒤에 있는 링크(» 다음 버튼)를 선택해 오른쪽 상단·하단 모서리를 둥글게 만듭니다. 이처럼 개별 모서리 속성을 조합하면 전체 border-radius를 일괄 적용하지 않고도 원하는 위치만 골라 부드러운 곡선 효과를 줄 수 있습니다.