• 홈
  • 슬라이드

공통 접근성 포인트

CDN: Swiper 11 bundle · 모듈: a11y, keyboard, pagination, navigation, autoplay

* 자동 전환이 있으면 일시정지/재생 버튼을 제공합니다.

* 이미지에는 의미 있는 alt (장식이면 alt="" + 텍스트로 정보 제공).

* 포커스·호버 시 자동재생을 잠시 멈춥니다. prefers-reduced-motion이면 자동재생을 끕니다.

* 이전/다음·페이지네이션은 키보드로 조작 가능해야 합니다.

* Tab은 현재 보이는 슬라이드 링크만 거친 뒤 컨트롤로 이동합니다. (scrollOnFocus: false · 숨김 슬라이드 inert)

* 링크가 많은 배너는 loop 대신 rewind를 권장합니다. (복제 슬라이드로 Tab이 무한 순환하는 문제 방지)

1. 메인 비주얼 (.slide-visual)

3유형: 텍스트만 · 이미지만 · 이미지(배경)+텍스트 · 슬라이드 밖 하단 중앙 컨트롤 (상세는 HTML 숨은참조 주석 · docs/slide.md)

모두를 위한 웹 서비스

정보는 텍스트·링크로 제공합니다. 배경 그라데이션은 장식이므로 숨깁니다.

자세히 보기

대체 텍스트와 링크 목적

배경 사진은 장식이고, 제목·설명·링크로 동일 정보를 제공합니다. 모바일에서는 비율·여백·스크림만 조정합니다.

자료실 바로가기

자동재생 중

1-2. 메인 비주얼 풀와이드 (.slide-visual.is-full)

콘텐츠 폭을 벗어나 브라우저 가로 전체 · 상세는 HTML 숨은참조 주석

브라우저 가로 전체 비주얼

콘텐츠 영역(max-width)을 넘어 뷰포트 폭에 맞춥니다. 텍스트 줄길이는 패딩·max-width로 읽기 쉽게 유지합니다.

자세히 보기

자동재생 중

2. 메인 알림용 배너 (.slide-notice)

공지 한 줄 롤링 · 세로 전환 · 컨트롤은 슬라이드 아래(건수 / 이전 / 정지·재생 / 다음)

링크 텍스트만으로 알림 내용을 파악할 수 있어야 합니다.

3. 하단 배너용 (.slide-banner)

관련 사이트·배너 이미지 · slidesPerView · 컨트롤은 아래 중앙(페이지네이션 → 이전 / 재생 / 다음) · Tab은 보이는 배너만 → 컨트롤로 이동

자동재생 중

이미지 배너 링크는 alt에 링크 목적(기관명·내용)을 담습니다. 장식 이미지만이면 링크에 별도 텍스트를 제공합니다.

TOP