JavaScript-동적 UI 만드는 스텝 (Alert 박스 만들기)

기본적인 UI 만드는 법칙

1. HTML CSS로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨긴다
2. 버튼을 누르거나 할 경우 UI를 보여주는 자바스크립트 코드를 짠다

X누르면 창이 사라지고 띄우기 버튼을 누르면 창이 나오게 하기

step 1. Alert UI 디자인 하기

HTML

<div class="alert-box">알림창임</div>

CSS

.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
} 

다시 보여주고싶으면 display: block 을 주면 된다.

step 2. 버튼 누르면 Alert UI 보여주기

거의 모든 html 태그 내에 onclick 이라는 속성을 넣을 수 있는데
이걸 넣게되면 html 클릭 시 onclick 안의 자바스크립트를 실행해준다

<button onclick="자바스크립트~~"> 버튼 </button>

이렇게 코드짜면 댐

    <div class="alert-box" id="alert">알림창임</div>
    <button onclick="document.getElementById('alert').style.display='block';">
      버튼
    </button>

---

📒오늘의 숙제 : Alert 박스 내에 닫기 버튼과 기능 구현하기

닫기 버튼을 누르면 Alert 박스가 뿅 사라지게!

<button onclick="document.getElementById('alert').style.display='none'">
	닫기
</button>