자바스크립트로 버튼 효과 만들기

웹페이지에서 버튼 눌렀을때 뭐가 튀어나오게 하거나 텍스트를 바꿔준다거나

그런 다양한 기능들을 구현하기 위해서는 자바스크립트를 써야 함.

 

물론 버튼 디자인은 HTML과 CSS로 한다.

 

오늘 포스팅 내용은 버튼 디자인은 모르겠고 버튼을 눌렀을때 기능을 부여하는 것이 핵심.

 

바로 예제 코드 들어감

<div id="show" style="display: none">
  뿅
</div>

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

div 태그에 스타일을 넣어서 display: none 옵션을 넣으면 기본적으로 div 태그의 내용이 웹페이지에 표현되지 않음.

 

근데 버튼을 만들어서 div 태그의 스타일 옵션을 display: block 으로 바꿔주면 div 태그의 내용이 웹페이지에 표현됨

이렇게 된다는 이야기임.

 

자 여기서 버튼 태그에 onclick이라는 옵션이 들어가있는데 말그대로 저 태그를 클릭했을때 특정 코드를 실행시켜준다.

onclick 옵션에다가 document.getElementById를 붙여줘서,

우리가 버튼을 눌렀을때 보여줘야 하는 내용이 들어있는 div태그의 id인 show를 선택시켜준다.

그 뒤에 style.diplay 옵션을 수정하면 끝.

 

아주 쉬움.