HandStack 화면(Tabler 기반 UI)에서 자주 쓰는 레이아웃·컴포넌트 마크업을 분류별로 모은 참고 예제입니다.
새 화면을 만들 때 처음부터 마크업을 작성하기보다, 필요한 카테고리에서 비슷한 예제를 찾아 복사한 뒤 문구와 데이터만 바꿔 쓰는 것을 권장합니다.
마크업은 Tabler(tabler-core) 컴포넌트 클래스와 Bootstrap 5 그리드/유틸리티, master-css(f:, b:, m-, p- 등 속성형 유틸리티, w:100!처럼 !가 붙으면 !important) 표기를 함께 사용합니다. syn-으로 시작하는 속성(syn-datafield, syn-options, syn-events 등)은 CSS 클래스가 아니라 HandStack view-designer가 화면 컨트롤을 데이터/이벤트에 연결할 때 사용하는 자체 바인딩 속성이며, 이 예제 모음의 범위를 벗어나므로 별도 가이드를 참고하세요.
각 문서는 소스 마크업, 마크업에 쓰인 주요 클래스의 역할, 그리고 HandStack 웹 호스트의 /sample/ui-library/<파일명>.html 미리보기 페이지 경로를 함께 안내합니다.
원본 소스는 저장소의 2.Modules/wwwroot/wwwroot/sample/ui-library에 있으며, qcn.winform 솔루션의 stavlo 프로젝트에 있는 View Designer "UI 라이브러리" 팝업 카탈로그에서 옮긴 것입니다.
일반적인 페이지 레이아웃을 구성할 때 사용하는 가장 기본 적인 페이지 구조는 아래처럼 잡으면 됩니다.
<div class="page">
<div class="page-wrapper">
<div class="page-header">
<div class="container-xl">
<div class="row g-2 align-items-center">
<div class="col">
<h2 class="page-title">
사용자 관리
</h2>
</div>
<div class="col-auto ms-auto">
<button class="btn btn-primary">
사용자 추가
</button>
</div>
</div>
</div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="card">
<div class="card-header">
<h3 class="card-title">사용자 목록</h3>
</div>
<div class="card-body">
페이지 내용
</div>
</div>
</div>
</div>
</div>
</div>
구조를 계층으로 보면 더 이해하기 쉽습니다.
.page
│
├── .navbar / sidebar
│
└── .page-wrapper
│
├── .page-header
│ └── .container-xl
│ └── 제목 / 버튼 / breadcrumb 등
│
└── .page-body
└── .container-xl
└── 실제 콘텐츠
├── .row
├── .col-*
├── .card
├── .table
└── .form-*
각 클래스의 역할을 정리하면 다음처럼 생각하시면 됩니다.
| 클래스 | 역할 |
|---|
.page | 페이지 전체를 감싸는 최상위 컨테이너 |
.page-wrapper | Navbar/Sidebar를 제외한 페이지 콘텐츠 영역 |
.page-header | 페이지의 제목/설명/버튼/Breadcrumb 영역 |
.page-body | 페이지의 실제 본문 영역 |
.container-xl | 콘텐츠의 최대 너비 및 좌우 여백 관리 |
.row | Bootstrap Grid 행 |
.col-* | Bootstrap Grid 열 |
.card | 실제 업무 화면의 콘텐츠 박스 |
예를 들어 관리자 화면이라면 이런 식으로 구성하기 좋습니다.
<div class="page">
<div class="page-wrapper">
<div class="page-header">
<div class="container-xl">
<h2 class="page-title">회원 관리</h2>
</div>
</div>
<div class="page-body">
<div class="container-xl">
<div class="card mb-3">
<div class="card-body">
검색 조건
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">회원 목록</h3>
</div>
<div class="card-body">
<table class="table">
...
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Tabler 화면을 만들 때 보통
<div class="page-body">
<div class="container-xl">
...
</div>
</div>
처럼 사용합니다.
화면 전체 너비를 좀 더 적극적으로 사용하고 싶다면 Bootstrap 방식으로:
<div class="container-fluid">
를 사용하는 것도 가능합니다. Tabler 자체가 Bootstrap 5 기반이므로 Bootstrap의 grid/container/spacing 유틸리티를 함께 사용하는 방식입니다. ([Tabler][1])
지금 만들고 계신 HTML 화면 디자인 도구에서 페이지 구조를 컴포넌트화하려는 목적이라면, 저는 계층을
Page
└─ Page Wrapper
├─ Page Header
│ └─ Container
└─ Page Body
└─ Container
└─ Row
└─ Column
└─ Card
정도로 정의하는 것을 추천합니다. 그러면 그 아래에서 row / col / card / form / table 등을 조립하는 방식으로 Tabler 화면 대부분을 만들 수 있습니다.
| 예제 | 설명 |
|---|
| 참고사항 | 업무 화면 상단에서 지나치기 쉬운 규칙을 alert-info 카드로 안내합니다. |
| 예제 | 설명 |
|---|
| 알림 정보 | 성공·경고·위험·정보 네 가지 상태의 alert 색상 변형을 한 화면에서 비교합니다. |
| 예제 | 설명 |
|---|
| 기본 텍스트 입력 | label과 form-control을 짝지어 쓰는 기본형과 disabled·readonly·required 상태를 보여줍니다. |
| 선택(Select) | select에 form-select 클래스만 붙이는 단일·다중 선택 상자입니다. |
| 입력 그룹 | input-group으로 입력창에 버튼·드롭다운·아이콘·로딩 스피너를 붙입니다. |
| 폼 컨트롤 스타일 | form-control-rounded(둥근 모서리)와 form-control-flush(밑줄만 남기는) 스타일 변형입니다. |
| 체크박스·라디오 입력 그룹 | input-group-text 안에 체크박스·라디오를 넣어 정렬하는 조합입니다. |
| 텍스트·아이콘 부가 입력 | input-group-flat으로 경계를 없애 하나처럼 보이는 입력 조합입니다. |
| 플로팅 라벨 입력 | 값이 없으면 라벨이 입력창 안에 겹쳐 있다가 포커스를 주면 위로 떠오릅니다. |
| 이미지 선택 | 썸네일 이미지를 클릭해 선택하는 form-imagecheck 컨트롤입니다. |
| 색상 입력 | 색상 스와치로 고르는 form-colorinput과 네이티브 색상 선택기를 보여줍니다. |
| 유효성 검사 상태 | is-valid/is-invalid로 입력값의 통과·오류 상태를 표시합니다. |
| 폼 필드셋 | label과 form-control을 mb-3으로 묶은 필드 세트를 반복하는 기본 패턴입니다. |
| 선택 그룹(버튼형) | 라디오·체크박스를 박스나 필(pill) 모양의 클릭 카드로 보여주는 form-selectgroup입니다. |
| 버튼 그룹 | 숨겨진 btn-check 라디오에 연결된 버튼으로 하나(또는 여러 개)를 선택하는 세그먼트 컨트롤입니다. |
| 라디오 버튼·체크박스 | form-check로 감싼 라디오·체크박스의 세로·가로·비활성화 변형을 모았습니다. |
| 스위치 | form-switch로 체크박스를 On/Off 토글 스위치 모양으로 바꿉니다. |
| 알림 | 항목명과 On/Off 스위치를 좌우로 배치한 알림 수신 설정 목록형 스위치입니다. |
| 파일·날짜·마스크 입력 | 파일 첨부, 여러 select로 구성한 날짜, data-mask 마스크 입력을 모았습니다. |
| 기타 입력 요소 | 자동완성 datalist, 슬라이더, 진행률 표시줄, 소셜 로그인 버튼을 모았습니다. |
| 예제 | 설명 |
|---|
| 프로젝트 ID | API와 상호 작용할 때 사용됩니다. |
| Node.js 버전 | 빌드 단계 및 서버리스 함수에서 사용되는 Node.js 버전입니다. 변경 사항을 적용하려면 새로운 배포가 필요합니다. |
| 기본 폼 | label + 입력 컨트롤 + form-hint를 반복하는 세로형 기본 폼입니다. |
| 수평 폼 | 라벨과 입력란을 좌우로 나란히 배치하는 폼입니다. |
| 입력 마스크 | 날짜·전화번호처럼 정해진 형식으로 입력받는 data-mask 필드 모음입니다. |
| 내 프로필 | 아바타를 첫 입력 항목 옆에 나란히 배치하는 프로필 편집 폼입니다. |
| 프로필 수정 | 회사·이름·이메일 등 여러 입력 항목을 격자로 배치하는 프로필 수정 화면입니다. |
| HTTP 요청 | 메서드·URL 입력과 조건(단언) 목록 테이블로 구성한 API 요청 폼입니다. |
| 예제 | 설명 |
|---|
| 계정에 로그인 | 이메일·비밀번호 입력과 소셜 로그인 버튼을 담은 카드형 로그인 화면입니다. |
| 계정 잠금 | 계정을 잠금 해제하려면 비밀번호를 입력 하세요. |
| 계정 인증 | +82 10-1234-5678 로 전송된 인증 코드를 입력하여 계정을 확인하세요. |
| 예제 | 설명 |
|---|
| 표준 버튼 | btn-primary, btn-success 등 시맨틱 색상 버튼과 활성·비활성화 상태를 비교합니다. |
| 아웃라인 버튼 | 아웃라인 버튼을 사용하려면 .btn-outline-* 클래스를 사용하세요. |
| 고스트 버튼 | 고스트 버튼을 사용하려면 .btn-ghost-* 클래스를 사용하세요. |
| 사각 버튼 | 사각 버튼을 사용하려면 .btn-square 클래스를 사용하세요. |
| 필 버튼 | 필 버튼을 사용하려면 .btn-pill 클래스를 사용하세요. |
| 추가 색상 | btn-blue, btn-azure처럼 Tabler 확장 색상 팔레트를 버튼에 직접 지정합니다. |
| 예제 | 설명 |
|---|
| 배지 | 상태·개수·새 항목 표시에 쓰는 배지의 기본형·색상형·아웃라인·알림 점 등 여섯 가지 패턴입니다. |
| 예제 | 설명 |
|---|
| 카드 샘플 | card-actions에 수량 선택 select와 증감 버튼 그룹을 배치한 헤더입니다. |
| 액션이 있는 카드 | 카드 제목 옆에 주요 동작 버튼 하나를 배치하는 가장 단순한 헤더 액션 형태입니다. |
| 카드 제목 | card-actions에 강조 없는 보조 버튼 여러 개를 나열합니다. |
| 홍길동 | 아바타와 이름·직함, 전화·이메일 버튼을 함께 보여주는 사용자 카드 헤더입니다. |
| 설명 포함 | 카드 제목 아래에 간단한 설명을 추가할 수 있습니다. |
| 설명 및 액션 포함 | 설명 포함에 card-actions 버튼을 더한 형태입니다. |
| 김철수 | 홍길동과 같은 구조에 버튼 대신 점 3개(⋮) 드롭다운 메뉴를 붙입니다. |
| 카드 액션 | btn-actions로 아이콘 버튼 여러 개를 촘촘하게 배치합니다. |
| 예제 | 설명 |
|---|
| 목록 | 아바타 목록, 체크 가능한 리스트그룹, 알파벳 헤더로 묶인 스크롤 목록 등 세 가지 패턴을 나란히 보여줍니다. |
| 예제 | 설명 |
|---|
| 기본 모달 | 제목·본문·버튼 영역을 모두 갖춘 가장 기본적인 모달 구조입니다. |
| 큰 모달 | modal-lg로 너비를 넓혀 입력 항목이 많은 콘텐츠를 담습니다. |
| 작은 모달 | modal-sm으로 너비를 좁혀 삭제 확인처럼 짧은 문구만 담습니다. |
| 전체 너비 모달 | modal-full-width로 화면 가로 전체를 모달 상자로 사용합니다. |
| 스크롤 가능 모달 | 이 모달은 내용이 길어질 경우 스크롤이 가능합니다. |
| 폼이 있는 모달 | modal-lg 안에 텍스트·카드형 라디오·드롭다운 등 여러 입력 컨트롤을 조합한 등록 폼을 담습니다. |
| 성공 모달 | modal-status bg-success로 작업이 성공적으로 끝났음을 알리는 전용 모달입니다. |
| 위험 모달 | 삭제처럼 되돌릴 수 없는 작업을 실행하기 전 한 번 더 확인받는 모달입니다. |
| 간단한 폼이 있는 모달 | 기본 너비에 입력 항목이 적은 짧은 등록 폼을 담습니다. |
| 예제 | 설명 |
|---|
| 타이포그래피 | 이곳에 인용문을 넣을 수 있습니다. 이것은 인용문의 예시 텍스트입니다. 독자에게 영감을 주거나 중요한 내용을 강조할 때 사용됩니다. |
| 예제 | 설명 |
|---|
| 수평 단계 | steps 안에 step-item을 나열해 현재 진행 위치를 가로로 안내합니다. |
| 수직 단계 | steps-vertical로 각 단계마다 설명이 딸린 흐름을 세로로 보여줍니다. |
| 예제 | 설명 |
|---|
| 탭 | nav-bordered로 콘텐츠를 여러 그룹으로 나눠 전환하는 탭 내비게이션입니다. |
| 예제 | 설명 |
|---|
| 주요 업무 영역 | 카드 안에 핵심 지표를 아이콘·숫자·라벨 순으로 3분할 요약합니다. |
| 빠른 실행 | list-group-flush로 자주 쓰는 기능을 버튼 목록 형태로 모아 바로가기를 제공합니다. |
| 예제 | 설명 |
|---|
| 오늘의 예약 현황 | 카드·배지·아바타·버튼을 조합한 알림형 업무 요약 카드 예제입니다. |
| 예제 | 설명 |
|---|
| 폼 구성과 검증 | 필드셋·선택 그룹·유효성 검사 상태를 조합한 업무 상담 폼 예제입니다. |
| 예제 | 설명 |
|---|
| 유틸리티 | 테두리·여백·커서·세로 정렬 네 가지 유틸리티 클래스를 값별로 비교합니다. |
| 예제 | 설명 |
|---|
| 그룹코드 등록 | 그룹코드·그룹코드명을 등록하는 실제 HandStack 팝업 화면 예제입니다. |