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

기본적인 UI 만드는 법칙

1. HTML / CSS로 미리 UI 디자인을 해놓고 필요하면 평소에 숨김
2. 버튼을 누르거나 할 경우 UI를 보여달라고 자바스크립트 코드를 짬

---

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

• UI를 평소에 숨기고 싶으면 display: none을 주면 되고 다시 보여주고 싶으면 display: block을 넣으면 됨.
• visibility: hidden도 있음

---

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

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

<button onclick="javascript~~"> 버튼 </button>

<button onclick="document.getElementById('alert').style.display = 'block';">
      버튼
</button>