JS/JAVASCRIPT
동적 UI 만드는 스텝 (Alert 박스 만들기)
ddururu
2025. 1. 9. 11:49
alert UI 만들어서 버튼을 눌렀을 때 띄우기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">알림창</div>
<button onclick="document.getElementById('alert').style.display = 'block'">버튼</button>
</body>
</html>
.alert-box {
background-color: skyblue;
padding: 20px;
color: #fff;
border-radius: 5px;
display: none;
}
✏️ onclick = “javascript“
클릭하면 실행되는 이벤트
📍숙제
Alert 박스 내에 닫기 버튼과 기능을 만들어보십시오
닫기 버튼을 누르면 Alert 박스가 뿅 사라져야합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">알림창 <button onclick="document.getElementById('alert').style.display = 'none'">x</button></div>
<button onclick="document.getElementById('alert').style.display = 'block'">버튼</button>
</body>
</html>
alert창 안에 button태그를 이용하여 x (close) 버튼을 추가한다음
button태그에 onclick 이벤트를 넣어 줬다. ( x 버튼을 누르면 alert박스가 사라지는 것이기 때문)
>> 버튼을 눌렀을 때

>> x 버튼을 눌렀을 때
