목록
분류: 목록
한 카드 안에 서로 다른 세 가지 목록(list) 패턴을 3단 그리드(col-md-4)로 나란히 배치한 예제입니다. 첫 번째 열은 아바타와 이름을 2열 그리드로 배치한 단순 사용자 목록이고, 두 번째 열은 list-group에 체크박스를 넣어 항목을 선택할 수 있는 목록(선택된 행은 active로 강조), 세 번째 열은 이름의 첫 글자(list-group-header)로 그룹을 나누고 sticky-top으로 헤더를 고정한 채 스크롤되는 목록입니다. 실제 화면에서는 필요한 패턴 하나만 골라 재사용하면 됩니다.
.card
└── .card-body
└── .row.row-cards
├── .col-md-4 — 아바타 + 이름 목록 (2열 그리드)
├── .col-md-4 — 체크박스 선택 목록 (.list-group)
└── .col-md-4 — 알파벳 그룹 헤더가 있는 스크롤 목록
└── .list-group-header (sticky-top) + .list-group-item 반복
소스
<div class="card overflow-auto mt-3">
<div class="card-status-top bg-dark-overlay"></div>
<div class="card-header">
<h3 class="card-title">목록</h3>
</div>
<div class="card-body">
<div class="row row-cards">
<div class="col-md-4">
<div class="row g-3">
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/000m.jpg)">
<span class="badge bg-red"></span>
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Paweł Kuna</a>
<div class="text-secondary text-truncate mt-n1">2일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar">
<span class="badge bg-x"></span>JL
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Jeffie Lewzey</a>
<div class="text-secondary text-truncate mt-n1">3일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/002m.jpg)"></span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Mallory Hulme</a>
<div class="text-secondary text-truncate mt-n1">오늘</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/003m.jpg)">
<span class="badge bg-green"></span>
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Dunn Slane</a>
<div class="text-secondary text-truncate mt-n1">6일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/000f.jpg)">
<span class="badge bg-red"></span>
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Emmy Levet</a>
<div class="text-secondary text-truncate mt-n1">3일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/001f.jpg)">
<span class="badge bg-yellow"></span>
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Maryjo Lebarree</a>
<div class="text-secondary text-truncate mt-n1">2일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar">
<span class="badge bg-x"></span>EP
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Egan Poetz</a>
<div class="text-secondary text-truncate mt-n1">4일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/002f.jpg)">
<span class="badge bg-yellow"></span>
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Kellie Skingley</a>
<div class="text-secondary text-truncate mt-n1">6일 전</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar" style="background-image: url(../../img/avatars/003f.jpg)">
<span class="badge bg-x"></span>
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Christabel Charlwood</a>
<div class="text-secondary text-truncate mt-n1">오늘</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row g-3 align-items-center">
<a href="#" class="col-auto">
<span class="avatar">
<span class="badge bg-x"></span>HS
</span>
</a>
<div class="col text-truncate">
<a href="#" class="text-reset d-block text-truncate">Haskel Shelper</a>
<div class="text-secondary text-truncate mt-n1">어제</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="list-group list-group-flush">
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input"></div>
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/003f.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Christabel Charlwood</a>
<div class="d-block text-secondary text-truncate mt-n1">압축된 Sass 출력 지원 (#29702)</div>
</div>
</div>
</div>
<div class="list-group-item active">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input" checked=""></div>
<div class="col-auto">
<a href="#">
<span class="avatar">HS</span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Haskel Shelper</a>
<div class="d-block text-secondary text-truncate mt-n1">.form-check-input에 수직 정렬 설정 (#29521)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input"></div>
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/006m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Lorry Mion</a>
<div class="d-block text-secondary text-truncate mt-n1">인쇄용 테마 모양 유지 (#29714)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input"></div>
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/004f.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Leesa Beaty</a>
<div class="d-block text-secondary text-truncate mt-n1">`.stylelintrc`에서 큰따옴표 사용 (#29709)</div>
</div>
</div>
</div>
<div class="list-group-item active">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input" checked=""></div>
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/007m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Perren Keemar</a>
<div class="d-block text-secondary text-truncate mt-n1">package-lock.json 재생성 (#29695)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input"></div>
<div class="col-auto">
<a href="#">
<span class="avatar">SA</span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Sunny Airey</a>
<div class="d-block text-secondary text-truncate mt-n1">Coveralls Action으로 전환 (#29478)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input"></div>
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/009m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Geoffry Flaunders</a>
<div class="d-block text-secondary text-truncate mt-n1">npm audit 취약점 수정 (#29677)</div>
</div>
</div>
</div>
<div class="list-group-item active">
<div class="row align-items-center">
<div class="col-auto"><input type="checkbox" class="form-check-input" checked=""></div>
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/010m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-reset d-block">Thatcher Keel</a>
<div class="d-block text-secondary text-truncate mt-n1">config.yml: popper.js를 v1.16.0으로 업데이트 (#29624)</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="list-group list-group-flush overflow-auto" style="max-height: 35rem">
<div class="list-group-header sticky-top">A</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/023f.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Eva Acres</a>
<div class="text-secondary text-truncate mt-n1">사용되지 않는 html 태그를 텍스트 장식 클래스로 변경 (#29604)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar">SA</span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Sunny Airey</a>
<div class="text-secondary text-truncate mt-n1">justify-content:between ⇒ justify-content:space-between (#29734)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/049m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Northrop Alforde</a>
<div class="text-secondary text-truncate mt-n1">change-version.js 업데이트 (#29736)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/039m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Virgil Archbutt</a>
<div class="text-secondary text-truncate mt-n1">package-lock.json 재생성 (#29730)</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/033m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Guthry Arlott</a>
<div class="text-secondary text-truncate mt-n1">사소한 텍스트 수정</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar">AA</span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Arlie Armstead</a>
<div class="text-secondary text-truncate mt-n1">버전별 문서 링크</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/062m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Ashton Arndell</a>
<div class="text-secondary text-truncate mt-n1">카피라이팅 편집</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/062f.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Kass Aspinal</a>
<div class="text-secondary text-truncate mt-n1">글꼴 크기 조정을 위한 RFS 활성화</div>
</div>
</div>
</div>
<div class="list-group-header sticky-top">W</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/044f.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Gerti Washington</a>
<div class="text-secondary text-truncate mt-n1"></div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/052m.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Bord Wheatcroft</a>
<div class="text-secondary text-truncate mt-n1"></div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="row">
<div class="col-auto">
<a href="#">
<span class="avatar" style="background-image: url(../../img/avatars/025f.jpg)"></span>
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body d-block">Nanni Wooler</a>
<div class="text-secondary text-truncate mt-n1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
원본 이미지 경로(
img/...)는 참고용 표시이며 실제 이미지 파일은 포함하지 않았습니다. 미리보기 페이지에서는 자리 표시 이미지로 대체됩니다.
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
avatar | 이미지 또는 이니셜을 원형(기본값)으로 표시하는 아바타 컨테이너 |
badge, bg-red / bg-green / bg-yellow / bg-x | 아바타 모서리에 겹치는 작은 상태 점(온라인/부재중 등)의 배경색. bg-x는 회색조(비활성) 표시 |
list-group, list-group-flush | 세로로 나열되는 목록 컨테이너. -flush는 좌우 테두리와 바깥 여백을 제거해 카드에 밀착시킴 |
list-group-item | 목록의 개별 행 |
list-group-header | 목록 중간에 삽입되는 구분용 소제목(그룹 라벨) |
active | 목록 항목을 선택된 상태로 강조 표시 |
sticky-top | 스크롤 시 요소를 상단에 고정(그룹 헤더 고정에 사용) |
form-check-input | 각 목록 항목의 체크박스 입력 |
text-truncate | 텍스트가 넘칠 경우 말줄임표(…)로 잘라서 표시 |
text-reset, text-body, text-secondary | 링크/보조 텍스트의 색상을 각각 기본 텍스트색, 본문색, 흐린 보조색으로 지정 |
d-block | 요소를 블록 레벨로 표시(줄바꿈 강제) |
mt-n1 | 위쪽에 음수 여백을 주어 인접 요소와의 간격을 좁힘 |
row, row-cards, g-3 | Bootstrap 그리드 행과 열 간격(3단계 gutter) |
col, col-auto, col-6, col-md-4 | 가변 너비, 콘텐츠 크기만큼, 절반 너비, md 이상에서 1/3 너비를 갖는 그리드 열 |
align-items-center | 행(row) 안의 항목을 세로 중앙에 정렬 |
overflow-auto | 내용이 카드 높이를 넘으면 스크롤 처리 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/목록.html 경로에서 렌더링 결과를 확인할 수 있습니다.