# 슬라이드 (Swiper)

| 항목 | 경로 |
|------|------|
| 데모 | `slide.html` |
| CSS | `css/slide.css` + Swiper CDN CSS |
| JS | Swiper CDN + 페이지 초기화 |
| CDN | `https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css` / `.js` |

---

## 구분

| 클래스 | 용도 |
|--------|------|
| `.slide-visual` | 메인 비주얼 (히어로) |
| `.slide-notice` | 메인 알림 한 줄 롤링 |
| `.slide-banner` | 하단·관련 배너 (복수 노출) |

---

## CDN 연결

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
```

---

## 접근성 필수

1. **자동재생이 있으면 일시정지/재생 버튼** (`aria-pressed`, `aria-controls`)
2. **이전/다음**에 `aria-label` (예: 이전 슬라이드)
3. **keyboard: { enabled: true }**
4. **a11y** 모듈 + 한글 메시지 + **`scrollOnFocus: false`**
5. **`prefers-reduced-motion: reduce`** 이면 autoplay OFF
6. 포커스·마우스 오버 시 자동재생 일시정지 (`pauseOnMouseEnter`)
7. 이미지: 의미 있으면 `alt`, 장식이면 `alt=""` + 텍스트로 정보 제공
8. **Tab 함정 방지**: 보이는 슬라이드만 포커스 (`inert` / `tabindex="-1"`). 링크 많은 배너는 `loop` 대신 `rewind`

### 메인 비주얼 3유형 · 반응형

| 유형 | 클래스 | 접근성 | 반응형 권장 |
|------|--------|--------|-------------|
| 텍스트만 | `.type-text` | 배경 장식 숨김, 정보는 제목·링크 | 동일 마크업, 타이포·여백만 조정 |
| 이미지만 | `.type-image` | `<img>`+의미 있는 `alt`(링크면 목적 포함). CSS background 금지 | PC 가로·모바일 세로면 **`<picture>` 분리** (`visual_only.svg` / `visual_only_m.svg`). `alt`는 동일 |
| 이미지+텍스트 | `.type-media-text` | 텍스트가 정보면 이미지 `alt=""`. 오버레이 대비(스크림) | PC/모바일 구도 다르면 **`<picture>`** (`visual_bg.svg` / `visual_bg_m.svg`). 모바일도 오버레이 유지, 비율·타이포·스크림만 조정 |
| 풀와이드 | `.slide-visual.is-full` | 유형 A/B/C 접근성 규칙 동일 | `#contents` 안에서도 `100vw`. **PC는 이미지 원본 비율(`width:100%; height:auto`)** 로 상하·좌우 크롭 없음. 모바일 4:5 + `*_m` 이미지 |

```js
a11y: {
  enabled: true,
  scrollOnFocus: false,
  prevSlideMessage: '이전 슬라이드',
  nextSlideMessage: '다음 슬라이드',
  paginationBulletMessage: '{{index}}번 슬라이드로 이동',
  slideLabelMessage: '총 {{slidesLength}}장 중 {{index}}장'
}
```

---

## 초기화 요약

- 비주얼: `loop` + `pagination` + `navigation` + `autoplay`
  - 이미지만: `img/visual_only.svg`, `img/visual_only_m.svg`
  - 이미지+텍스트: `img/visual_bg.svg`, `img/visual_bg_m.svg`
- 알림: `direction: 'vertical'` + `navigation` + `autoplay`
- 하단: `rewind`(loop 대신) + `slidesPerView` + **이미지 배너**(`img/banner_0*.svg`) + `alt`에 링크 목적

상세 마크업·옵션은 `slide.html`을 복사하세요.

---

## 체크리스트

- [ ] 자동재생 정지 버튼 동작
- [ ] Tab으로 보이는 배너만 거친 뒤 이전/다음·불릿·자동재생으로 이동 (무한 Tab 없음)
- [ ] 이미지만: `alt`에 링크 목적 / 이미지+텍스트: 장식 `alt=""` + 화면 텍스트
- [ ] 모바일에서도 이미지+텍스트 오버레이·정보·링크 유지 (비율·스크림만 조정)
- [ ] 스크린리더용 한글 안내(a11y)
- [ ] 동작 줄이기 설정에서 자동재생 중지
- [ ] 링크/버튼 `:focus-visible` 확인