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 버튼을 눌렀을 때