사용: HTML, CSS, Javascript
버튼 (열기)을 클릭하면 간단한 알림 UI가 나타나고
버튼 (닫기)을 클릭하면 UI가 사라지는 매우 간단한 코드를 작성해보았다.
근데 이제 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">알림창임</div>
<button onclick=openUI()>열기</button>
<button onclick=closeUI()>닫기</button>
<script>
function openUI(){
document.getElementById('alert').style.display='block';
}
function closeUI(){
document.getElementById('alert').style.display='none';
}
</script>
</body>
</html>
.alert-box {
background-color: green;
padding: 20px;
color: white;
border-radius:5px;
display: none;
}
데이터로 세상을 쓰고 읽고 싶은 헤븐리뷰입니다.