02. Selector

UI 만드는 법칙

---

1. HTML / CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨긴다.
2. 버튼을 누르는 등 상호작용을 통해 UI를 보여 달라고 코드를 짠다.

Alert 박스 만들기

---

step 1. UI 디자인하기

<!-- index.html... -->

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

/* main.css */

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

UI를 평소에 숨기고 싶으면 display: none

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

visiblity: hidden 도 있다.

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

거의 모든 html 태그 내에 onclick 이라는 속성을 넣을 수 있는데

해당 html 을 클릭 시 onclick 안의 자바스크립트를 실행해 줍니다.

버튼을 눌렀을 때 자바스크립트를 실행하고 싶으면

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

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