대화상자

bookmark_border 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

대화상자 요소는 HTML에서 모든 종류의 대화상자를 나타내는 데 유용한 요소입니다. 작동 방식을 알아보세요.

모달 대화상자는 웹페이지의 특수한 유형의 팝업 상자로, 사용자의 작업을 중단하고 자신에게 집중하도록 합니다. 대화상자를 팝업하는 유효한 사용 사례가 있지만, 대화상자를 팝업하기 전에 신중하게 고려해야 합니다. 모달 대화상자는 사용자가 특정 콘텐츠에 집중하도록 강제하고, 적어도 일시적으로 페이지의 나머지 부분을 무시하도록 합니다.

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

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

모달 대화상자

다음은 모달 <dialog>의 예입니다. '모달 대화상자 열기' 버튼으로 대화상자를 엽니다. 열린 후에는 세 가지 방법으로 대화상자를 닫을 수 있습니다. 이스케이프 키, 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는 전혀 필요하지 않습니다. 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"으로 양식을 제출하면 양식을 제출하는 데 사용된 제출 버튼의 name이 있는 경우 returnValue이 name로 설정됩니다. <button type="submit" name="toasty">close</button>를 작성했다면 returnValue는 toasty가 됩니다.

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

자바스크립트는 대화상자를 여는 기본 방법이지만 페이지 로드 시 open 속성을 포함한 다음 .close()로 삭제하면 자바스크립트가 없는 경우에도 대화상자를 사용할 수 있습니다.

추가 세부정보

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 속성은 상속되지 않습니다.

이해도 확인

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