문제 9: 알림 배지 ⭐⭐⭐

⏱️ 15-20분 🎯 중첩 flex 정렬, 원형 배지, 정교한 중앙 정렬

알림

📝 코드 보기

<div class="flex items-center justify-between p-4">
  <span class="text-lg font-bold">알림</span>
  <div class="bg-red-500 text-white 
       w-8 h-8 rounded-full 
       flex items-center justify-center 
       font-bold text-sm">5</div>
</div>

💡 핵심 포인트

• flex items-center justify-between - 양쪽 정렬
• w-8 h-8 rounded-full - 원형 배지
• 배지 내부 숫자는 다시 flex items-center justify-center

🎨 다양한 배지 스타일

메시지

새 소식

경고

← 이전 다음 →