2. Alert

버튼을 누를시 alert박스가 나타나게 하기

 <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를 이용해서 보이기

 

 

---

숙제

alert창에 닫기버튼 구현

   <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>

위에 배웠던 alert-box를 나타나게 하는 방식과 같은 원리로 구현하니까 완성 !