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

기본적인 UI 만드는 법칙

웹페이지에선 탭, 모달창, 서브메뉴, 툴팁 등 수백개의 동적인 UI를 만들 수 있다.

1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김

2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짜기*

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

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

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

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

이렇게 하고 저기서 버튼을 클릭 시 아까 숨겼던걸 보여주게 코드를 짜본다면?

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

'어쩌구'자리에는 class옆에 부여한 id를 넣어주기

위에서 display: none; 줬던것을 클릭시 block으로 바꿔줘라~ 하면서 보이게 해주는 뜻