목록 그룹

목록 그룹 (List group)

목록 그룹은 일련의 콘텐츠를 표시하기 위한 유연하고 강력한 컴포넌트입니다. 내부의 거의 모든 콘텐츠를 지원하도록 수정하고 확장하세요.

출처: 문서

본문

기본 예제 (Basic example)

가장 기본적인 목록 그룹은 올바른 클래스를 가진 목록 아이템들이 있는 순서 없는 목록입니다. 뒤따르는 옵션들로, 또는 필요에 따라 자신만의 CSS로 확장해 보세요.

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

활성 항목 (Active items)

.list-group-item에 .active를 추가해 현재 활성 선택을 표시합니다.

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

링크와 버튼 (Links and buttons)

<a> 또는 <button>을 사용하고 .list-group-item-action을 추가하면 hover, disabled, active 상태를 가진 동작 가능한 목록 그룹 아이템을 만들 수 있습니다. 이 의사(pseudo) 클래스를 분리해 둔 것은 비-대화형 요소(<li>나 <div> 같은)로 만든 목록 그룹이 클릭이나 탭 어포던스(affordance)를 제공하지 않도록 하기 위해서입니다.

.disabled를 추가하고, 요소가 비활성 상태임을 보조 기술에 알리려면 aria-disabled="true"를 추가해 .list-group-item-action 인스턴스를 비활성으로 보이게 하세요. 링크와 버튼을 완전히 비활성화하려면 추가 JavaScript가 필요할 수 있습니다.

여기서 표준 .btn 클래스를 사용하지 않도록 주의하세요.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">A disabled link item</a>
</div>

<button>에서는 .disabled 클래스 대신 disabled 속성을 사용할 수도 있습니다. 안타깝게도 <a>는 disabled 속성을 지원하지 않습니다.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

플러시 (Flush)

.list-group-flush를 추가해 몇 가지 테두리와 둥근 모서리를 제거하면 목록 그룹 아이템이 부모 컨테이너(예: 카드)에서 가장자리까지(edge-to-edge) 렌더링됩니다.

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

번호 매기기 (Numbered)

.list-group-numbered 변형 클래스를 추가하고(선택적으로 <ol> 요소 사용) 번호가 매겨진 목록 그룹 아이템을 선택하세요. 숫자는 목록 그룹 아이템 안에 더 잘 배치되고 더 나은 커스터마이징을 위해 CSS로 생성됩니다(<ol>의 브라우저 기본 스타일링 대신).

숫자는 <ol>의 counter-reset으로 생성되고, <li>의 ::before 의사 요소에 counter-increment와 content를 사용해 스타일링·배치됩니다.

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

이들은 커스텀 콘텐츠에서도 잘 작동합니다.

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>

가로 (Horizontal)

.list-group-horizontal을 추가하면 모든 브레이크포인트에서 목록 그룹 아이템의 레이아웃이 세로에서 가로로 바뀝니다. 또는 반응형 변형 .list-group-horizontal-{sm|md|lg|xl|xxl}을 선택해 그 브레이크포인트의 min-width부터 목록 그룹을 가로로 만들 수 있습니다. 현재 가로 목록 그룹은 플러시 목록 그룹과 결합할 수 없습니다.

ProTip: 가로일 때 목록 그룹 아이템의 너비를 동일하게 하시겠어요? 각 목록 그룹 아이템에 .flex-fill을 추가하세요.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

변형 (Variants)

주의! v5.3.0부터 list-group-item-variant() Sass 믹스인은 폐기(더 이상 사용하지 않음)되었습니다. 목록 그룹 아이템 변형은 이제 CSS 변수를 Sass 루프에서 덮어쓰는 방식으로 처리됩니다.

맥락 클래스로 상태가 있는 배경과 색으로 목록 아이템을 스타일링하세요.

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

링크와 버튼용 (For links and buttons)

맥락 클래스는 <a>와 <button> 요소의 .list-group-item-action에서도 작동합니다. 이전 예제에는 없던 hover 스타일이 여기에 추가된 것에 주목하세요. .active 상태도 지원됩니다. 맥락 목록 그룹 아이템에서 활성 선택을 나타내도록 적용하세요.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

접근성 팁: 의미를 전달하기 위해 색만 사용하는 것은 시각적 표시일 뿐, 스크린 리더 같은 보조 기술 사용자에게는 전달되지 않습니다. 의미가 콘텐츠 자체에서 분명하거나(예: 충분한 색 대비를 가진 보이는 텍스트), .visually-hidden 클래스로 숨긴 추가 텍스트 같은 대체 수단으로 포함되는지 확인하세요.

배지 사용 (With badges)

몇 가지 유틸리티의 도움으로 어떤 목록 그룹 아이템에든 배지를 추가해 읽지 않은 개수, 활동 등을 표시할 수 있습니다.

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge text-bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge text-bg-primary rounded-pill">1</span>
  </li>
</ul>

커스텀 콘텐츠 (Custom content)

flexbox 유틸리티의 도움으로 아래 같은 링크 목록 그룹을 포함해 거의 모든 HTML을 내부에 추가할 수 있습니다.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">And some muted small print.</small>
  </a>
</div>

체크박스와 라디오 (Checkboxes and radios)

Bootstrap의 체크박스와 라디오를 목록 그룹 아이템 안에 배치하고 필요에 따라 커스터마이즈하세요. <label> 없이도 사용할 수 있지만, 접근성을 위해 aria-label 속성과 값을 포함하는 것을 꼭 기억하세요.

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

<label>에 .stretched-link를 사용하면 목록 그룹 아이템 전체를 클릭 가능하게 만들 수 있습니다.

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

변수 (Variables) — v5.2.0에서 추가

Bootstrap의 진화하는 CSS 변수 접근 방식에 따라, 목록 그룹은 이제 .list-group에 로컬 CSS 변수를 사용해 실시간 커스터마이징을 강화합니다. CSS 변수의 값은 Sass를 통해 설정되므로 Sass 커스터마이징도 여전히 지원됩니다.

--#{$prefix}list-group-color: #{$list-group-color};
--#{$prefix}list-group-bg: #{$list-group-bg};
--#{$prefix}list-group-border-color: #{$list-group-border-color};
--#{$prefix}list-group-border-width: #{$list-group-border-width};
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
--#{$prefix}list-group-action-color: #{$list-group-action-color};
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
--#{$prefix}list-group-active-color: #{$list-group-active-color};
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass 변수 (Sass variables)

$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Sass 믹스인 (Sass mixins) — v5.3.0에서 폐기

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Sass 루프 (Sass loops)

CSS 변수를 덮어쓰며 변형(modifier) 클래스를 생성하는 루프입니다.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript 동작 (JavaScript behavior)

tab JavaScript 플러그인(개별로 또는 컴파일된 bootstrap.js 파일을 통해 포함)을 사용해 목록 그룹을 확장해 로컬 콘텐츠의 탭 가능한(tabbable) 패널을 만들 수 있습니다.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

데이터 속성 사용 (Using data attributes)

JavaScript를 전혀 작성하지 않고 요소에 data-bs-toggle="list"를 지정하기만 하면 목록 그룹 내비게이션을 활성화할 수 있습니다. .list-group-item에 이 데이터 속성을 사용하세요.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

JavaScript로 (Via JavaScript)

JavaScript로 탭 가능한 목록 아이템을 활성화합니다 (각 목록 아이템을 개별적으로 활성화해야 합니다):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

개별 목록 아이템을 여러 방식으로 활성화할 수 있습니다:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

페이드 효과 (Fade effect)

탭 패널이 페이드 인하게 하려면 각 .tab-pane에 .fade를 추가하세요. 첫 번째 탭 패널은 초기 콘텐츠를 보이게 하려면 .show도 있어야 합니다.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

메서드 (Methods)

모든 API 메서드는 비동기이며 전환을 시작합니다. 전환이 시작되자마자, 즉 끝나기 전에 호출자에게 반환됩니다. 또한 전환 중인 컴포넌트에 대한 메서드 호출은 무시됩니다. 자세한 내용은 JavaScript 문서를 참고하세요.

콘텐츠를 탭 요소로 활성화합니다.

생성자(constructor)로 탭 인스턴스를 만들 수 있습니다:

const bsTab = new bootstrap.Tab('#myTab')

메서드	설명
dispose	요소의 탭을 파괴합니다.
getInstance	DOM 요소에 연결된 탭 인스턴스를 가져올 수 있는 정적 메서드입니다. 이렇게 사용할 수 있습니다: bootstrap.Tab.getInstance(element).
getOrCreateInstance	DOM 요소에 연결된 탭 인스턴스를 반환하거나, 초기화되지 않았다면 새로 만드는 정적 메서드입니다. 이렇게 사용할 수 있습니다: bootstrap.Tab.getOrCreateInstance(element).
show	주어진 탭을 선택하고 연결된 패널을 보여줍니다. 이전에 선택된 다른 탭은 선택 해제되고 그 연결된 패널은 숨겨집니다. 탭 패널이 실제로 보이기 전에(즉, shown.bs.tab 이벤트가 발생하기 전에) 호출자에게 반환됩니다.

이벤트 (Events)

새 탭을 보여줄 때 이벤트는 다음 순서로 발생합니다:

• hide.bs.tab (현재 활성 탭에서)
• show.bs.tab (곧 보일 탭에서)
• hidden.bs.tab (이전 활성 탭에서, hide.bs.tab 이벤트와 같은 탭)
• shown.bs.tab (새로 활성화된 방금 보인 탭에서, show.bs.tab 이벤트와 같은 탭)

이미 활성화된 탭이 없었다면 hide.bs.tab과 hidden.bs.tab 이벤트는 발생하지 않습니다.

이벤트 타입	설명
hide.bs.tab	새 탭이 보여질 때(그래서 이전 활성 탭이 숨겨질 때) 발생합니다. event.target과 event.relatedTarget을 사용해 현재 활성 탭과 곧 활성화될 새 탭을 각각 타깃합니다.
hidden.bs.tab	새 탭이 보여진 후(그래서 이전 활성 탭이 숨겨진 후) 발생합니다. event.target과 event.relatedTarget을 사용해 이전 활성 탭과 새 활성 탭을 각각 타깃합니다.
show.bs.tab	탭 표시 시, 새 탭이 보여지기 전에 발생합니다. event.target과 event.relatedTarget을 사용해 활성 탭과 이전 활성 탭(사용 가능하다면)을 각각 타깃합니다.
shown.bs.tab	탭이 보여진 후 탭 표시 시 발생합니다. event.target과 event.relatedTarget을 사용해 활성 탭과 이전 활성 탭(사용 가능하다면)을 각각 타깃합니다.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})

더 알아보기 (Learn more)

• Bootstrap 문서