데모 코드 목록

codeslog 블로그 포스트와 연결된 인터랙티브 데모 모음입니다
CSS
스크롤 기반 애니메이션 비교
같은 결과를 Native CSS·IntersectionObserver·rAF 세 가지로 구현해 비교합니다 — 접근성 변형 포함
animation-timeline · IntersectionObserver · prefers-reduced-motion
JavaScript
Promise.all vs Promise.allSettled
API 성공/실패 조합에 따른 두 메서드의 동작 차이를 확인합니다
Promise.all · Promise.allSettled · 비동기
접근성
WCAG 2.2 신규 기준 체험
가려지는 포커스·드래그 대안·타겟 크기·재입력 — 위반과 개선을 나란히 두고 Tab 키로 비교해보세요
2.4.11 · 2.5.7 · 2.5.8 · 3.3.7
접근성
브라우저 신기능 접근성 체험
popover·앵커 포지셔닝·dialog·뷰 트랜지션 — 지원표가 초록불이어도 접근성은 다른 문제라는 걸 Tab 키로 확인하세요
popover · dialog · 앵커 포지셔닝 · 포커스 관리
접근성
폼 접근성 비교
접근성 없는 폼과 접근성 있는 폼을 나란히 비교합니다 — Tab 키와 스크린 리더로 차이를 직접 체험하세요
폼 접근성 · aria-invalid · role=alert · fieldset