2.경고

버튼을 클릭하면 경고 상자가 나타납니다.

 <div class="alert-box" id="alert-box">Alert 박스</div>
    
    <!-- 버튼을 누를 시 alert-box가 나타나게 하기 -->
                                                 <!-- alert-box를 display : block으로 변경 -->
    <button onclick="document.getElementById('alert-box').style.display = 'block';">버튼</button>
        <!-- onclick : 이 버튼 클릭시 자바스크립트 실행 -->

.alert-box {
    background: rgb(255, 230, 245);
    color: rgb(39, 41, 37);
    padding: 20px;
    border-radius: 5px;
    display: none; 
    /* 숨겨줌  보여줄땐 display : block*/
}

UI를 수행하는 방법
1. 미리 디자인하라
2. 숨기기
3. JS로 원할 때 보기

숙제

알림 창에 닫기 버튼 구현

   <div class="alert-box" id="alert-box">Alert 박스
      <!-- 닫기 버튼 누르면 alert-box 없애기 -->
        <button onclick="document.getElementById('alert-box').style.display = 'none';">닫기</button>
    </div>
    
      <button onclick="document.getElementById('alert-box').style.display = 'block';">버튼</button>

위에서 배운 경고창을 보여주기 위한 절차와 같은 원리로 구현하면 완성!