대화상자

모달 대화상자는 웹페이지에 있는 특수한 유형의 팝업 상자로, 사용자가 화면 자체에 집중할 수 있도록 방해하는 팝업입니다. 대화상자를 표시하는 데 유용한 몇 가지 사용 사례가 있지만, 대화상자를 표시하기 전에 고려해야 합니다. 모달 대화상자는 사용자가 특정 콘텐츠에 집중하도록 하고, 적어도 일시적으로 페이지의 나머지 부분은 무시하도록 합니다.

대화상자는 모달 (대화상자의 콘텐츠만 상호작용할 수 있음)이거나 비 모달일 수 있습니다 (대화상자 외부의 콘텐츠와 여전히 상호작용할 수 있음). 모달 대화상자는 나머지 페이지 콘텐츠 위에 표시됩니다. 페이지의 나머지 부분은 inert이며 기본적으로 반투명 배경에 의해 가려집니다.

대화상자를 만드는 시맨틱 HTML <dialog> 요소에는 시맨틱, 키보드 상호작용, HTMLDialogElement 인터페이스의 모든 속성 및 메서드가 포함되어 있습니다.

모달 대화상자

다음은 모달 <dialog>의 예입니다. '모달 대화상자 열기' 버튼으로 대화상자를 엽니다. 대화상자가 열리면 Esc 키를 사용하는 방법, formmethod="dialog"가 설정된 버튼을 사용하여 양식을 제출하는 방법 (또는 양식 자체에 method="dialog"가 설정된 경우) 및 HTMLDialogElement.close() 메서드를 사용하는 세 가지 방법이 있습니다.

HTMLDialogElement에는 HTMLElement에서 상속된 모든 메서드와 함께 세 가지 기본 메서드가 있습니다.

dialog.show() /* opens the dialog */
dialog.showModal() /* opens the dialog as a modal */
dialog.close() /* closes the dialog */

이 <dialog>는 HTMLDialogElement.showModal() 메서드를 통해 열렸으므로 모달 대화상자입니다. 모달 대화상자를 열면 대화상자 자체를 제외한 모든 항목이 비활성화되고 가려집니다. 대화상자 외부의 UI 위로 마우스를 가져가면 모든 요소가 pointer-events: none;가 설정된 것처럼 작동하는 것을 확인할 수 있습니다. 대화상자를 여는 버튼도 상호작용에 반응하지 않습니다.

대화상자가 열리면 포커스가 대화상자로 이동합니다. 이 대화상자 내 순차 키보드 탐색 순서의 첫 번째 요소에 포커스가 설정됩니다. tab 키를 반복적으로 누르면 모달 대화상자가 열려 있는 동안에는 대화상자 내의 콘텐츠에만 포커스를 받을 수 있습니다. 모달 대화상자 외부의 모든 항목은 대화상자가 열려 있는 한 비활성 상태입니다.

모달에 관계없이 대화상자가 닫히면 대화상자를 연 요소로 포커스가 반환됩니다. 사용자 작업을 기반으로 하지 않고 프로그래매틱 방식으로 대화상자를 여는 경우 다시 고려해 보세요. 꼭 필요한 경우, 특히 사용자가 대화상자와 상호작용하지 않고 대화상자를 닫는 경우에는 대화상자가 열리기 전의 위치로 포커스가 이동해야 합니다.

활성 대화상자를 제외하고 요소와 모든 하위 요소를 사용 중지하는 데 사용할 수 있는 전역 inert 속성이 있습니다. showModal()를 사용하여 모달 대화상자를 열면 비활성 또는 비활성화가 무료로 제공됩니다. 이 속성은 명시적으로 설정되지 않습니다.

대화상자 이외의 모든 것을 가리는 배경화면은 ::backdrop 유사 요소를 사용하여 스타일을 지정할 수 있습니다. 배경화면은 .showModal() 메서드를 사용하여 <dialog>가 표시될 때만 표시됩니다. 이 유사 요소는 화면이나 모니터와 가로세로 비율이 같지 않은 전체 화면 모드로 동영상을 볼 때와 같이 FullScreen API를 사용할 때 표시되는 배경화면을 비롯한 모든 배경화면과 일치합니다.

비 모달 대화상자

HTMLDialogElement.show()는 마찬가지로 대화상자를 열지만 배경화면을 추가하거나 비활성이 되지는 않습니다. Esc 키는 비 모달 대화상자를 닫지 않습니다. 따라서 비 모달 대화상자를 닫는 메서드를 포함하는 것이 훨씬 더 중요합니다. 이때 대화상자 밖에 있는 경우 포커스가 대화상자를 연 요소로 이동하므로 최적의 사용자 환경이 아닐 수 있습니다.

대화상자 닫기 버튼은 사양에 의해 공식적으로 필요하지는 않지만, 필요한 것으로 간주해야 합니다. Esc 키는 모달 대화상자를 닫지만 비모달 대화상자는 닫지 않습니다. 포커스를 받을 수 있는 버튼이 표시되면 접근성과 사용자 환경이 개선됩니다.

대화상자 닫기

대화상자를 닫는 데 HTMLDialogElement.close() 메서드가 필요하지 않습니다. JavaScript는 전혀 필요하지 않습니다. 자바스크립트 없이 <dialog>을 닫으려면 <form>에 method="dialog"를 설정하거나 버튼에 formmethod="dialog"를 설정하여 대화상자 메서드가 있는 양식을 포함합니다.

사용자가 dialog 메서드를 통해 제출하면 사용자가 입력한 데이터의 상태가 유지됩니다. 제출 이벤트가 있는 동안 (novalidate가 설정되지 않은 경우) 양식이 제약조건 유효성 검사를 거치는 동안 사용자 데이터가 삭제되거나 제출되지 않습니다. JavaScript가 없는 닫기 버튼은 다음과 같이 작성할 수 있습니다.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

이 예에서 닫기 <button>에 설정된 autofocus 속성을 발견할 수 있습니다. <dialog> 내에 autofocus 속성이 설정된 요소는 페이지 로드 시 포커스를 받지 않습니다 (페이지가 대화상자가 표시된 상태로 로드되지 않는 경우). 하지만 대화상자가 열릴 때 포커스를 받습니다.

기본적으로, 대화상자가 열릴 때 대화상자 내의 다른 요소에 autofocus 속성이 설정되어 있지 않은 한 대화상자 내 첫 번째 포커스 가능 요소가 포커스를 받습니다. 닫기 버튼에 autofocus 속성을 설정하면 대화상자가 열릴 때 포커스가 맞춰집니다. 하지만 <dialog> 내에 autofocus를 포함할 때는 신중하게 고려해야 합니다. 자동 포커스가 설정된 요소 앞에 오는 시퀀스에서 모든 요소를 건너뜁니다. 이 속성에 관해서는 포커스 강의에서 자세히 설명합니다.

HTMLDialogElement 인터페이스에는 returnValue 속성이 포함되어 있습니다. method="dialog"를 사용하여 양식을 제출하면 returnValue이 양식 제출에 사용된 제출 버튼의 name(있는 경우)로 설정됩니다. <button type="submit" name="toasty">close</button>를 작성했다면 returnValue는 toasty가 됩니다.

대화상자가 열리면 불리언 open 속성이 표시됩니다. 즉, 대화상자가 활성 상태이고 상호작용할 수 있습니다. .show() 또는 .showModal()를 통하지 않고 open 속성을 추가하여 대화상자를 열면 대화상자에 모달이 없습니다. HTMLDialogElement.open 속성은 모달이 아닌 대화상자가 상호작용에 사용 가능한지에 따라 true 또는 false를 반환합니다.

페이지 로드 시 open 속성을 포함한 대화상자를 열고 .close()로 삭제할 때는 JavaScript를 사용하는 것이 좋지만, JavaScript를 사용하지 않는 경우에도 대화상자를 표시하는 데 도움이 될 수 있습니다.

추가 정보

tabindex 사용 안함

대화상자와 대화상자에 포함된 닫기 버튼을 열기 위해 활성화된 요소 (및 다른 콘텐츠)는 포커스를 받을 수 있으며 상호작용합니다. <dialog> 요소는 대화형이 아니며 포커스를 받지 않습니다. 대화상자 자체에 tabindex 속성을 추가하지 마세요.

ARIA 역할

암시적 역할은 dialog입니다. 대화상자가 확인 또는 기타 사용자 응답이 필요한 중요 메시지를 전달하는 확인 창인 경우 role="alertdialog"를 설정합니다. 대화상자에는 액세스 가능한 이름도 있어야 합니다. 표시되는 텍스트로 액세스 가능한 이름을 제공할 수 있는 경우 aria-labelledby="idOfLabelingText"를 추가합니다.

CSS 기본값

브라우저는 dialog의 기본 스타일을 제공합니다. Firefox, Chrome, Edge는 color: CanvasText;를 background-color: Canvas;로 설정하고 Safari는 사용자 에이전트 스타일시트에서 color: black; background-color: white;를 설정합니다. color는 예기치 않은 body이나 :root이 아니라 dialog에서 상속됩니다. background-color 속성은 상속되지 않습니다.

학습 내용 확인하기

대화상자 요소에 관한 지식을 테스트합니다.