Components

Tabs

같은 층위의 뷰를 전환합니다. 필 형태를 사용합니다.

전체문서URL
코드 보기
<div class="src-tabs">
  <span class="src-tab on">전체</span>
  <span class="src-tab">문서</span>
</div>

Variants

이름설명미리보기
on검정 반전 필전체
기본테두리 필 → hover 파랑문서

Guidelines

✓ Do
  • 탭 5개 이내
  • 탭 전환은 콘텐츠만 갈아끼운다 (URL 이동 아님)
✕ Don't
  • 밑줄형 탭과 혼용하지 않는다 (필형으로 통일)
  • 탭에 아이콘+텍스트 동시 사용 자제

Specification

속성토큰/값비고
radius999px
on--foreground 반전
타이포0.78rem / 500

비교

Tabs vs Segmented Control — Tabs는 콘텐츠 영역 전환, Segmented는 한 값의 선택(옵션 2~3개).