← 목록으로

문제 9: 알림 배지 ⭐⭐⭐

⏱️ 15-20분 🎯 중첩 flex 정렬, 원형 배지, 정교한 중앙 정렬
알림
5
📝 코드 보기
<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
🎨 다양한 배지 스타일
메시지
12
새 소식
3
경고
!
← 이전 다음 →