사용: HTML, CSS, Javascript
닫기 버튼을 클릭하면 간단한 알림 UI가 사라지고
버튼1을 클릭하면 텍스트가 "아이디를 입력하세요" 로 바뀌고
버튼2을 클릭하면 텍스트가 "비밀번호를 입력하세요" 로 바뀌는
근데 이제 function을 곁들인
코드 몇 줄을 만들어 보았다.
기본 화면
버튼1 클릭시
버튼2 클릭시
// 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 onclick="openAlert()">닫기</button>
</div>
<button onclick="idAlert()">버튼1</button>
<button onclick="pwAlert()">버튼2</button>
<script>
function openAlert(){
document.getElementById('alert').style.display = 'none';
}
function idAlert(){
document.getElementById('title').innerHTML = '아이디를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
function pwAlert(){
document.getElementById('title').innerHTML = '비밀번호를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
</script>
</body>
</html>// main.css
.alert-box {
background-color: green;
padding: 20px;
color: white;
border-radius:5px;
display: block;
}
데이터로 세상을 쓰고 읽고 싶은 헤븐리뷰입니다.