간단한 폼이 있는 모달
분류: 모달
간단한 폼이 있는 모달은 새 팀 추가처럼 입력 항목 수가 적은 짧은 등록 폼을 담는 모달입니다. 폼이 있는 모달과 달리 기본 너비(modal-dialog)를 그대로 사용하며, 이름 입력 옆에 아바타 업로드 버튼(avatar avatar-upload)을 나란히 배치하고, 라디오 버튼을 색상 견본(form-colorinput)으로 표현해 텍스트 대신 색상을 클릭해 선택하도록 구성했습니다.
소스
<a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-team">
간단한 폼이 있는 모달
</a>
<div class="modal modal-blur fade" id="modal-team" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">새 팀 추가</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
<div class="col-auto">
<a href="#" class="avatar avatar-upload rounded">
<i class="f:20 ti ti-plus"></i>
<span class="avatar-upload-text">추가</span>
</a>
</div>
<div class="col">
<label class="form-label">이름</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="mb-3">
<label class="form-label">팀 색상 선택</label>
<div class="row g-2">
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="dark" class="form-colorinput-input" />
<span class="form-colorinput-color bg-dark"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput form-colorinput-light">
<input name="color" type="radio" value="white" class="form-colorinput-input" checked />
<span class="form-colorinput-color bg-white"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="blue" class="form-colorinput-input" />
<span class="form-colorinput-color bg-blue"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="azure" class="form-colorinput-input" />
<span class="form-colorinput-color bg-azure"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="indigo" class="form-colorinput-input" />
<span class="form-colorinput-color bg-indigo"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="purple" class="form-colorinput-input" />
<span class="form-colorinput-color bg-purple"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="pink" class="form-colorinput-input" />
<span class="form-colorinput-color bg-pink"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="red" class="form-colorinput-input" />
<span class="form-colorinput-color bg-red"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="orange" class="form-colorinput-input" />
<span class="form-colorinput-color bg-orange"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="yellow" class="form-colorinput-input" />
<span class="form-colorinput-color bg-yellow"></span>
</label>
</div>
<div class="col-auto">
<label class="form-colorinput">
<input name="color" type="radio" value="lime" class="form-colorinput-input" />
<span class="form-colorinput-color bg-lime"></span>
</label>
</div>
</div>
</div>
<div>
<label class="form-label">추가 정보</label>
<textarea class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">팀 추가</button>
</div>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
modal, modal-blur, fade | 모달 컨테이너, 배경 흐림, 페이드 애니메이션 |
modal-dialog | 모달 상자 영역(기본 너비) |
modal-dialog-centered | 화면 세로 중앙 배치 |
modal-content / modal-header / modal-title | 콘텐츠 박스 / 상단 제목 영역 / 제목 텍스트 스타일 |
btn-close | 우측 상단 닫기(×) 아이콘 버튼 |
modal-body | 본문 영역 |
row, col, col-auto | 아바타 업로드와 이름 입력을 가로로 배치하는 그리드 |
align-items-end | 라벨 높이가 달라도 입력 필드 하단을 맞춰 정렬 |
avatar, avatar-upload, avatar-upload-text, rounded | 아바타 표시 영역, 업로드 가능한 아바타 스타일, 업로드 안내 텍스트, 모서리 둥글게 |
f:20 | 아이콘 크기를 20px로 지정(master-css) |
ti, ti-plus | Tabler 아이콘 폰트, 더하기 아이콘 |
form-label / form-control | 입력 항목 라벨 / 텍스트 입력·textarea |
mb-3 | 입력 항목 사이 아래쪽 여백 |
g-2 | 색상 견본 사이 그리드 간격 |
form-colorinput | 색상 견본형 라디오 입력을 감싸는 라벨 |
form-colorinput-input | 실제 라디오 입력(화면에는 숨김) |
form-colorinput-color | 원형 색상 견본을 그리는 요소 |
form-colorinput-light | 밝은 색상 견본에 테두리를 추가해 배경과 구분되게 함 |
bg-*(bg-dark, bg-white, bg-blue 등) | 각 색상 견본의 배경색 |
btn, btn-primary | 기본 버튼, 강조(주 작업) 버튼 색상 |
me-auto | 닫기 버튼을 왼쪽으로 밀어 추가 버튼과 간격을 자동으로 벌림 |
modal-footer | 버튼 영역 |
실전 예제 페이지
HandStack 웹 호 스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/모달-간단한-폼이-있는-모달.html 경로에서 렌더링 결과를 확인할 수 있습니다.