소개
이 랩에서는 HTML <dialog> 태그를 사용하여 웹 페이지에 모달 창 또는 팝업을 만드는 방법을 배우게 됩니다. <dialog> 태그를 사용하여 샘플 대화 상자를 만드는 단계별 프로세스를 안내해 드리겠습니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html 에 dialog 태그 추가하기
<dialog> 태그는 시작 태그와 종료 태그가 필요합니다. 이 단계에서는 기본 HTML 구조와 <dialog> 태그를 index.html 파일에 추가합니다.
<!doctype html>
<html>
<head>
<title>HTML dialog 태그를 사용한 모달 창</title>
</head>
<body>
<h1>HTML dialog 태그를 사용한 모달 창</h1>
<!-- dialog 태그 추가 -->
<dialog>
<p>이것은 샘플 대화 상자입니다!</p>
</dialog>
</body>
</html>
대화 상자를 열기 위한 버튼 추가
이 단계에서는 대화 상자를 열기 위한 버튼을 만듭니다. 버튼을 클릭하면 JavaScript 를 사용하여 대화 상자를 열고 닫습니다.
<!doctype html>
<html>
<head>
<title>HTML dialog 태그를 사용한 모달 창</title>
</head>
<body>
<h1>HTML dialog 태그를 사용한 모달 창</h1>
<!-- dialog 태그 추가 -->
<dialog id="dialog">
<p>이것은 샘플 대화 상자입니다!</p>
</dialog>
<!-- 대화 상자를 열기 위한 버튼 추가 -->
<button onclick="document.getElementById('dialog').showModal()">
Open Dialog
</button>
<!-- 기본적으로 숨겨진 대화 상자를 닫기 위한 버튼 추가 -->
<button onclick="document.getElementById('dialog').close()">
Close Dialog
</button>
</body>
</html>
대화 상자에 CSS 스타일 추가
이 단계에서는 대화 상자에 CSS 스타일을 추가하여 더욱 보기 좋게 만듭니다.
<!doctype html>
<html>
<head>
<title>HTML dialog 태그를 사용한 모달 창</title>
<!-- 대화 상자 스타일 추가 -->
<style>
dialog {
width: 300px;
height: 150px;
background-color: #f2f2f2;
padding: 20px;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 0px 0px 10px #000;
font-family: Arial, san-serif;
font-size: 18px;
color: #000;
text-align: center;
}
</style>
</head>
<body>
<h1>HTML dialog 태그를 사용한 모달 창</h1>
<!-- dialog 태그 추가 -->
<dialog id="dialog">
<p>이것은 샘플 대화 상자입니다!</p>
</dialog>
<!-- 대화 상자를 열기 위한 버튼 추가 -->
<button onclick="document.getElementById('dialog').showModal()">
Open Dialog
</button>
<!-- 기본적으로 숨겨진 대화 상자를 닫기 위한 버튼 추가 -->
<button onclick="document.getElementById('dialog').close()">
Close Dialog
</button>
</body>
</html>
이제 HTML dialog 태그를 사용하여 모달 창을 만드는 HTML 코드가 완성되었습니다.
요약
HTML dialog 태그를 사용하여 모달 창을 만드는 랩을 성공적으로 완료했습니다. 이 랩에서는 HTML <dialog> 태그를 사용하여 샘플 대화 상자를 만드는 과정을 단계별로 논의했습니다. JavaScript 를 사용하여 대화 상자를 열고 닫는 간단한 버튼을 추가했습니다. 또한 대화 상자의 모양을 개선하기 위해 기본적인 CSS 스타일도 추가했습니다.
