웹 서비스에서 흔히 볼 수 있는 메시지 아이콘 옆의 빨간 숫자 배지, 즉 읽지 않은 알림 개수를 표시하는 UI는 CSS만으로도 간단하게 구현할 수 있습니다. 이 글에서는 HTML과 CSS를 활용해 알림 배지(notification badge)가 달린 버튼을 만드는 방법을 예제와 함께 살펴보겠습니다.
예제 코드
아래 코드는 링크 요소 안에 버튼 텍스트와 알림 배지를 함께 배치하고, CSS로 배지의 위치와 스타일을 지정한 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: monospace,serif,sans-serif;
}
.notificationContainer {
margin: 20px;
background-color: rgb(254, 255, 171);
color: black;
text-decoration: none;
padding: 15px 26px;
font-size: 32px;
position: relative;
display: inline-block;
border-radius: 2px;
border:2px solid black;
}
.notificationContainer:hover {
background: rgb(43, 8, 138);
color:white;
}
.notificationContainer .notificationBadge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background-color: rgb(0, 170, 51);
color: white;
}
</style>
</head>
<body>
<h1>Notification Button Example</h1>
<a href="#" class="notificationContainer">
<span>Messages</span>
<span class="notificationBadge">99+</span>
</a>
</body>
</html>출력 결과
위 코드를 브라우저에서 실행하면 노란색 배경의 'Messages' 버튼 오른쪽 위 초록색 원형 배지에 '99+'라는 알림 개수가 표시됩니다.
여기에 마우스 커서를 올리면 :hover 선택자에 의해 버튼 배경이 진한 남색으로, 글자 색은 흰색으로 바뀌며 시각적인 피드백을 제공합니다.
핵심 포인트 정리
1. 부모 요소에 position: relative 지정
버튼 역할을 하는 .notificationContainer에 position: relative를 설정해야 자식 요소인 배지를 기준점으로 삼아 자유롭게 배치할 수 있습니다.
2. 배지는 position: absolute로 위치 조정
.notificationBadge에 position: absolute를 적용하고 top, right 값을 음수(-10px)로 주어 버튼 모서리 밖으로 살짝 돌출된 형태로 배치했습니다.
3. 원형 배지는 border-radius 활용
border-radius: 50%를 사용하면 사각형 요소를 완전한 원으로 만들 수 있으며, 여기에 적절한 padding을 더해 숫자가 담긴 동그란 배지를 완성할 수 있습니다.
4. hover 효과로 사용자 경험 향상
:hover 의사 클래스를 활용하면 사용자가 버튼에 마우스를 올렸을 때 색상이 변하도록 만들어 인터랙티브한 느낌을 줄 수 있습니다.
이처럼 몇 줄의 CSS만으로 SNS나 메신저 앱에서 볼 수 있는 알림 배지 UI를 손쉽게 구현할 수 있습니다. 배지 색상, 크기, 위치 값들을 조절해 자신만의 스타일로 응용해 보세요.