# 탭메뉴 (tab)
| 항목 | 경로 |
|------|------|
| 데모 | `tab.html` |
| CSS | `css/tab.css` |
| JS | `js/jquery` + `js/sectionDisplay.js` |
| 이미지 | 없음 |
---
## 마크업 (권장)
```html
```
- 탭: `button` + `role="tab"` (링크 ``보다 버튼 권장)
- 목록: `role="tablist"` + `aria-label`
- 패널: `role="tabpanel"` + `aria-labelledby` + 비활성 시 `hidden`
---
## 초기화
```js
$('#demoTabs').sectionDisplay({
act: 'click', // 탭은 click 권장 (hover 비권장)
start: 0,
nav: $('#demoTabs .tab-list'),
auto: false
});
```
`nav`를 생략하면 root 안의 `[role=tablist]` / `.tab-list`를 자동으로 찾습니다.
---
## 키보드
| 키 | 동작 |
|----|------|
| Tab | 선택된 탭 ↔ 패널 내용으로 이동 |
| ← → / ↑ ↓ | 이전·다음 탭 선택 |
| Home / End | 첫·마지막 탭 |
| Enter / Space | 현재 탭 활성화 |
---
## 스타일 변형
| 클래스 | 설명 |
|--------|------|
| `.tab-box` | 기본 (박스형 탭) · ≤640px 가로 스크롤 |
| `.tab-box.tab-line` | 하단 라인형 |
| `.tab-box.tab-scroll` | **탭 다수** — 한 줄 + 가로 스크롤 (PC·모바일) |
CSS 변수: `--tab-border`, `--tab-border-active`, `--tab-bg` 등 (`tab.css` 참고)
### 탭이 많을 때 (반응형)
- **권장:** `.tab-scroll` — 줄바꿈 대신 가로 스크롤. 키보드 ←→ 유지, 선택 탭은 `scrollIntoView`로 보이게 처리
- **비권장:** 탭을 `