HTMLlt;dialog> 요소 사용 방법

프런트엔드 개발에서는 사전 빌드된 UI 구성요소를 빌드하거나 사용하는 것이 일반적인 작업입니다. 그러나 이러한 구성 요소에는 제한 사항이 있는 경우가 많습니다. 일반적으로 특정 프레임워크에 연결되어 있으며 복잡하고 표준화되지 않은 논리가 필요합니다. 오랫동안 대화 상자 창과 같은 기본 UI 구성 요소는 사용자 정의 구현에 의존했거나 더 간단한 경우에는 경고(), 프롬프트() 및 확인()과 같은 내장 JavaScript 메서드에 의존했습니다.

좋은 소식은 이제 기본 를 사용하여 이 구성요소를 구현할 수 있다는 것입니다. HTML5 표준의 일부이며 모든 최신 브라우저에서 완벽하게 지원되는 HTML 요소입니다.

2013년 5월 W3C 작업 초안의 일부로 도입된 HTML 태그는 및 일반적인 UI 문제를 해결합니다. 2014년에 출시된

처음에는 Google Chrome 및 Opera에서만 지원되었습니다.

를 완벽하게 지원합니다. Firefox 및 Safari에서는 2022년 3월에만 출시되어 프로덕션 프로젝트에 채택이 지연되었습니다. 그러나 주요 브라우저에서 2년 넘게 지원을 받으면서

요소는 이제 사용자 정의

를 대체할 수 있을 만큼 안정적입니다.

의 기능을 살펴보겠습니다. 좀 더 자세히.

사용의 핵심 측면

HTML 태그는 팝업 또는 모달 창으로 작동할 수 있는 기본적으로 숨겨진 대화 상자를 만듭니다.

팝업은 쿠키 메시지, 사라지는 토스트 알림, 툴팁 또는 마우스 오른쪽 버튼 클릭 컨텍스트 메뉴 요소와 같은 간단한 알림을 표시하는 데 자주 사용됩니다.

모달 창은 사용자 확인이 필요한 알림 및 경고, 복잡한 대화형 양식, 이미지나 동영상용 라이트박스 등 사용자가 특정 작업에 집중하는 데 도움이 됩니다.

팝업은 페이지와의 상호 작용을 방해하지 않는 반면 모달 창은 문서를 오버레이하고 배경을 어둡게 하며 다른 작업을 차단합니다. 이 동작은 추가 스타일이나 스크립트 없이 작동합니다. 유일한 차이점은 대화 상자를 여는 데 사용되는 방법입니다.

대화창 열기 방법

— 팝업:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— 모달 창:

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

두 경우 모두 태그는 open 속성을 true로 설정합니다. 직접 설정하면 대화 상자가 모달이 아닌 팝업으로 열립니다. 모달 창을 렌더링하려면 적절한 방법을 사용해야 합니다. 처음 열리는 팝업을 생성하는 데에는 JavaScript가 필요하지 않습니다.

<dialog open>Hi, I'm a popup!</dialog>

사용해 보세요:

• .show() 메소드를 사용하여 팝업 열기: https://codepen.io/alexgriss/pen/zYeMKJE
• .showModal() 메서드를 사용하여 모달 창 열기: https://codepen.io/alexgriss/pen/jOdQMeq
• 열기 속성 직접 변경: https://codepen.io/alexgriss/pen/wvNQzRB

대화 상자 창 닫기 접근 방식

대화상자 창은 어떻게 열렸든 상관없이 같은 방식으로 닫힙니다. 팝업 또는 모달 창을 닫는 몇 가지 방법은 다음과 같습니다.

— .close() 메소드 사용:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

— method="dialog" 속성을 사용하여 양식에서 제출 이벤트를 트리거합니다.

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

— Esc 키를 누르면 다음과 같습니다.

Esc로 닫기는 모달 창에서만 작동합니다. 먼저 취소 이벤트를 트리거한 다음 닫아 양식의 저장되지 않은 변경 사항에 대해 사용자에게 쉽게 경고할 수 있습니다.

사용해 보세요:

• close 메서드로 대화 상자 닫기: https://codepen.io/alexgriss/pen/GRzwjaV
• 제출 양식을 통해 대화 상자 닫기: https://codepen.io/alexgriss/pen/jOdQVNV
• Esc 키로 모달 창 닫기: https://codepen.io/alexgriss/pen/KKJrNKW
• Esc로 모달 창이 닫히는 것을 방지하기: https://codepen.io/alexgriss/pen/mdvQObN

종료 시 반환 값

method="dialog" 속성을 사용하여 양식으로 대화 상자를 닫을 때 제출 버튼의 값을 캡처할 수 있습니다. 이는 클릭한 버튼에 따라 다른 작업을 트리거하려는 경우 유용합니다. 값은 returnValue 속성에 저장됩니다.

사용해 보세요: https://codepen.io/alexgriss/pen/ZEwmBKx

작동 방식을 자세히 살펴보세요.

대화상자 창의 메커니즘과 브라우저 구현에 대한 세부정보를 자세히 살펴보겠습니다.

팝업의 메커니즘

열기 .show() 또는 open 속성을 사용하여 팝업으로 DOM에서 position:absolute로 자동 배치합니다. 여백 및 테두리와 같은 기본 CSS 스타일이 요소에 적용되며 창 내부의 첫 번째 포커스 가능한 항목은 자동 초점 속성을 통해 자동으로 포커스를 받습니다. 페이지의 나머지 부분은 대화형으로 유지됩니다.

모달 창의 메커니즘

모달 창은 팝업보다 더 복잡한 방식으로 설계되고 작동합니다.

문서 오버레이

.showModal()을 사용하여 모달 창을 열면

요소는 페이지의 전체 표시 영역을 덮는 특수 HTML 레이어에서 렌더링됩니다. 이 레이어를 최상위 레이어라고 하며 브라우저에 의해 제어됩니다. Google Chrome과 같은 일부 브라우저에서는 각 모달이 이 레이어 내의 별도 DOM 노드에 렌더링되어 요소 검사기에 표시됩니다.

레이어 개념은 사용자를 기준으로 Z축을 따라 요소가 배치되는 방식을 정의하는 스태킹 컨텍스트를 나타냅니다. CSS에서 z-index 값을 설정하면 요소에 대한 스택 컨텍스트가 생성되고, 해당 컨텍스트 내에서 하위 항목의 위치가 계산됩니다. 모달 창은 항상 이 계층 구조의 최상위에 있으므로 Z-색인이 필요하지 않습니다.

MDN에서 스태킹 컨텍스트에 대해 자세히 알아보세요.

최상위 레이어에서 렌더링되는 요소에 대해 자세히 알아보려면 MDN을 방문하세요.

문서 차단

최상위 레이어에 모달 요소가 렌더링되면 표시되는 문서 영역과 동일한 크기로 ::backdrop 의사 요소가 생성됩니다. 이 배경화면은 포인터 이벤트: 없음 CSS 규칙이 설정된 경우에도 페이지의 나머지 부분과의 상호 작용을 방지합니다.

모달 창을 제외한 모든 요소에 대해 비활성 속성이 자동으로 설정되어 사용자 작업을 차단합니다. 클릭 및 포커스 이벤트를 비활성화하고 스크린 리더 및 기타 보조 기술이 해당 요소에 액세스할 수 없게 만듭니다.

MDN의 비활성 속성에 대해 자세히 알아보세요.

집중 행동

모달이 열리면 그 안에 있는 첫 번째 포커스 가능한 요소가 자동으로 포커스를 받습니다. 처음에 초점이 맞춰진 요소를 변경하려면 autofocus 또는 tabindex 속성을 사용할 수 있습니다. 대화 상자 요소 자체에 대해 tabindex를 설정하는 것은 불가능합니다. 페이지에서 비활성 논리가 적용되지 않는 유일한 요소이기 때문입니다.

대화상자가 닫힌 후에는 대화상자를 열었던 요소로 포커스가 돌아갑니다.

모달 창으로 UX 문제 해결

안타깝게도

요소는 모달 창과 상호 작용하는 모든 측면을 다루지 않습니다. 다음으로는 모달 창을 사용할 때 발생할 수 있는 주요 UX 문제와 해결 방법에 대해 살펴보겠습니다.

스크롤 차단

네이티브 HTML5 모달 창이 그 아래에 있는 콘텐츠와의 상호 작용을 차단하는 ::backdrop 의사 요소를 생성하더라도 페이지 스크롤은 여전히 ​​활성 상태입니다. 이는 사용자에게 주의를 산만하게 할 수 있으므로 모달이 열릴 때 본문의 내용을 자르는 것이 좋습니다.

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

이러한 CSS 규칙은 모달 창을 열고 닫을 때마다 동적으로 추가 및 제거되어야 합니다. 이는 다음 CSS 규칙이 포함된 클래스를 조작하여 달성할 수 있습니다.

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

지원 상태가 프로젝트 요구 사항을 충족하는 경우 :has 선택기를 사용할 수도 있습니다.

<dialog open>Hi, I'm a popup!</dialog>

사용해 보세요: https://codepen.io/alexgriss/pen/XWOyVKj

창 외부를 클릭하여 대화 상자 닫기

이것은 모달 창에 대한 표준 UX 시나리오이며 여러 가지 방법으로 구현할 수 있습니다. 이 문제를 해결하는 두 가지 방법은 다음과 같습니다.

::backdrop 의사 요소의 동작을 기반으로 하는 방법

:backdrop 의사 요소를 클릭하는 것은 대화 상자 요소 자체를 클릭하는 것으로 간주됩니다. 따라서 모달 창의 전체 콘텐츠를 추가

그런 다음 대화 상자 요소 자체를 덮으면 클릭이 발생한 위치(배경 또는 모달 창 콘텐츠)를 확인할 수 있습니다.

에 대한 브라우저의 기본 패딩 및 테두리 스타일을 재설정하는 것을 잊지 마세요. 실수로 클릭할 때 모달 창이 닫히는 것을 방지하는 요소:

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

이제 모달 창의 테두리와 여백에 대한 공통 스타일을 내부 래퍼에만 적용합니다.

내부 래퍼 요소가 아닌 배경을 클릭할 때만 모달 창을 닫는 함수를 작성해야 합니다.

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

사용해 보세요: https://codepen.io/alexgriss/pen/mdvQXpJ

대화창의 크기를 결정하는 방법

이 방법은 모달 콘텐츠에 대한 추가 래퍼가 필요한 첫 번째 방법과 다릅니다. 여기서는 추가 포장이 필요하지 않습니다. 필요한 것은 클릭할 때 커서 위치가 요소 영역 밖으로 나가는지 확인하는 것입니다.

<dialog open>Hi, I'm a popup!</dialog>

사용해 보세요: https://codepen.io/alexgriss/pen/NWoePVP

대화창 스타일 지정

요소는 많은 기본 HTML 요소보다 스타일 지정 측면에서 더 유연합니다. 다음은 대화 상자 창 스타일을 지정하는 몇 가지 예입니다.

::배경 선택기를 사용하여 배경 스타일 지정: https://codepen.io/alexgriss/pen/ExrOQEO

애니메이션 대화창 열기 및 닫기: https://codepen.io/alexgriss/pen/QWYJQJO

사이드바로 사용되는 모달 창: https://codepen.io/alexgriss/pen/GRzwxgr

접근성

오랜만에 요소에는 접근성 문제가 있었지만 이제는 스크린 리더(VoiceOver, TalkBack, NVDA)와 같은 주요 보조 기술과 잘 작동합니다.

열려 있으면 화면 판독기에 의해 초점이 대화 상자로 이동됩니다. 모달 창의 경우 초점은 대화 상자가 닫힐 때까지 대화 상자 내에 유지됩니다.

기본적으로 요소는 ARIA 속성 role="dialog"를 갖는 것으로 보조 기술에 의해 인식됩니다. 모달 대화 상자는 ARIA 속성 aria-modal="true"를 갖는 것으로 인식됩니다.

다음은 의 접근성을 향상시키는 몇 가지 방법입니다. 요소:

aria-labelledby

항상 대화 상자 창 안에 제목을 포함하고

요소, 값은 제목의 ID로 설정됩니다.

<dialog>





<pre class="brush:php;toolbar:false">const popUpElement = document.getElementById("pop-up");

popUpElement.show();

:backdrop 의사 요소의 스타일을 지정해야 하는 경우 해당 스타일을 해당 .backdrop 요소에도 적용하여 이전 브라우저와의 호환성을 보장하세요.

<dialog>





<pre class="brush:php;toolbar:false">const modalElement = document.getElementById("modal");

modalElement.showModal();

를 지원하지 않는 브라우저의 경우에만 동적 가져오기를 통해 폴리필을 연결하는 것이 좋습니다. 요소:

<dialog open>Hi, I'm a popup!</dialog>

결론

네이티브 HTML5 요소는 모달 창과 팝업을 구현하기 위한 비교적 간단하면서도 강력한 도구입니다. 최신 브라우저에서 잘 지원되며 바닐라 JS와 모든 프런트엔드 프레임워크를 기반으로 하는 프로젝트에서 성공적으로 사용할 수 있습니다.

이 기사에서는 다음 주제에 대해 논의했습니다.

• 관련 문제 요소가 해결됩니다.
• 요소의 API;
• 브라우저 수준에서 대화상자 창이 작동하는 방식
• 모달 및 해당 솔루션의 일반적인 문제
• 접근성 향상 스크린 리더와 같은 보조 기술을 위한 요소
• 에 대한 브라우저 지원 확장 요소.

마지막으로 기사에서 논의된 주요 측면을 고려한 순수 JS의 모달 창 구성 요소 구현을 확인해 보시기 바랍니다: https://codepen.io/alexgriss/pen/abXPOPP

작업에 대해 제가 공유하고 싶은 내용은 이것이 전부입니다. HTML 요소. 이 기사가 여러분의 실험에 영감을 주기를 바랍니다!