사용: HTML, CSS, Javascript
버튼 (열기)을 클릭하면 간단한 알림 UI가 나타나고
버튼 (닫기)을 클릭하면 UI가 사라지는 매우 간단한 코드를 작성해보았다.
근데 기존 onclick 대신 이벤트리스너 addEventListener를 써서 코드를 작성해보았다.
addEventLister(이벤트, function(){}) 를 쓰는데
- 파라미터 이벤트엔 'click', 'mouseover', 'keydown'같은 이벤트를 적는다.
- 파라미터 function(){}에는 이벤트 만족시 코드 실행할 코드를 적는다.
- 예를 들어 click 이벤트 만족시 알림창 UI를 숨기는 코드를 작성하여 실제로 코드를 실행한다.
// 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>
데이터로 세상을 쓰고 읽고 싶은 헤븐리뷰입니다.