AspectRatio
비디오, 지도 등을 임베드할 때 종횡비를 유지하는 컴포넌트
개요
설치
사용법
AspectRatio와 Image를 import하여 사용합니다. ratio prop으로 종횡비를 설정합니다.
예제
이미지 종횡비 유지
이미지가 부모 컨테이너에 맞춰 종횡비를 유지합니다.
지도 임베드
Google Maps 등 iframe 콘텐츠를 16:9 비율로 표시합니다.
반응형 비율
브레이크포인트별로 다른 종횡비를 적용할 수 있습니다.
화면 크기를 조절해 비율 변화를 확인하세요
Base: 1:1, MD: 16:9, LG: 21:9
접근성
WCAG 2.1 / KWCAG 2.2 AA 기준을 준수합니다.
- 시맨틱 마크업: AspectRatio는 의미론적으로 중립적인
<div>래퍼를 사용합니다. 내부 콘텐츠에 적절한 시맨틱 태그 사용 권장 - 임베드 콘텐츠: iframe, video 등을 사용할 때는 적절한
title속성을 제공하여 스크린 리더 사용자에게 콘텐츠를 설명 - 이미지 대체 텍스트: AspectRatio 내부의 이미지는 반드시
alt속성을 포함해야 합니다 - 반응형 비율: 반응형 비율 사용 시 모든 브레이크포인트에서 콘텐츠가 적절히 표시되는지 확인