이미지 선택
분류: 폼 요소
썸네일 이미지를 클릭해 선택하는 이미지 체크/라디오 컨트롤 예제입니다. .form-imagecheck가 실제 checkbox/radio 입력을 감싸고, 안쪽의 .form-imagecheck-figure/.form-imagecheck-image가 썸네일을 표시합니다. 선택된 항목에는 자동으로 강조 테두리와 체크 표시가 나타나며, name 속성을 같은 값으로 묶으면 라디오처럼 단일 선택으로 동작합니다.
소스
<div class="mb-3">
<label class="form-label">이미지 체크</label>
<div class="row g-2">
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="해변의 나무 그루터기에서 콜라 캔과 함께 휴식을 취하는 아름다운 금발 여성" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="2" class="form-imagecheck-input" checked="">
<span class="form-imagecheck-figure">
<img src="../../img/photos/brainstorming-session-with-creative-designers.jpg" alt="창의적인 디자이너들과의 브레인스토밍 세션" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="3" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" alt="금융 - 미국 달러와 비트코인 - 통화 - 돈" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="4" class="form-imagecheck-input" checked="">
<span class="form-imagecheck-figure">
<img src="../../img/photos/group-of-people-brainstorming-and-taking-notes-2.jpg" alt="브레인스토밍하고 메모하는 사람들" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="5" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" alt="디자이너 거실 인테리어의 파란 소파와 쿠션" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck" type="checkbox" value="6" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/home-office-desk-with-macbook-iphone-calendar-watch-and-organizer.jpg" alt="맥북, 아이폰, 달력, 시계, 정리함이 있는 홈 오피스 책상" class="form-imagecheck-image">
</span>
</label>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">이미지 라디오</label>
<div class="row g-2">
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="1" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/group-of-people-sightseeing-in-the-city.jpg" alt="도시에서 관광하는 사람들" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="2" class="form-imagecheck-input" checked="">
<span class="form-imagecheck-figure">
<img src="../../img/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="색상 팔레트 가이드. 샘플 색상 카탈로그." class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="3" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/stylish-workplace-with-computer-at-home.jpg" alt="집에 있는 컴퓨터가 있는 세련된 작업 공간" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="4" class="form-imagecheck-input" checked="">
<span class="form-imagecheck-figure">
<img src="../../img/photos/pink-desk-in-the-home-office.jpg" alt="홈 오피스의 핑크색 책상" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="5" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop.jpg" alt="소파에 앉아 노트북으로 작업하는 젊은 여성" class="form-imagecheck-image">
</span>
</label>
</div>
<div class="col-6 col-sm-4">
<label class="form-imagecheck mb-2">
<input name="form-imagecheck-radio" type="radio" value="6" class="form-imagecheck-input">
<span class="form-imagecheck-figure">
<img src="../../img/photos/coffee-on-a-table-with-other-items.jpg" alt="다른 아이템들과 함께 테이블에 있는 커피" class="form-imagecheck-image">
</span>
</label>
</div>
</div>
</div>
원본 이미지 경로(
img/...)는 참고용 표시이며 실제 이미지 파일은 포함하지 않았습니다. 미리보기 페이지에서는 자리 표시 이미지로 대체됩니다.
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
col-6, col-sm-4 | 화면 폭에 따라 2열/3열로 배치되는 그리드 열 |
form-imagecheck | 이미지 체크/라디오 항목 전체를 감싸는 라벨 컨테이너 |
form-imagecheck-figure | 썸네일 이미지와 선택 표시를 담는 영역 |
form-imagecheck-image | 실제 썸네일 <img>에 적용되는 스타일 |
form-imagecheck-input | 화면에는 보이지 않는 실제 checkbox/radio 입력 |
form-label | 이미지 그룹 위에 붙는 라벨 텍스트 스타일 |
g-2 | 그리드 행의 열 사이 간격(gutter) |
mb-2, mb-3 | 요소 사이 아래쪽 여백(margin-bottom) |
row | Bootstrap 그리드 행 |
참고 자료
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-이미지-선택.html 경로에서 렌더링 결과를 확인할 수 있습니다.