카드 샘플
분류: 카드 헤더
card-header 오른쪽에 셀렉트와 버튼 그룹을 조합한 액션 영역을 배치하는 예제입니다. card-actions 안에 수량을 고르는 form-select와, 증감 버튼을 묶은 btn-group(btn-icon 아이콘 전용 버튼)을 함께 두어 카드 헤더에서 바로 수량을 조작할 수 있게 합니다.
소스
<div class="card overflow-auto">
<div class="card-header">
<h3 class="card-title">카드 샘플</h3>
<div class="card-actions">
<div class="input-group">
<select id="ddlAddCount" class="form-select mx-2">
<option value="1" selected="selected">1</option>
<option value="3">3</option>
<option value="6">6</option>
</select>
<div class="btn-group">
<button type="button" id="btnPlus" syn-events="['click']" class="btn btn-icon bg-muted-lt">
<i class="f:20 ti ti-plus"></i>
</button>
<button type="button" id="btnMinus" syn-events="['click']" class="btn btn-icon bg-muted-lt">
<i class="f:20 ti ti-minus"></i>
</button>
</div>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
card, card-header, card-title | 카드 컨테이너, 헤더 영역, 헤더 안의 제목 텍스트 |
overflow-auto | 카드 내용이 넘칠 때 스크롤을 허용 |
card-actions | 헤더 우측에 정렬되는 동작(컨트롤) 영역 |
input-group | 셀렉트와 버튼 그룹을 하나의 컨트롤처럼 붙여 배치 |
form-select | 드롭다운 셀렉트 박스의 기본 스타일 |
mx-2 | 좌우 여백을 0.5rem으로 지정해 셀렉트와 버튼 그룹 사이 간격 확보 |
btn-group | 버튼 여러 개를 하나로 묶어 테두리를 이어붙임 |
btn, btn-icon | 버튼 기본 스타일과, 텍스트 없이 아이콘만 담는 정사각형 버튼 변형 |
bg-muted-lt | 옅은 회색 배경(비활성/보조 버튼 느낌) 지정 |
f:20 | master-css 속성형 클래스, 아이콘 폰트 크기를 20px로 지정 |
ti, ti-plus, ti-minus | Tabler 아이콘 폰트 기본 클래스와 더하기/빼기 아이콘 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/카드-헤더-카드-샘플.html 경로에서 렌더링 결과를 확인할 수 있습니다.