[HTML] image 버튼을 만들어보자.

테스트 버튼 을 눌러보자  

첫번째  테스트 버튼은 그냥 일반 버튼에 CSS만 조금 아주 조그음 바꾼거고.

밑에 소스는 버튼 태그 <button> ~ </button> 사이에 <img>를  추가한것이다.

<button type="button" id="" class="btn btnEvent">
<img src="http://c.huv.kr/c/0b/0b8c4a6d60aea665193612bb31af071039da9e16.png" alt="btnImages" class="btnImages">
</button>

※ 기타 팁  

만약 자신이 <form> 태그를 통해 데이터를 전달시에.

<button> 태그에 type 을 명시하지않으면 자동으로 submit 이벤트가 일어나버린다.

만약  <form> 태그안에 이미지 버튼이나 <button> 태그를 이용할때에는 항상 type을 명시해주자

그냥 form태그 안쓸때도 명시해주자.  그게맘편하다...

자바 스크립트는 그냥 on 함수를 이용해서 click 이벤트를 바인딩 시켜버린것.

$(".btnEvent").on("click", function() {
  alert("jsfiddle 동작 테스트");
});

풀이하자면 btnEvent 라는 클래스가 명시된 태그에는 

(조금 어려운 말일수도 있지만 로딩시)

alert 경고창을 출력하겠다. 

라고 해석할수있겠다...