[CSS] Bootstrap 탭 사용법

Frontend/CSS

[CSS] Bootstrap 탭 사용법

_성호_ 2022. 4. 4. 00:41

728x90

웹 개발을 하면서 탭은 매우 유용하게 사용될 수 있습니다. 위 사진은 제가 직접 Bootstrap을 사용하여 만든 탭 입니다.

차례대로 탭 사용법에 대해 알려드리겠습니다.

● 외부 스타일시트 적용

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

기본적으로 <head> 태그 안에 넣어 주셔야 합니다.

● 탭 메뉴 구성

<ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button
              class="nav-link active"
              id="saleList-tab"
              data-bs-toggle="tab"
              data-bs-target="#saleList"
              type="button"
              role="tab"
              aria-controls="saleList"
              aria-selected="true"
            >
              판매현황
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link"
              id="myreview-tab"
              data-bs-toggle="tab"
              data-bs-target="#purchaseList"
              type="button"
              role="tab"
              aria-controls="purchaseList"
              aria-selected="false"
            >
              구매현황
            </button>
          </li>
</ul>

<ul>, <li> 태그를 이용하여 순서 없는 목록을 만들고 버튼으로 탭 메뉴를 만들었습니다.

● 메뉴별 내용 구성

        <div class="tab-content" id="myTabContent">
          <div
            class="tab-pane fade show active"
            id="saleList-tab"
            role="tabpanel"
            aria-labelledby="saleList"
          >
            <table class="tb-w100 text-center">
              <colgroup>
                <col style="width: 30%" />
                <col style="width: 20%" />
                <col style="width: 20%" />
                <col style="width: 30%" />
              </colgroup>
              <tr>
                <th>상품명</th>
                <th>최고입찰가</th>
                <th>경매상태</th>
                <th>남은 마감시간</th>
              </tr>
              <tr>
                <td>HTML</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>CSS</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td>JAVASCRIPT</td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
          <div
            class="tab-pane fade"
            id="purchaseList"
            role="tabpanel"
            aria-labelledby="purchaseList-tab"
          >
            ...
          </div>
        </div>

<table> 태그를 이용하여 메뉴별 내용을 구성하였습니다.
<colgroup> 태그를 이용하여 각 열마다 너비를 지정하였습니다.

● 탭 전환 JS 적용

<script>
          let key = '${param.key}';
          console.log(key);
          if (key === 'saleList') {
            $('#buyList-tab').removeClass('active');
            $('#saleList-tab').addClass('active');

            $('#buyList').removeClass('show active');
            $('#saleList').addClass('show active');
          } else if (key === 'buyList') {
            $('#saleList-tab').removeClass('active');
            $('#buyList-tab').addClass('active');

            $('#saleList').removeClass('show active');
            $('#buyList').addClass('show active');
          }
</script>

● Bootstrap JavaScript plugin 적용

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

지금까지 Bootstrap 탭 사용법에 대해 알아보았습니다!

저작자표시 (새창열림)