사용: HTML, CSS, Javascript
버튼 (열기)을 클릭하면 간단한 알림 UI가 나타나고
버튼 (닫기)을 클릭하면 UI가 사라지는 매우 간단한 코드를 작성해보았다.
근데 기존 onclick
대신 이벤트리스너 addEventListener
를 써서 코드를 작성해보았다.
addEventLister(이벤트, function(){})
를 쓰는데
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<p id="title">알림창</p>
<button id="close">닫기</button>
</div>
<button onclick="alert('아이디를 입력하세요')">버튼1</button>
<button onclick="alert('비밀번호를 입력하세요')">버튼2</button>
<script>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
});
function alert(hangeul){
document.getElementById('title').innerHTML = hangeul;
document.getElementById('alert').style.display = 'block';
}
</script>
</body>
</html>