안녕하세요 웹 OB 박희선입니다.
HTML <dialog> 태그와 사용법
여러분은 모달창을 구현할때 어떻게 하시나요?
개발을 하다보면, 자주 접하게 되는 UI 요소가 바로 Modal window 입니다. 사용자가 페이지의 다른 부분과 상호작용하지 않도록 특정 정보를 제공하거나, 중요한 액션을 취할 수 있게 하는 팝업 창을 구현할 때 사용됩니다
그렇다면, 모달 창을 구현할 때 여러분은 어떤 방법을 사용하고 계시나요? 자바스크립트로 div 요소를 띄우고, CSS로 스타일링을 추가하여 팝업 창을 구현하는 방식이 일반적입니다. 하지만 이런 방법은 코드가 길어지고, 여러 요소를 세밀하게 제어해야 하므로 다소 번거롭고 오류가 발생할 가능성도 있습니다.
여기서 <dialog>태그가 등장합니다. dialog 태그는 모달을 수비게 만들어줄 수 있는 태그로, 자바스크립트를 통해 제어할 수 있는 여러 메서드 (showModal(), close())를 제공하여 보다 간편하게 팝업 창을 구현할 수 있게 도와줍니다.
사용법을 알아봅시다~ !
1. 기본 작성 방법
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dialog 태그 예시</title>
</head>
<body>
<button id="showDialogBtn">대화 상자 열기</button>
<dialog id="myDialog">
<p>이것은 대화 상자입니다!</p>
<button id="closeDialogBtn">닫기</button>
</dialog>
<script>
// 대화 상자 열기 버튼
const showDialogBtn = document.getElementById('showDialogBtn');
const myDialog = document.getElementById('myDialog');
const closeDialogBtn = document.getElementById('closeDialogBtn');
showDialogBtn.addEventListener('click', () => {
myDialog.showModal(); // 대화 상자 표시
});
closeDialogBtn.addEventListener('click', () => {
myDialog.close(); // 대화 상자 닫기
});
</script>
</body>
</html>
위 코드에서 <dialog> 태그는 기본적으로 화면에 표시되지 않고, JS를 사용해 showModal()로 표시하거나 clos() 메서드로 닫을 수 있습니다.
2. 주요 속성
- open: <dialog> 태그에 open 속성을 추가하면 대화 상자가 기본적으로 열려 있는 상태로 표시됩니다. 이 속성은 자바스크립트로도 제어할 수 있습니다.
<dialog open>
<p>대화 상자는 이미 열려 있습니다.</p>
</dialog>
- showModal(): 대화 상자를 모달 창처럼 표시 합니다. 열린 상태에서 유저는 다른 부분을 클릭할 수 없습니다
- close(): 이 메서드는 대화 상자를 닫습니다.
myDialog.showModal();
myDialog.close();
3. 활용 예시
사용자에게 중요한 정보를 전달하거나 확인을 요구하는 경우에 유용하게 사용됩니다. 예를 들어, 로그인 화면, 알림 창, 팝업 창 등에서 활용할 수 있습니다.
<dialog> 태그는 HTML5에서 새로 추가된 기능으로, 웹 페이지에서 모달 창을 쉽게 만들 수 있는 아주 유용한 도구입니다. 이제 복잡한 자바스크립트나 CSS 없이도 간단한 코드만으로 대화 상자를 띄울 수 있습니다. showModal()과 close() 메서드를 통해 모달의 열림과 닫힘을 간편하게 제어할 수 있고, 기본 스타일도 마음대로 수정할 수 있어 다양한 디자인에 유연하게 대응할 수 있습니다.
<dialog> 태그는 사용자가 반드시 상호작용해야 하는 대화 상자나 알림을 구현하는 데 정말 편리하고, 효율적인 방법을 제공합니다. 앞으로 웹 개발을 할 때, 이 태그를 활용하면 더 깔끔하고 빠르게 모달 창을 구현할 수 있을 거예요!
참고자료: https://developer.mozilla.org/ko/docs/Web/HTML/Element/dialog
'2주차' 카테고리의 다른 글
| js 모듈화 (0) | 2025.04.25 |
|---|---|
| 자바스크립트 Scheduler API (0) | 2025.04.25 |
| 자바스크립트 동기와 비동기 (0) | 2025.04.25 |
| 메모리 누수와 성능 관리 (0) | 2025.04.25 |
| 리액트 렌더링 과정 (0) | 2025.04.25 |
