오늘의 예약 현황
분류: 컴포넌트 종합 예제
카드·배지·아바타·버튼 등 여러 컴포넌트를 한 카드 안에 조합해 실제 업무 화면에 가까운 알림형 요약 카드를 만드는 예제입니다. 왼쪽 색 띠(.card-status-start)로 상태를 표시하고, 헤더 오른쪽 .card-actions에 건수 배지를 붙였습니다. 본문은 .avatar(아이콘 원형 박스)와 .flex-fill로 늘어나는 텍스트 영역을 .d-flex로 나란히 배치했고, 하단 .card-footer에 액션 버튼을 두어 "확인 → 상세 이동" 흐름을 표현합니다.
.card
├─ .card-status-start (좌측 상태 색 띠)
├─ .card-header
│ ├─ .card-title
│ └─ .card-actions
│ └─ .badge (건수)
├─ .card-body
│ └─ .d-flex
│ ├─ .avatar (아이콘)
│ └─ .flex-fill (제목 + 설명)
└─ .card-footer
└─ .btn (액션 버튼)
소스
<div class="card card-md">
<div class="card-status-start bg-green"></div>
<div class="card-header">
<h4 class="card-title">오늘의 예약 현황</h4>
<div class="card-actions">
<span class="badge bg-green-lt text-green">12건</span>
</div>
</div>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar bg-blue-lt text-blue me-3">
<i class="f:20 ti ti-calendar-check"></i>
</span>
<div class="flex-fill">
<div class="font-weight-medium">오후 피팅 예약이 집중되어 있습니다.</div>
<div class="text-secondary">오후 2시부터 5시까지 담당자를 추가 배정해 주세요.</div>
</div>
</div>
</div>
<div class="card-footer text-end">
<button type="button" class="btn btn-primary">예약표 보기</button>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
card, card-md | 카드 컨테이너, 카드 내부 여백 크기를 중간(md)으로 지정 |
card-status-start | 카드 왼쪽에 세로 상태 색 띠 표시 |
bg-green | 상태 색 띠를 초록으로 지정 |
card-header, card-title | 카드 헤더와 제목 영역 |
card-actions | 헤더 오른쪽에 부가 요소(배지 등)를 배치하는 영역 |
badge, bg-green-lt, text-green | 건수 배지와 옅은 초록 배경/글자색 |
card-body | 카드 본문 영역 |
d-flex, align-items-center | 아바타와 텍스트를 가로로 나란히, 세로 중앙 정렬 |
avatar, bg-blue-lt | 원형 아이콘 박스와 옅은 파랑 배경 |
me-3 | 아바타와 텍스트 사이 오른쪽 여백 |
flex-fill | 남은 공간을 모두 차지하도록 텍스트 영역을 확장 |
font-weight-medium | 제목 텍스트 굵기를 중간 굵기로 지정 |
text-secondary | 보조 설명 텍스트 색상 |
card-footer, text-end | 카드 하단 영역과 버튼 오른쪽 정렬 |
btn, btn-primary | 프라이머리 색상 버튼 |
ti, ti-calendar-check | Tabler 아이콘 폰트와 아이콘 종류(캘린더 체크) |
f:20 | master-css 속성형 클래스, 아이콘 글자 크기를 20px로 지정 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/컴포넌트-종합-예제-오늘의-예약-현황.html 경로에서 렌더링 결과를 확인할 수 있습니다.