본문 바로가기

비개발자의 개발 일지

현장 팀장에서 수출 ERP까지 — AI와 함께 시스템을 만든 기록

시리즈 보기
php

부트스트랩 라벨 · 배지 · 알림 · 목록그룹 완전 정리

by 왕진 2026. 7. 18.
반응형

 

 

Bootstrap Components

부트스트랩 라벨 · 배지 · 알림 · 목록그룹 완전 정리

알림, 라벨, 배지, 목록그룹, 페이지헤더, 썸네일을 Bootstrap 3 기준으로 정리합니다.

0 오늘 분석할 코드
<div class="alert alert-success">성공 메시지</div>
<span class="label label-danger">중요</span>
<span class="badge pull-right">42</span>
<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">제목</h4>
    <p class="list-group-item-text">내용</p>
  </a>
</div>
<div class="page-header"><h1>페이지 제목</h1></div>
<div class="thumbnail"><img src="DSC_6305.jpg" alt="사진 설명"><div class="caption">...</div></div>
alert상태 메시지를 박스로 보여 주는 컴포넌트입니다.
alert-dismissable닫기 버튼이 있는 알림 구조입니다.
label짧은 상태 태그를 표시합니다.
badge숫자나 개수를 작은 원형 표시로 보여 줍니다.
list-group목록 항목을 그룹 UI로 보여 줍니다.
page-header페이지 제목 영역을 구분합니다.
thumbnail이미지와 캡션을 카드처럼 묶습니다.
caption썸네일 안의 제목, 설명, 버튼 영역입니다.
1 컴포넌트 묶음 개요

101번 폴더는 Bootstrap 3의 정보 표시 컴포넌트를 모아 둔 예제입니다. 알림은 상태 메시지, 라벨은 짧은 상태 태그, 배지는 개수 표시, 목록그룹은 항목 목록, 페이지헤더는 제목 구분, 썸네일은 이미지 카드에 해당합니다.

  • 상태를 보여 줄 때는 alert와 label을 씁니다.
  • 개수를 보여 줄 때는 badge가 적합합니다.
  • 여러 항목을 묶을 때는 list-group을 씁니다.
  • 이미지 목록에는 thumbnail과 grid를 함께 씁니다.
2 alert 유형
클래스 역할 주의
alert-success 성공 메시지 저장 완료, 가입 완료
alert-info 정보 메시지 필수 입력 안내
alert-warning 주의 메시지 잘못된 입력 가능성
alert-danger 위험 메시지 오류나 재확인 필요
3 닫을 수 있는 알림

alert-dismissable과 close 버튼, data-dismiss="alert"를 조합하면 사용자가 알림을 닫을 수 있습니다. 이 동작은 Bootstrap JavaScript가 필요합니다.

  1. alert alert-danger alert-dismissable을 만듭니다.
  2. button.close를 알림 안에 넣습니다.
  3. data-dismiss="alert"를 버튼에 붙입니다.
  4. aria-hidden이나 보조 문구로 닫기 의미를 보완합니다.
  5. jQuery와 bootstrap.min.js 로드를 확인합니다.

 

반응형

 

4 alert-link

alert 안의 링크는 alert-link 클래스를 붙이면 알림 색상과 어울리는 링크 색상으로 조정됩니다. 회원가입 완료 후 홈으로 돌아가기 같은 안내 링크에 적합합니다.

  • alert-success 안에서는 성공 메시지와 연결된 다음 행동을 안내합니다.
  • alert-danger 안에서는 오류 해결 링크를 둘 수 있습니다.
  • 링크 문구는 이동 목적이 분명해야 합니다.
  • 닫기 버튼과 링크가 너무 가까우면 오클릭을 확인합니다.
5 label
클래스 역할 주의
label-default 기본 라벨 New 같은 중립 상태
label-primary 주요 라벨 핵심 상태
label-success 성공 라벨 완료, 정상
label-info 정보 라벨 분류나 안내
label-warning 주의 라벨 확인 필요
label-danger 위험 라벨 중요, 긴급
6 테이블 안 라벨

원문은 게시판 테이블의 제목 옆에 New, 중요, 정보 라벨을 붙입니다. 라벨은 본문 전체가 아니라 짧은 상태를 표시할 때 사용해야 읽기 쉽습니다.

  • 제목 옆 New는 새 글 표시입니다.
  • 중요 라벨은 우선순위가 높은 글에 적합합니다.
  • 정보 라벨은 분류나 상태 안내에 적합합니다.
  • 라벨이 많아지면 테이블이 복잡해 보일 수 있습니다.
7 badge

badge는 숫자나 개수를 보여 주는 작은 표시입니다. 원문은 nav-pills nav-stacked 메뉴 오른쪽에 pull-right로 배지를 붙여 메뉴별 개수를 보여 줍니다.

클래스 역할 주의
badge 개수 표시 알림 수, 글 수
pull-right 오른쪽 정렬 Bootstrap 3 float 유틸
nav-pills 메뉴 스타일 배지와 함께 쓰기 좋음
active 현재 메뉴 배지가 있는 항목도 강조 가능
8 list-group 기본

list-group은 ul/li로 기본 목록을 만들거나 div/a로 클릭 가능한 목록을 만들 수 있습니다. list-group-item은 각 항목에 붙는 핵심 클래스입니다.

클래스 역할 주의
list-group 목록 전체 ul 또는 div
list-group-item 개별 항목 li 또는 a
active 현재 항목 클릭 목록에서 사용
badge 항목별 개수 오른쪽에 표시
9 list-group 확장

목록 항목 안에 list-group-item-heading과 list-group-item-text를 넣으면 제목과 설명이 있는 확장 목록이 됩니다. 단순 메뉴보다 콘텐츠 목록에 적합합니다.

  1. a.list-group-item을 만듭니다.
  2. 제목에는 h4.list-group-item-heading을 사용합니다.
  3. 설명에는 p.list-group-item-text를 사용합니다.
  4. 필요하면 badge를 함께 넣습니다.
  5. 현재 항목에는 active를 붙입니다.
10 page-header

page-header는 기사나 본문 상단에서 제목 영역을 구분합니다. 원문은 navbar 아래 article 안에 page-header를 두어 본문 제목을 분리합니다.

클래스 역할 주의
page-header 제목 구분 영역 본문 시작 전에 사용
h1 페이지 제목 문서 계층을 고려
article 본문 영역 의미 있는 컨테이너
navbar 상단 메뉴 제목보다 먼저 배치
11 navbar와 page-header 조합

Pageheader 원문은 navbar, dropdown, search form, article, page-header를 한 페이지 구조로 보여 줍니다. 컴포넌트 하나만 보는 것이 아니라 실제 페이지 배치에서 제목 영역이 어디에 놓이는지 확인하는 예제입니다.

  • navbar는 전역 탐색입니다.
  • page-header는 현재 페이지 제목입니다.
  • article은 긴 본문 콘텐츠입니다.
  • 검색 폼은 navbar 오른쪽에 배치됩니다.
12 thumbnail 기본

thumbnail은 이미지에 테두리와 여백을 붙여 갤러리 형태로 보여 줍니다. 원문은 col-sm-6 col-md-3 그리드로 네 장의 이미지를 한 줄에 배치합니다.

클래스 역할 주의
thumbnail 이미지 카드 외형 a 또는 div에 붙임
img 실제 이미지 alt 필요
col-sm-6 태블릿 2열 12칸 중 6칸
col-md-3 데스크톱 4열 12칸 중 3칸
13 caption 있는 썸네일

div.thumbnail 안에 img와 caption을 넣으면 이미지 아래에 제목, 설명, 버튼을 추가할 수 있습니다. 상품 카드나 포트폴리오 카드의 기본 구조입니다.

  • caption 안에는 h3 제목을 넣습니다.
  • p에는 설명 문구를 넣습니다.
  • 버튼은 btn-primary와 btn-default를 함께 둘 수 있습니다.
  • 이미지 크기가 다르면 카드 높이가 달라질 수 있습니다.
14 이미지 경로와 alt

원문 이미지 src는 DSC_6305.jpg처럼 같은 폴더 기준 파일명입니다. 실제 파일이 없으면 썸네일 영역이 깨지므로 경로를 확인해야 합니다. alt는 단순 ...보다 이미지 내용을 설명하는 문구가 좋습니다.

썸네일은 시각 요소 중심 컴포넌트라 이미지 로딩 실패와 대체 텍스트 품질이 문서 완성도에 바로 영향을 줍니다.
15 Bootstrap 3 기준

label, badge, panel 계열, thumbnail, page-header는 Bootstrap 3에서 많이 쓰인 컴포넌트입니다. 최신 버전에서는 badge 색상 클래스, card 컴포넌트, utility 조합으로 바뀐 부분이 있습니다.

클래스 역할 주의
label Bootstrap 3 상태 태그 최신 버전 badge로 대체 가능
thumbnail Bootstrap 3 이미지 카드 최신 버전 card 사용 검토
page-header Bootstrap 3 제목 구분 직접 CSS 구성 가능
pull-right Bootstrap 3 float 최신 버전 float-end 확인
16 실전 선택 기준
상황 추천 이유
폼 저장 성공 alert-success 사용자에게 결과를 명확히 전달합니다.
게시글 새 상태 label-default 또는 label-info 짧은 상태 태그에 적합합니다.
읽지 않은 개수 badge 숫자 표시가 간결합니다.
설정 메뉴 목록 list-group 항목 단위 클릭 UI에 적합합니다.
이미지 갤러리 thumbnail + grid 반응형 이미지 목록을 만들기 쉽습니다.
17 검증 체크리스트
  • alert 색상이 메시지 의미와 맞습니다.
  • 닫기 가능한 alert에는 Bootstrap JavaScript가 로드되어 있습니다.
  • label은 짧은 상태 문구에만 사용합니다.
  • badge 숫자는 실제 데이터와 동기화됩니다.
  • list-group의 active 항목이 현재 상태와 맞습니다.
  • thumbnail 이미지 경로와 alt를 확인합니다.
18 적용 순서
  1. 메시지 성격 판단: 성공, 정보, 주의, 위험 중 어떤 상태인지 먼저 고릅니다.
  2. 짧은 태그 분리: 글 제목 옆에는 label처럼 짧은 상태만 붙입니다.
  3. 개수 표시: 메뉴나 목록의 숫자에는 badge를 사용합니다.
  4. 목록 구조: 단순 목록인지 클릭 가능한 목록인지에 따라 ul/li와 div/a 구조를 고릅니다.
  5. 이미지 카드: thumbnail에는 이미지, caption, 버튼을 역할별로 나눠 넣습니다.
19 접근성 점검
  • alert의 색상만으로 상태를 전달하지 말고 문장 안에도 성공, 경고, 오류 의미를 적습니다.
  • 닫기 버튼에는 X 모양 외에도 닫기 의미가 전달되도록 보조 문구를 고려합니다.
  • badge 숫자가 무엇의 개수인지 주변 텍스트에서 알 수 있어야 합니다.
  • list-group이 링크 목록이면 키보드 포커스 순서가 자연스러운지 확인합니다.
  • thumbnail 이미지는 alt를 구체적으로 작성해 이미지가 없어도 의미가 남게 합니다.
20 최신 버전 이전 메모
Bootstrap 3 이전 시 확인 메모
label badge 또는 커스텀 태그 최신 버전에서는 명칭과 색상 체계가 다릅니다.
alert-dismissable dismissible 클래스명 확인 닫기 버튼 속성도 버전별로 다릅니다.
thumbnail card 컴포넌트 이미지 카드로 옮기기 쉽습니다.
pull-right float-end 계열 Bootstrap 버전에 맞춰 바꿉니다.
page-header 유틸리티 조합 제목 영역을 직접 구성합니다.
M 자주 하는 실수
실수 문제 해결
닫기 알림에 스크립트 누락 X 버튼이 동작하지 않습니다. jQuery와 bootstrap.min.js를 로드합니다.
label에 긴 문장 사용 표와 제목이 복잡해집니다. 짧은 상태 단어만 넣습니다.
badge 숫자 미갱신 사용자가 잘못된 개수로 이해합니다. 실제 데이터와 함께 갱신합니다.
thumbnail alt 생략 이미지 실패와 접근성 대응이 약합니다. 구체적인 alt를 작성합니다.
Bootstrap 버전 혼동 thumbnail이나 label이 기대와 다를 수 있습니다. Bootstrap 3 기준임을 확인합니다.

핵심 한 줄 요약

statealert와 label은 상태를 짧고 명확하게 보여 줍니다.
countbadge는 메뉴나 목록의 개수를 간결하게 표시합니다.
contentlist-group, page-header, thumbnail은 콘텐츠 목록과 이미지 카드 구성에 적합합니다.

Tags

#Bootstrap#alert#label#badge#list-group#page-header#thumbnail#caption#Bootstrap3#티스토리
▼ 티스토리 태그 입력란 복사용
Bootstrap, alert, label, badge, list-group, page-header, thumbnail, caption, Bootstrap3, 티스토리
반응형

'php' 카테고리의 다른 글

부트스트랩 어코디언 · 툴팁 · 팝오버 · 어픽스 완전 정리  (0) 2026.07.18
부트스트랩 캐러셀 · 모달 · 스크롤스파이 완전 정리  (0) 2026.07.18
부트스트랩 드롭다운 · 점보트론 · 내비게이션바 · 진행바 완전 정리  (0) 2026.07.18
부트스트랩 네비게이션 · 페이지네이션 · 패널 완전 정리  (0) 2026.07.17
부트스트랩 타이포그래피 · 반응형 유틸리티 완전 정리  (0) 2026.07.17

관련글

댓글

티스토리툴바