탭
분류: 탭
하나의 화면 안에서 콘텐츠를 여러 그룹으로 나눠 전환할 때 쓰는 내비게이션입니다. .nav에 .nav-bordered를 더하면 밑줄 스타일의 탭 모양이 되고, 각 항목은 .nav-item 안의 .nav-link로 구성합니다. 이 예제는 정적 마크업만 담고 있어 active 클래스가 붙은 링크가 보기에 선택된 탭처럼 표시되지만, 실제 화면 전환(탭 클릭 시 내용 바꾸기)을 구현하려면 Bootstrap의 data-bs-toggle="tab" 속성과 대상 .tab-pane 콘텐츠 영역을 함께 연결해야 합니다.
소스
<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">
<ul class="nav nav-bordered">
<li class="nav-item">
<span class="nav-link active">
<i class="f:20 mr:4 ti ti-news"></i>
모두 보기
</span>
</li>
<li class="nav-item">
<span class="nav-link">
<i class="f:20 mr:4 ti ti-news"></i>
마케팅
</span>
</li>
<li class="nav-item">
<span class="nav-link">
<i class="f:20 mr:4 ti ti-news"></i>
개발
</span>
</li>
</ul>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
nav | Bootstrap 내비게이션 컨테이너 |
nav-bordered | 탭 항목 아래에 밑줄 형태의 경계선을 표시하는 Tabler 스타일 |
nav-item | 각 탭 항목의 래퍼 |
nav-link | 탭 항목의 클릭 가능한 링크/버튼 요소 |
active | 현재 선택된 탭임을 표시 |
ti, ti-news | Tabler 아이콘 폰트와 아이콘 종류(뉴스) 지정 |
f:20 | master-css 속성형 클래스, 아이콘 글자 크기를 20px로 지정 |
mr:4 | master-css 속성형 클래스, 오른쪽 여백을 4px로 지정 |
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/탭.html 경로에서 렌더링 결과를 확인할 수 있습니다.