Javascript

버튼 누르면 알림창 뜨게 만들기

becky(지은) 2023. 3. 18. 17:14

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>