Svelte · 23 스타일 범위와 접근성
단계: Canvas 검증과 프레임워크 비교 · 외부 실행 예제 · 미리보기 안내 · 저장 ID: svelte-step-23
목표와 학습 후 역량
- 마우스 없이 완료 상태를 바꾼다.
- 포커스 위치를 화면에서 구분할 수 있다.
선수 지식
23단위는 22단위 결과물과 실험 기록을 이어 사용합니다.
핵심 개념과 설명
스타일 범위
Svelte 컴포넌트 스타일은 해당 마크업 범위로 제한됩니다. 전역 규칙을 쓰면 다른 컴포넌트에 미치는 영향을 확인해야 합니다.
키보드 계약
클릭 가능한 항목은 네이티브 버튼으로 표현합니다. 컴파일러 접근성 경고는 실제 키보드 확인과 함께 읽습니다.
실습 준비
예제 화면의 실행 범위 안내를 먼저 확인하세요. 다음은 과제를 별도 프로젝트로 확장할 때의 준비 환경입니다. 별도 Svelte 5 Vite 프로젝트에서 .svelte 파일을 컴파일해 실행합니다. 패키지 버전과 lockfile을 기록하세요. Frontory의 Svelte 미리보기는 실제 writable와 명시적 DOM 어댑터이며 .svelte 컴파일러나 runes 실행기가 아닙니다.
연결된 예제는 출발점입니다. 아래 과제 전체가 완성된 코드는 아니며, 예제의 지원 범위를 넘는 작업은 별도 프로젝트에서 수행하세요.
실습 과제
- src/Card.svelte의 클릭 div를 button으로 바꾸고 aria-pressed를 연결하세요.
- 포커스 스타일을 컴포넌트 CSS에 추가하세요.
- Tab·Enter·Space로 카드 선택과 완료 토글을 수행하고 경고 출력을 검토하세요.
관찰할 변수
| 변수 | 기준 조건 | 바꿀 조건 | 예상할 변화·검증 가설 |
|---|---|---|---|
| 조작 요소 | 클릭 div | button | 키보드 기본 조작과 포커스를 사용할 수 있다. |
표의 예상은 측정 결과가 아닙니다. 한 번에 한 조건만 바꾸고 실제 결과가 다르면 원인을 기록하세요.
완료 조건
- 마우스 없이 완료 상태를 바꾼다.
- 포커스 위치를 화면에서 구분할 수 있다.
자가 점검
- 경고를 무시하는 주석보다 먼저 무엇을 확인하나요?
- 색상만으로 선택을 표현하면 누가 정보를 놓칠 수 있나요?
공식 참고
연결된 예제와 실행 범위
미리보기는 Svelte writable/DOM 계약 실험입니다. runes·snippet·컴파일 결과는 실제 App.svelte를 Svelte 5 프로젝트에서 실행하세요.
원본 코드·기록은 자동으로 덮어쓰지 않습니다. 기존 예제를 초기화할 때도 필기는 유지됩니다.
다음 학습
이전: Canvas 루프와 반응성 분리 · 다음: 전환 중 수명 확인