본문으로 건너뛰기

주요 업무 영역

분류: 페이지 헤더와 레이아웃

대시보드나 업무 화면 상단에서 핵심 지표를 한눈에 요약해 보여줄 때 쓰는 카드 패턴입니다. .card 안에 .row/.col-sm-4로 3분할한 뒤, 각 칸을 .border.rounded로 감싸 아이콘 · 숫자 · 라벨 순으로 쌓았습니다. text-blue, text-green, text-orange처럼 칸마다 다른 강조 색을 주면 항목 성격(매출/완료/지연 등)을 색으로도 구분할 수 있습니다.

이 카드는 독립적으로도 쓸 수 있지만, Tabler 레이아웃의 .page-body 영역(제목·버튼이 있는 .page-header 아래, 실제 콘텐츠가 들어가는 부분)에 배치하는 것을 전제로 만들어졌습니다.

.page
└─ .page-wrapper
    ├─ .page-header
    │   └─ .container-xl (제목 / 버튼 영역)
    └─ .page-body
        └─ .container-xl
            └─ .card          ← 이 예제
                └─ .card-body
                    └─ .row
                        └─ .col-sm-4 × 3  (아이콘 · 수치 · 라벨)

소스​

<div class="card">
    <div class="card-header">
        <h4 class="card-title">주요 업무 영역</h4>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-sm-4">
                <div class="border rounded p-3 h-100">
                    <i class="f:24 text-blue ti ti-chart-bar"></i>
                    <div class="h3 mt-2 mb-1">₩128,450,000</div>
                    <div class="text-secondary">이번 달 매출</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="border rounded p-3 h-100">
                    <i class="f:24 text-green ti ti-file-check"></i>
                    <div class="h3 mt-2 mb-1">42건</div>
                    <div class="text-secondary">계약 완료</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="border rounded p-3 h-100">
                    <i class="f:24 text-orange ti ti-clock"></i>
                    <div class="h3 mt-2 mb-1">7건</div>
                    <div class="text-secondary">납기 임박</div>
                </div>
            </div>
        </div>
    </div>
</div>

사용된 주요 클래스​

클래스역할
row, col-sm-4Bootstrap 그리드로 화면을 3등분(각 칸 너비 1/3)
g-3그리드 칸 사이의 간격(gutter) 지정
border, rounded각 지표 칸에 테두리와 둥근 모서리 표시
h-100칸 높이를 부모 높이(100%)에 맞춰 세 칸의 높이를 통일
h3, mb-1지표 수치의 글자 크기와 아래쪽 여백
mt-2아이콘과 수치 사이 위쪽 여백
p-3칸 안쪽 여백
text-secondary라벨 텍스트를 보조색(회색톤)으로 표시
text-blue, text-green, text-orange아이콘 색을 칸별로 다르게 지정
f:24master-css 속성형 클래스, 아이콘 글자 크기를 24px로 지정
ti, ti-chart-bar, ti-clock, ti-file-checkTabler 아이콘 폰트와 아이콘 종류(막대그래프/시계/파일확인)

실전 예제 페이지​

HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/페이지-헤더와-레이아웃-주요-업무-영역.html 경로에서 렌더링 결과를 확인할 수 있습니다.

미리보기새 창에서 열기 ↗

참고 자료​