유틸리티
분류: 유틸리티
테두리(Border) · 여백(Margin) · 커서(Cursor) · 세로 정렬(Vertical align) 네 가지 Bootstrap/Tabler 유틸리티 클래스를 한 카드에 모아 값별 차이를 눈으로 비교할 수 있게 만든 참고용 예제입니다. 새 화면을 만들 때 "테두리를 점선으로 하려면 어떤 클래스지?", "세로 가운데 정렬은 무슨 클래스지?" 같은 걸 찾아볼 때 이 문서를 사전처럼 활용하면 됩니다. 왼쪽 열은 테두리(border-*)와 바깥 여백(m-*), 오른쪽 열은 커서 모양(cursor-*)과 표 셀의 세로 정렬(align-*)을 다룹니다.
소스
<div class="card overflow-auto mt-3" id="example-utilities">
<div class="card-status-top bg-purple"></div>
<div class="card-header">
<div>
<h3 class="card-title">유틸리티</h3>
<div class="card-subtitle">Borders · Cursors · Margins · Vertical align</div>
</div>
</div>
<div class="card-body">
<div class="row row-cards">
<div class="col-lg-6">
<h4>테두리</h4>
<div class="d-flex flex-wrap gap-3 mb-4">
<div class="border rounded d-flex align-items-center p-3 bg-white">전체 테두리</div>
<div class="border-top d-flex align-items-center border-blue border-3 p-3 bg-blue-lt">위쪽 강조</div>
<div class="border-start d-flex align-items-center border-green border-3 p-3 bg-green-lt">시작점 강조</div>
<div class="border d-flex align-items-center border-dashed rounded p-3">점선 테두리</div>
<div class="border border-wide rounded-circle d-flex align-items-center justify-content-center w:64 h:64">원형</div>
</div>
<h4>바깥 여백</h4>
<div class="d-flex flex-wrap align-items-start gap-3">
<div class="bg-blue-lt rounded">
<div class="m-0 px-3 py-2 bg-blue text-white rounded">m-0</div>
</div>
<div class="bg-blue-lt rounded">
<div class="m-2 px-3 py-2 bg-blue text-white rounded">m-2</div>
</div>
<div class="bg-blue-lt rounded">
<div class="m-4 px-3 py-2 bg-blue text-white rounded">m-4</div>
</div>
</div>
</div>
<div class="col-lg-6">
<h4>커서</h4>
<div class="d-flex flex-wrap gap-2 mb-4">
<span class="badge bg-blue-lt text-blue cursor-pointer p-2">클릭 가능</span>
<span class="badge bg-azure-lt text-azure cursor-move p-2">이동 가능</span>
<span class="badge bg-red-lt text-red cursor-not-allowed p-2">사용 불가</span>
<span class="badge bg-purple-lt text-purple cursor-zoom-in p-2">확대 보기</span>
<span class="badge bg-yellow-lt text-yellow cursor-help p-2">도움말</span>
<span class="badge bg-green-lt text-green cursor-wait p-2">처리 대기</span>
</div>
<h4>세로 정렬</h4>
<div class="table-responsive">
<table class="table table-bordered mb-0" style="height: 110px">
<tbody>
<tr>
<td class="align-baseline">기준선</td>
<td class="align-top">위</td>
<td class="align-middle">가운데</td>
<td class="align-bottom">아래</td>
<td class="align-text-top">텍스트 위</td>
<td class="align-text-bottom">텍스트 아래</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
border | 기본 테두리(사방) 표시 |
border-top, border-start | 위쪽/시작쪽 한 방향만 테두리 표시 |
border-blue, border-green | 테두리 색을 파랑/초록으로 지정 |
border-3 | 테두리 두께를 3단계로 지정 |
border-dashed | 테두리를 점선으로 표시 |
border-wide | 테두리를 두껍게 표시 |
rounded, rounded-circle | 모서리를 둥글게(원형은 완전한 원) 표시 |
m-0, m-2, m-4 | 바깥 여백을 0/0.5rem/1.5rem 단계로 지정(.m-{0~5}) |
cursor-pointer, cursor-move, cursor-not-allowed, cursor-zoom-in, cursor-help, cursor-wait | 마우스 커서 모양을 각각 손가락/이동/금지/확대/물음표/대기 아이콘으로 변경 |
align-baseline, align-top, align-middle, align-bottom, align-text-top, align-text-bottom | 표 셀(td)의 세로 정렬 기준(기준선/위/가운데/아래/텍스트 기준 위·아래) |
d-flex, flex-wrap | 자식 요소를 가로로 배치하고 넘치면 줄바꿈 |
align-items-center, align-items-start, justify-content-center | flex 컨테이너의 세로/가로 정렬 |
gap-2, gap-3 | flex 자식 요소 사이 간격 |
p-2, p-3, px-3, py-2 | 안쪽 여백(전체/좌우/상하) |
mb-0, mb-4 | 아래쪽 바깥 여백 |
badge | 값 데모용 뱃지 컴포넌트 |
bg-white, bg-blue, bg-blue-lt, bg-green-lt, bg-red-lt, bg-purple-lt, bg-yellow-lt, bg-azure-lt | 배경색(진한/옅은 톤) 지정 |
text-white, text-blue, text-green, text-red, text-purple, text-yellow, text-azure | 글자색 지정 |
table, table-bordered, table-responsive | 세로 정렬 데모용 표와 셀 테두리, 가로 스크롤 래퍼 |
row, row-cards, col-lg-6 | 좌우 두 열로 나누는 Bootstrap 그리드 |
w:64, h:64 | master-css 속성형 클래스, 너비/높이를 64px로 지정 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/유틸리티.html 경로에서 렌더링 결과를 확인할 수 있습니다.