[자바스크립트 기초] 동적 UI 버튼 만들기

오늘은 제가 놓쳤던 부분에 대해 기록해볼까 합니다.

'버튼'을 클릭하면 동적으로 알림창을 만들어주고

'닫기'를 클릭하면 동적으로 알림창을 꺼주는 간단한 코드 입니다.

 

만들어 놓은 버튼

버튼을 클릭하였을 때 열리는 div 박스

 

Html

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

 

 

Css

.alert-box{
        display: none;
       	width:500px;
        padding:20px;
        border-radius: 10px;
        background-color: rgb(167, 255, 255);
    }

 

 

보통 이벤트 경우 script 태그 안에 많이 적어서,

Html 상에서 이벤트를 작성하는 것은 되게 오랜만이여서 신선하게 다가오네요 ㅎㅎ

 

 

원리는 div 박스를 display:none;으로 처리를 해놓았다가 

'버튼'을 클릭하면 display속성을 block으로 바꿔주세요~

'닫기'를 클릭하면 display 속성을 none 으로 바꿔주세요~하는 간단한 원리입니다.