UI 만드는 step
1. HTML/CSS로 미리 디자인
2. 조건에 맞춰 작동하도록 코드 만들기(자바스크립트로)
예시 상황
버튼을 눌렀을 때 알림창이 나오도록 하고 싶을 때
1. 알림창과 버튼 HTML/CSS로 미리 디자인하기
<body> <div>알림창</div> <button>보이기</button> </body>
2. 조건에 맞춰 작동하도록 코드 만들기
보이기 버튼 누르기 전에는 알림창이 보이지 않으므로 display:none 추가
버튼 누르면 display:block으로 바꾸는 코드<body> <div id="alertBox">알림창</div> <button onclick="document.getElementById('alertBox').style.display = 'block'">보이기</button> </body>
