HTML과 CSS를 사용하여 모달 팝업(모달 창)을 만들어보겠습니다. 이 모달 팝업은 버튼을 클릭하면 나타나고, 닫기 버튼을 클릭하면 사라지는 간단한 모달입니다.
1. HTML 파일 생성하기
먼저 텍스트 에디터(메모장, Visual Studio Code 등)를 열고 다음과 같이 HTML 파일을 생성합니다. 이 파일을 "index.html"로 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>모달 팝업</title>
</head>
<body>
<button id="openModalButton">모달 열기</button>
<!-- 모달 팝업 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" id="closeModalButton">×</span>
<h2>모달 제목</h2>
<p>모달 내용을 여기에 추가합니다.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS 스타일 시트 생성하기
다음으로 CSS 스타일 시트를 생성합니다. 이 파일을 "styles.css"로 저장합니다. 스타일 시트에서는 모달의 초기 상태와 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
/* 모달 스타일 */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 60%;
text-align: center;
}
.close {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
}
3. JavaScript 파일 생성하기
이제 JavaScript 파일을 생성합니다. 이 파일을 "script.js"로 저장합니다. JavaScript 파일에서는 모달 열기와 닫기 기능을 구현합니다.
// script.js
document.addEventListener("DOMContentLoaded", function () {
const openModalButton = document.getElementById("openModalButton");
const closeModalButton = document.getElementById("closeModalButton");
const modal = document.getElementById("myModal");
openModalButton.addEventListener("click", function () {
modal.style.display = "block";
});
closeModalButton.addEventListener("click", function () {
modal.style.display = "none";
});
});
4. 모달 팝업 실행하기
위의 코드를 모두 작성한 후, HTML 파일을 브라우저에서 열어서 테스트하세요. "모달 열기" 버튼을 클릭하면 모달 팝업이 나타나고, 닫기 버튼을 클릭하면 모달이 사라집니다.
5. 결과
모달 열기를 누르면 아래처럼 모달 제목이 뜹니다.
'HTML 예제' 카테고리의 다른 글
| 플립 카드: CSS로 카드 뒤집기 애니메이션 적용 (0) | 2023.12.05 |
|---|---|
| 무한 스크롤: 스크롤할 때마다 새로운 내용을 불러와 보여주는 기능 (0) | 2023.12.05 |
| 스크롤 이벤트: 스크롤 위치에 따라 요소가 나타나거나 사라지는 효과 (0) | 2023.12.05 |
| 회전하는 로고: CSS로 로고 이미지 회전 애니메이션 (0) | 2023.12.05 |
| 레인보우 텍스트: CSS 그래디언트를 사용하여 텍스트에 레인보우 색상 적용 (0) | 2023.12.05 |
