UI 알아서 만드는 법
1. 미리 html/css 디자인 만들기
2. 필요할때 보여달라고 js 짬
<!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 = "document.getElementById('alert').style.display = 'block';">버튼</button>
</body>
</html>.alert-box {
background-color: skyblue;
padding:20px;
color:white;
border-radius: 5px;
display:none;
}
번외: 알림창 닫기 버튼 만드는 법
<!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 = "document.getElementById('alert').style.display ='none';">알림창닫기버튼</button>
</body>
</html>.alert-box {
background-color: skyblue;
padding:20px;
color:white;
border-radius: 5px;
display:block;
}
<!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 ="알림창('none');">닫기버튼</button>
<button onclick="알림창('block');">열기버튼</button>
<script>
//코드축약
function 알림창(구멍){
document.getElementById('alert').style.display =구멍;
}
//알림창('안녕'); // 구멍에 '안녕' 넣어서 알림창 안의 코드 실행해주세요
//함수 1개로 2종류의 코드실행 가능
//구멍뚫어놓으면 함수를 다양한 코드 사용가능
</script>
</body>
</html>'Javascript' 카테고리의 다른 글
| alert 박스 내용 바꿔서 띄우기 (0) | 2023.03.18 |
|---|---|
| 자바스크립트 초보자 실수정리 (0) | 2023.03.18 |
| async 함수 안에서 쓰는 await (0) | 2023.03.18 |
| Promise(=성공/실패 판정기계) (0) | 2023.03.18 |
| 비동기처리와 순차적으로 실행해주는 콜백함수 (0) | 2023.03.16 |
