모달 및 대화 상자 스타일 지정

HTML <dialog> 요소는 포커스 가두기, Escape 키로 닫기, showModal() 및 close() 프로그래밍 인터페이스를 비롯한 모달 동작을 기본으로 제공합니다. 사용자 지정 모달 구조를 처음부터 만들지 말고 CSS로 스타일을 지정합니다.

::backdrop 의사 요소는 열린 <dialog> 뒤의 오버레이 스타일을 지정합니다. 반투명한 배경을 적용합니다: dialog::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }. 래퍼 div가 필요하지 않습니다.

CSS로 대화 상자를 가운데에 배치합니다: dialog { margin: auto; max-width: min(90vw, 640px); max-height: 90vh; overflow-y: auto; }. 대화 상자에 margin: auto를 사용하면 JS로 위치를 지정하지 않아도 뷰포트 중앙에 배치됩니다.

긴 콘텐츠를 처리하려면 대화 상자 자체에 overflow-y: auto를 설정합니다. 모달이 열릴 때 body에 overflow: hidden을 설정하여 배경 스크롤을 방지하고, JavaScript로 클래스를 추가하고 제거하여 이 설정을 전환합니다.

JavaScript 없이 CSS만으로 진입 애니메이션을 구현하려면 @starting-style을 사용합니다(크롬 117 이상). 더 폭넓은 지원이 필요하다면 JavaScript로 열림 클래스를 추가하고 변환 및 불투명도에 전환 효과를 적용합니다. 요소가 20px 아래에서 0으로 이동하는 위쪽 슬라이드 효과를 사용할 수 있습니다.

대화 상자 닫기 애니메이션은 까다롭습니다. close()를 호출하면 대화 상자가 즉시 숨겨지기 때문입니다. 해결 방법으로 닫기 애니메이션을 기본 지원하는 팝오버 응용 프로그래밍 인터페이스를 사용하거나, JavaScript로 닫기 동작을 가로채고 종료 애니메이션 클래스를 실행한 다음 애니메이션이 끝난 후 close()를 호출할 수 있습니다.

대화 상자는 다른 모든 페이지 콘텐츠 위에서 열립니다. 대화 상자 요소의 기본 쌓임 맥락을 사용하면 쌓임 순서 충돌을 피할 수 있습니다. 대화 상자는 최상위 레이어에 렌더링되므로 대화 상자 자체에 쌓임 순서 설정을 추가하지 않아도 모든 CSS 쌓임 순서 값보다 위에 표시됩니다.

모바일에서는 대화 상자를 시트처럼 아래에서 위로 미끄러져 올라오게 합니다: dialog { margin: auto auto 0; width: 100%; border-radius: 16px 16px 0 0; max-height: 90vh; }. 데스크톱에서는 margin: auto 패턴을 사용하여 전통적인 모달처럼 가운데에 배치합니다.

기본 제공 대화 상자 요소는 열릴 때 포커스를 내부의 첫 번째 포커스 가능 요소로 자동 이동합니다. 대화 상자 내부의 탭 순서가 논리적으로 이어지도록 합니다. 대화 상자가 닫힐 때 포커스를 트리거 요소로 돌려보내는 닫기 버튼을 추가하여 올바른 키보드 탐색 흐름을 구현합니다.

대화 상자 제목을 가리키는 aria-labelledby와 대화 상자 설명을 가리키는 aria-describedby를 추가합니다. <dialog>에는 대화 상자 역할이 암시적으로 적용됩니다. 화면 낭독기는 포커스가 대화 상자에 들어올 때 이러한 레이블을 알려 줍니다.

확인 대화 상자에는 명확한 질문형 제목, 영향에 대한 간단한 설명, 파괴적 작업 버튼(빨간색, 오른쪽 정렬), 취소 버튼(왼쪽 정렬 또는 보조 버튼)이 필요합니다. 취소 버튼에 autofocus를 사용하여 안전한 선택이 기본 키보드 동작이 되게 합니다.

사용자 지정 div 기반 모달보다 기본 제공 <dialog> 요소를 사용하는 장점은 무엇입니까?

::backdrop, margin: auto를 사용한 가운데 배치, 오버플로 제어, 진입을 위한 CSS 애니메이션, 포커스 관리를 갖춘 기본 제공 대화 상자 요소는 완전히 접근 가능하고 CSS로 구동되는 모달 패턴을 제공합니다. 모바일의 반응형 시트 레이아웃과 올바른 ARIA 속성을 더하면 실제 서비스에 사용할 수 있는 대화 상자 구성 요소가 완성됩니다.