@infomind-ux/infoux-mcp 0.1.0

package/data/snippets/form.md

@@ -0,0 +1,68 @@
+# 폼 필드 (Form Field) — KRDS
+
+KRDS 입력폼 구성: **레이블 → 보조설명 → 입력박스 → 시스템메시지** (요소 간 8px gap)
+
+## 기본 마크업 (텍스트 입력)
+
+```html
+<div class="form-field">
+  <label for="name" class="form-field__label">
+    이름<span class="form-field__required" aria-label="필수">*</span>
+  </label>
+  <p class="form-field__hint">사업자등록증에 기재된 대표자명</p>
+  <input type="text" id="name" class="input" placeholder="홍길동" required>
+  <p class="form-field__message">최대 20자까지 입력 가능합니다</p>
+</div>
+```
+
+## 에러 상태
+
+```html
+<div class="form-field">
+  <label for="email" class="form-field__label">이메일</label>
+  <input type="email" id="email" class="input input--error" aria-invalid="true" aria-describedby="email-error" value="invalid">
+  <p id="email-error" class="form-field__message form-field__message--error">올바른 이메일 형식이 아닙니다</p>
+</div>
+```
+
+## Textarea
+
+```html
+<div class="form-field">
+  <label for="memo" class="form-field__label">메모</label>
+  <textarea id="memo" class="textarea" rows="4" placeholder="내용을 입력하세요"></textarea>
+</div>
+```
+
+## Input 사이즈
+
+| Size | 클래스 | 높이 |
+|------|--------|------|
+| small | `.input--small` | 40px |
+| medium | (기본) | 48px |
+| large | `.input--large` | 56px |
+
+## Input type
+
+`type="text|email|password|number|tel|url|search|date|time|datetime-local"` 모두 동일 스타일 적용.
+
+## 상태
+
+- 기본 — `border: 1px solid var(--color-input-border)`
+- focus — `border-color: var(--color-input-border-active)` (primary)
+- disabled — 회색 배경 + disabled 텍스트, `cursor: not-allowed`
+- read-only — `:read-only`로 자동 처리
+- error — `.input--error` 또는 `aria-invalid="true"`
+
+## 접근성
+
+- `<label for="id">` + `<input id="id">` 연결 필수
+- 필수 항목은 `required` 속성 + 시각 표시(`*`)
+- 에러는 `aria-invalid="true"` + `aria-describedby="에러메시지id"`
+- 보조설명은 `aria-describedby`로 연결 권장
+- placeholder만으로 레이블 대체 금지
+
+## 출처
+
+- KRDS 입력 명세: https://www.krds.go.kr/html/site/component/component_summary.html
+- CSS: `src/styles/6-components/form.css`

package/data/snippets/header.md

@@ -0,0 +1,56 @@
+# 사이트 헤더 (Site Header)
+
+사이트 유형과 무관하게 사용할 수 있는 공통 헤더 패턴. 브랜드 + 주 메뉴 + 액션 영역을 기본으로 하며, 공식 배너·정부 상징·운영기관 식별자는 공공서비스/공공기관에서 적용 대상이 확인된 경우에만 별도 추가한다.
+
+## 기본 마크업
+
+```html
+<header id="header" class="site-header">
+  <div class="container site-header__inner">
+    <a class="site-header__brand" href="/">
+      <img src="/logo.svg" alt="기관명">
+      <span class="site-header__brand-name">기관명</span>
+    </a>
+
+    <nav class="site-header__nav" aria-label="주 메뉴">
+      <ul class="site-header__menu">
+        <li><a href="/about">소개</a></li>
+        <li><a href="/services" aria-current="page">서비스</a></li>
+        <li><a href="/notice">공지</a></li>
+      </ul>
+    </nav>
+
+    <div class="site-header__actions">
+      <button type="button" class="btn btn--text btn--small">로그인</button>
+      <button type="button" class="site-header__toggle" aria-label="메뉴 열기" aria-expanded="false">☰</button>
+    </div>
+  </div>
+</header>
+```
+
+## 동작
+
+- 모바일/태블릿 (< 1280px): 주 메뉴 숨김 + 햄버거 토글 노출
+- PC (≥ 1280px): 주 메뉴 노출 + 햄버거 숨김
+- `position: sticky` 적용 (스크롤 시에도 상단 유지)
+
+## 접근성
+
+- `<header id="header">` 시맨틱 태그 사용 (페이지당 하나)
+- 주 메뉴는 `<nav aria-label="주 메뉴">` (페이지에 nav가 여러 개면 label 필수)
+- 현재 페이지 메뉴: `aria-current="page"`
+- 모바일 토글: `aria-label="메뉴 열기/닫기"` + `aria-expanded` 상태 토글
+- 로고 `<img>` `alt` 텍스트 필수 (KRDS R-09)
+
+## 조건부 공공/정부 요소
+
+아래 요소는 모든 사이트의 기본값이 아니다.
+
+- 공식 배너: 공공서비스 중 정부 상징 사용이 명시되었거나 과업에서 요구된 경우만 생성
+- 정부 상징 로고: 정부 상징 사용 대상 서비스에서만 생성
+- 운영기관 식별자: 상위 운영기관 표시가 과업에 포함된 경우만 생성
+- 일반사이트, CMS·관리자, 커머스·예약에서는 위 항목을 생성하지 않고 체크리스트에서 N/A 처리
+
+## 출처
+
+- CSS: `src/styles/6-components/header.css`

package/data/snippets/list.md

@@ -0,0 +1,64 @@
+# 목록 (List) — KRDS Text list / Structured list
+
+두 가지 변형 — 텍스트 목록과 구조화 목록(정의 목록).
+
+## 기본 마크업
+
+### 텍스트 목록 (List — Text)
+
+```html
+<!-- 글머리표 -->
+<ul class="list--text">
+  <li>첫 번째 항목</li>
+  <li>두 번째 항목
+    <ul>
+      <li>중첩 항목</li>
+    </ul>
+  </li>
+</ul>
+
+<!-- 번호 -->
+<ol class="list--text list--ordered">
+  <li>1단계</li>
+  <li>2단계</li>
+</ol>
+```
+
+### 구조화 목록 (List — Structured / Definition)
+
+KRDS 정의 목록 패턴. 라벨 + 값 쌍 (예: 사양, 상세 정보).
+
+```html
+<dl class="list--structured">
+  <div class="list__row">
+    <dt>제품명</dt>
+    <dd>예시 제품</dd>
+  </div>
+  <div class="list__row">
+    <dt>출시일</dt>
+    <dd>2026년 4월 30일</dd>
+  </div>
+  <div class="list__row">
+    <dt>가격</dt>
+    <dd>10,000원</dd>
+  </div>
+</dl>
+```
+
+## 시맨틱 구조
+
+- **Root 태그**: `<ul>` (순서 무관) / `<ol>` (순서 의미) / `<dl>` (정의 목록)
+- **자식**: `<li>` (ul/ol) 또는 `<dt>` + `<dd>` (dl)
+- **변형 클래스**: `.list--text` · `.list--ordered` · `.list--structured`
+- **필수 ARIA**: — (시맨틱 태그만으로 충분)
+- 상세: `skill/references/html-semantics.md#list`
+
+## 접근성
+
+- 순서 의미 — `<ol>` (있음) / `<ul>` (없음)
+- 정의 목록 — `<dl>/<dt>/<dd>` 시맨틱 사용
+- 모바일에선 정의 목록이 자동으로 1열로 변환
+
+## 출처
+
+- CSS: `src/styles/6-components/list.css`

package/data/snippets/main-menu.md

@@ -0,0 +1,49 @@
+# 주 메뉴 (Main Menu) — KRDS
+
+드롭다운형 주 내비게이션. 헤더 안에서 사용.
+
+## 기본 마크업
+
+```html
+<nav class="main-menu" aria-label="주 메뉴">
+  <ul class="main-menu__list">
+    <li class="main-menu__item">
+      <a class="main-menu__link" href="/about">소개</a>
+    </li>
+
+    <li class="main-menu__item">
+      <button type="button" class="main-menu__link" aria-haspopup="true" aria-expanded="false" aria-controls="submenu-services">
+        서비스
+      </button>
+      <ul id="submenu-services" class="main-menu__submenu" hidden>
+        <li><a href="/services/a">서비스 A</a></li>
+        <li><a href="/services/b">서비스 B</a></li>
+        <li><a href="/services/c" aria-current="page">서비스 C</a></li>
+      </ul>
+    </li>
+
+    <li class="main-menu__item">
+      <a class="main-menu__link" href="/contact">문의</a>
+    </li>
+  </ul>
+</nav>
+```
+
+## 동작 (JS)
+
+- 드롭다운 토글: `aria-haspopup` 가진 `<button>` 클릭 → 해당 `aria-controls` 서브메뉴 hidden 토글 + `aria-expanded` 토글
+- 외부 클릭 시 닫기
+- ESC 키로 닫기 + 트리거 버튼으로 포커스 복귀
+- 키보드: 화살표로 항목 이동, Enter/Space로 선택
+
+## 접근성
+
+- 서브메뉴 트리거는 `<button>` 권장 (`<a>` 아님 — 링크가 아니므로)
+- `aria-haspopup="true"` + `aria-expanded` 상태값
+- `aria-controls`로 서브메뉴 id 연결
+- 서브메뉴 `<ul>`은 `hidden` 속성으로 노출 제어
+- 현재 페이지: `aria-current="page"`
+
+## 출처
+
+- CSS: `src/styles/6-components/main-menu.css`

package/data/snippets/modal.md

@@ -0,0 +1,54 @@
+# 모달 (Modal / Dialog) — KRDS
+
+## 기본 마크업
+
+```html
+<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
+  <div class="modal__overlay"></div>
+  <div class="modal__content modal__content--medium">
+    <header class="modal__header">
+      <h2 id="modal-title" class="modal__title">제목</h2>
+      <button type="button" class="modal__close" aria-label="닫기">×</button>
+    </header>
+    <div class="modal__body">
+      <p>모달 본문 내용</p>
+    </div>
+    <footer class="modal__footer">
+      <button type="button" class="btn btn--tertiary">취소</button>
+      <button type="button" class="btn btn--primary">확인</button>
+    </footer>
+  </div>
+</div>
+```
+
+## 사이즈
+
+| 사이즈 | 클래스 | max-width |
+|--------|--------|-----------|
+| small | `.modal__content--small` | 400px |
+| medium | (기본) | 560px |
+| large | `.modal__content--large` | 800px |
+| xlarge | `.modal__content--xlarge` | 1000px |
+
+## 동작 (JS — 별도 구현)
+
+- 열기: `modal.removeAttribute('hidden')` + 포커스를 모달 내부 첫 요소로 이동
+- 닫기: `modal.setAttribute('hidden', '')` + 포커스를 트리거 버튼으로 복귀
+- ESC 키 닫기, overlay 클릭 닫기, Tab 트랩 (포커스 가두기)
+- 열려 있는 동안 `<body>`에 `overflow: hidden` 적용
+
+## 접근성 (KRDS + WAI-ARIA)
+
+- `role="dialog"` + `aria-modal="true"` 필수
+- `aria-labelledby="제목id"`로 모달 제목 연결 (또는 `aria-label`)
+- 본문 설명이 길면 `aria-describedby`도 추가
+- 닫기 버튼은 `aria-label="닫기"` 필수
+- 첫 포커스는 모달 내부 첫 인터랙티브 요소 (또는 닫기 버튼)
+- ESC 키로 닫기 가능
+- 백드롭은 `--color-bg-dim`
+
+## 출처
+
+- Shape 값은 프로젝트 밀도에 맞는 CSS/Tailwind 직접값 사용
+- Shadow: `--shadow-3` (KRDS modal-wrap-shadow 추상화)
+- CSS: `src/styles/6-components/modal.css`

package/data/snippets/pagination.md

@@ -0,0 +1,41 @@
+# 페이지네이션 (Pagination) — KRDS
+
+목록을 여러 페이지로 나눠 탐색.
+
+## 기본 마크업
+
+```html
+<nav class="pagination" aria-label="페이지 내비게이션">
+  <button type="button" class="pagination__nav" aria-label="이전 페이지">‹</button>
+  <ol class="pagination__list">
+    <li><a class="pagination__item" href="?p=1">1</a></li>
+    <li><a class="pagination__item pagination__item--current" href="?p=2" aria-current="page">2</a></li>
+    <li><a class="pagination__item" href="?p=3">3</a></li>
+    <li><a class="pagination__item" href="?p=4">4</a></li>
+    <li><a class="pagination__item" href="?p=5">5</a></li>
+  </ol>
+  <button type="button" class="pagination__nav" aria-label="다음 페이지">›</button>
+</nav>
+```
+
+## 사이즈
+
+- `.pagination` — 48px (기본)
+- `.pagination--small` — 40px
+
+## 비활성 (첫/마지막 페이지)
+
+```html
+<button class="pagination__nav" aria-label="이전 페이지" aria-disabled="true" disabled>‹</button>
+```
+
+## 접근성
+
+- `<nav aria-label="페이지 내비게이션">` 필수
+- 현재 페이지: `aria-current="page"`
+- 이전/다음 버튼: `aria-label="이전 페이지"` / `aria-label="다음 페이지"` 필수
+- `aria-disabled="true"` + `disabled` 같이 사용 (첫/마지막 페이지)
+
+## 출처
+
+- CSS: `src/styles/6-components/pagination.css`

package/data/snippets/progress.md

@@ -0,0 +1,30 @@
+# 진행률 (Progress) — KRDS
+
+native `<progress>` + 시각 커스텀.
+
+## 기본 마크업
+
+```html
+<div class="progress">
+  <div class="progress__label">
+    <span>업로드 중</span>
+    <span>60%</span>
+  </div>
+  <progress class="progress__bar" value="60" max="100" aria-label="업로드 진행률 60%">60%</progress>
+</div>
+```
+
+## Variant
+
+- 기본 (primary)
+- `.progress--success` / `.progress--warning` / `.progress--danger`
+
+## 접근성
+
+- native `<progress>` 사용 — 자동 ARIA 처리
+- `aria-label` 또는 `aria-labelledby`로 진행 항목 명시
+- 무한 로딩(불확정 시간)은 `<progress>` 대신 `.spinner` 사용
+
+## 출처
+
+- CSS: `src/styles/6-components/progress.css`

package/data/snippets/select.md

@@ -0,0 +1,34 @@
+# 셀렉트 (Select) — KRDS
+
+native `<select>` 기반. input과 동일 사이즈/패딩 토큰.
+
+## 기본 마크업
+
+```html
+<div class="form-field">
+  <label for="category" class="form-field__label">카테고리</label>
+  <select id="category" class="select">
+    <option value="">선택하세요</option>
+    <option value="a">옵션 A</option>
+    <option value="b">옵션 B</option>
+  </select>
+</div>
+```
+
+## 사이즈
+
+- `.select--small` (40px) / 기본 medium (48px) / `.select--large` (56px)
+
+## 상태
+
+- 기본 / hover / focus / disabled / error (`.select--error` 또는 `aria-invalid="true"`)
+
+## 접근성
+
+- 첫 옵션은 `<option value="">선택하세요</option>` 같은 placeholder 권장
+- `<label for>` + `<select id>` 연결 필수
+- 옵션 텍스트는 명확하고 간결하게
+
+## 출처
+
+- CSS: `src/styles/6-components/select.css`

package/data/snippets/side-panel.md

@@ -0,0 +1,57 @@
+# 사이드 패널 (Side Panel) — KRDS Help panel 응용
+
+우측에서 슬라이드 인하는 보조 패널. 모달과 달리 본문 스크롤을 차단하지 않는다.
+
+## 기본 마크업
+
+```html
+<aside class="side-panel" role="dialog" aria-labelledby="panel-title" aria-hidden="true">
+  <header class="side-panel__header">
+    <h2 id="panel-title" class="side-panel__title">상세 정보</h2>
+    <button type="button" class="side-panel__close" aria-label="닫기">×</button>
+  </header>
+  <div class="side-panel__body">
+    <p>패널 본문 내용</p>
+  </div>
+  <footer class="side-panel__footer">
+    <button type="button" class="btn btn--tertiary">닫기</button>
+    <button type="button" class="btn btn--primary">저장</button>
+  </footer>
+</aside>
+```
+
+## 사이즈
+
+| 사이즈 | 클래스 | max-width |
+|--------|--------|-----------|
+| small | `.side-panel--small` | 360px |
+| medium | (기본) | 480px |
+| large | `.side-panel--large` | 640px |
+
+## 동작 (JS)
+
+- 열기: `panel.setAttribute('aria-hidden', 'false')` (또는 `.side-panel--open` 추가)
+- 닫기: `panel.setAttribute('aria-hidden', 'true')`
+- transform 트랜지션으로 슬라이드 인/아웃
+
+## Modal vs Side Panel
+
+| | Modal | Side Panel |
+|---|-------|-----------|
+| 위치 | 화면 중앙 | 화면 우측 (또는 좌측) |
+| 본문 차단 | 차단 (overlay) | 차단 안 함 |
+| 용도 | 결정 강제 (확인/취소) | 보조 정보, 편집 폼 |
+| 그림자 | shadow-3 (deep) | shadow-2 (medium) |
+
+## 접근성
+
+- `role="dialog"` + `aria-labelledby`
+- 닫기 버튼 `aria-label="닫기"` 필수
+- ESC 키 닫기 권장
+- 포커스 트랩은 선택 (모달과 달리 본문 인터랙션 허용)
+- `aria-hidden` 토글로 스크린리더 노출 제어
+
+## 출처
+
+- Shadow: `--shadow-2` (KRDS help-panel-shadow 추상화)
+- CSS: `src/styles/6-components/side-panel.css`

package/data/snippets/spinner.md

@@ -0,0 +1,24 @@
+# 스피너 (Spinner) — KRDS
+
+로딩 표시기. 진행 시간을 알 수 없을 때 사용.
+
+## 기본 마크업
+
+```html
+<span class="spinner" role="status" aria-label="로딩 중"></span>
+```
+
+## 사이즈
+
+- `.spinner--small` (16×16)
+- 기본 (24×24)
+- `.spinner--large` (40×40)
+
+## 접근성
+
+- `role="status"` + `aria-label="로딩 중"` 필수
+- `prefers-reduced-motion: reduce` 자동 대응 (회전 속도 절반으로)
+
+## 출처
+
+- CSS: `src/styles/6-components/spinner.css`

package/data/snippets/step-indicator.md

@@ -0,0 +1,38 @@
+# 단계 표시기 (Step Indicator) — KRDS
+
+다단계 폼/프로세스의 현재 단계 표시.
+
+## 기본 마크업
+
+```html
+<ol class="step-indicator" aria-label="진행 단계">
+  <li class="step-indicator__item step-indicator__item--done">
+    <span class="step-indicator__num" aria-hidden="true">1</span>
+    <span class="step-indicator__label">정보 입력</span>
+  </li>
+  <li class="step-indicator__item step-indicator__item--current" aria-current="step">
+    <span class="step-indicator__num" aria-hidden="true">2</span>
+    <span class="step-indicator__label">확인</span>
+  </li>
+  <li class="step-indicator__item">
+    <span class="step-indicator__num" aria-hidden="true">3</span>
+    <span class="step-indicator__label">완료</span>
+  </li>
+</ol>
+```
+
+## 상태 클래스
+
+- `.step-indicator__item--done` — 완료 (primary 채움)
+- `.step-indicator__item--current` — 현재 (primary 테두리)
+- (없음) — 예정 (회색)
+
+## 접근성
+
+- `<ol>` 사용 — 순서 의미 보존
+- 현재 단계: `aria-current="step"`
+- 번호는 시각만 — `aria-hidden="true"` (레이블이 텍스트로 의미 전달)
+
+## 출처
+
+- CSS: `src/styles/6-components/step-indicator.css`

package/data/snippets/switch.md

@@ -0,0 +1,32 @@
+# 토글 스위치 (Switch) — KRDS
+
+## 기본 마크업
+
+```html
+<label class="switch">
+  <input type="checkbox" name="notify" role="switch">
+  <span class="switch__track" aria-hidden="true"></span>
+  <span class="switch__label">알림 받기</span>
+</label>
+```
+
+## 사양
+
+- 트랙: 44×24, 핸들: 20×20
+- 컨테이너 최소 높이: `--touch-target-min` (44px)
+- ON/OFF 즉시 반영되는 설정에 사용 (저장 버튼 없이 즉시 토글)
+
+## 체크박스 vs 스위치 사용 기준
+
+- **체크박스**: 옵션 선택, 동의(약관), 폼 제출과 함께 저장
+- **스위치**: 즉시 효과 발생하는 ON/OFF 설정 (알림 ON/OFF, 다크모드 등)
+
+## 접근성
+
+- `role="switch"` 권장 — 스크린리더가 "스위치"로 안내
+- 시각 트랙(`__track`)은 `aria-hidden="true"`
+- 상태 변경은 native `:checked`만으로 충분 (별도 aria-checked 불필요)
+
+## 출처
+
+- CSS: `src/styles/6-components/switch.css`

package/data/snippets/tab.md

@@ -0,0 +1,52 @@
+# 탭 (Tab) — KRDS
+
+## 기본 마크업 (WAI-ARIA tabs pattern)
+
+```html
+<div class="tab">
+  <div class="tab__list" role="tablist" aria-label="섹션">
+    <button class="tab__item" role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
+      개요
+    </button>
+    <button class="tab__item" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">
+      상세
+    </button>
+    <button class="tab__item" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">
+      후기
+    </button>
+  </div>
+  <div class="tab__panel" role="tabpanel" id="panel-1" aria-labelledby="tab-1">
+    개요 내용
+  </div>
+  <div class="tab__panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
+    상세 내용
+  </div>
+  <div class="tab__panel" role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
+    후기 내용
+  </div>
+</div>
+```
+
+## 사이즈
+
+- `.tab__list--small` (40px height) — 보조 컨텍스트
+- 기본 (48px) — 표준
+- `.tab__list--large` (56px height) — 강조
+
+## 동작 (JS — 별도 구현)
+
+- 탭 클릭 → 모든 `aria-selected="false"` + 클릭한 탭만 `aria-selected="true"`
+- 모든 패널 `hidden` + 활성 탭의 `aria-controls` 패널만 `hidden` 제거
+- 키보드 — 좌/우 화살표로 탭 이동, Home/End로 처음/마지막
+- 비활성 탭은 `tabindex="-1"`로 Tab 키에서 제외 (활성 탭만 `tabindex` 없음)
+
+## 접근성 (KRDS + WAI-ARIA)
+
+- `role="tablist"` + 각 탭에 `role="tab"`, 패널에 `role="tabpanel"`
+- 탭 ↔ 패널 연결: `aria-controls` (탭 → 패널 id), `aria-labelledby` (패널 → 탭 id)
+- 활성 표시는 `aria-selected="true"` (시각 인디케이터는 CSS가 자동 처리)
+- `aria-label` 또는 `aria-labelledby`로 탭 그룹의 목적 명시 권장
+
+## 출처
+
+- CSS: `src/styles/6-components/tab.css`

package/data/snippets/table.md

@@ -0,0 +1,63 @@
+# 표 (Table) — KRDS
+
+데이터 표. 모바일에서는 가로 스크롤 컨테이너로 감싸서 사용.
+
+## 기본 마크업
+
+```html
+<div class="table-wrap">
+  <table class="table">
+    <caption class="table__caption">2026년 1분기 신청 현황</caption>
+    <thead>
+      <tr>
+        <th scope="col">번호</th>
+        <th scope="col">신청자</th>
+        <th scope="col">신청일</th>
+        <th scope="col">상태</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>1</td>
+        <td>홍길동</td>
+        <td>2026-04-01</td>
+        <td><span class="tag tag--success">완료</span></td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+```
+
+## Variant
+
+- 기본
+- `.table--hover` — 행 호버 강조
+- `.table--striped` — 줄무늬 (짝수 행 회색)
+- `.table--compact` — 좁은 패딩 (8px 12px)
+- `.table--comfortable` — 넓은 패딩 (20px)
+
+## 정렬 가능한 헤더
+
+```html
+<th scope="col" aria-sort="ascending">
+  <button type="button">신청일</button>
+</th>
+```
+
+## 선택된 행
+
+```html
+<tr aria-selected="true">...</tr>
+```
+
+## 접근성
+
+- `<th scope="col">` 또는 `scope="row">` 필수
+- `<caption>`으로 표 제목 명시
+- 정렬 헤더는 `aria-sort="ascending|descending|none"`
+- 선택 행은 `aria-selected="true"`
+- 모바일 가로 스크롤은 `<div class="table-wrap">` 래퍼로 감싸기
+
+## 출처
+
+- CSS: `src/styles/6-components/table.css`