다양한 크기와 애니메이션 스타일의 모달을 확인할 수 있습니다.
이것은 작은 크기의 모달입니다. 간단한 확인 메시지나 알림을 표시하는 데 적합합니다.
ESC 키를 누르거나 배경을 클릭하면 모달이 닫힙니다.
Medium 크기의 모달은 가장 일반적으로 사용되는 크기입니다.
폼이나 상세 정보를 표시하기에 적합한 크기입니다.
콘텐츠가 길어지면 스크롤이 자동으로 활성화됩니다.
Large 크기의 모달은 더 많은 콘텐츠를 표시할 수 있습니다.
복잡한 폼이나 여러 섹션이 있는 콘텐츠에 적합합니다.
최대 너비는 640px로 제한되어 있어 가독성을 유지합니다.
모달은 viewport 높이의 대부분을 차지하지만, 위아래에 여백을 유지합니다.
XL 크기의 모달은 최대 800px 너비를 가집니다.
데이터 테이블, 갤러리, 또는 복잡한 대시보드를 표시하는 데 적합합니다.
넓은 화면에서 최적의 경험을 제공합니다.
Full Width 모달은 화면 너비의 대부분을 차지합니다.
이미지 편집기, 비디오 플레이어, 또는 전체 화면이 필요한 콘텐츠에 적합합니다.
좌우로 24px의 여백만 유지합니다.
이 모달은 아래에서 위로 슬라이드되어 나타납니다.
모바일에서 자주 사용되는 바텀 시트 패턴입니다.
터치 인터페이스에서 직관적인 경험을 제공합니다.
이 패널은 오른쪽에서 슬라이드되어 나타납니다.
사이드바 메뉴, 설정 패널, 또는 추가 정보를 표시하는 데 적합합니다.
메인 콘텐츠를 가리지 않고 부가 정보를 제공할 때 유용합니다.
전체 높이를 차지하며, 스크롤 가능합니다.
이 모달은 많은 콘텐츠를 포함하고 있어 스크롤이 필요합니다.
헤더와 푸터는 고정되어 있고, 본문만 스크롤됩니다.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.
Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
이것은 스크롤 동작을 확인하기 위한 마지막 단락입니다.