a태그 클릭 이벤트, href "#", "#none", onclick 등 차이점

이미지나 문자에 a태그로 링크를 주어 버튼 효과를 만들 수 있다.

단순히 클릭 가능하도록 보이기 위해 사용하는 href 에는 다양한 요소를 넣을 수 있다.

아래 소스에서 버튼 클릭으로 clickBtn(); 가 실행된다.

<a href="#none"><img src="경로" onclick="clickBtn();" /></a>

물론 여기서 href는 아무런 이벤트를 발생하지 않는 것이 주 목적이다.

이미지를 버튼 처럼 보이게 하는게 목적이니깐.

그럼 href를 버튼 처럼 사용하기 위해 주는 속성을 살펴보자.

href="#"                        // 페이지 맨 위로 이동

href="#none"                 // 페이지 이동 X

href="javascript:void(0)"    // 페이지 이동 X

href="#특정id"                // 페이지에서 해당 아이디가 있는 화면으로 이동

href="#none"과 유사하게 onclick="" 도 사용할 수 있는데,

onclick을 사용하게 되면 tab 키로는 버튼이 선택 안되는 효과를 낼 수 있다.

(단 브라우서 IE 6,7에서는 hover styling이 안먹힐 수 있음으로 주의.)

사실 버튼은 button 태그를 사용하는게 맞는 것 같다.

그리고 a 태그는 페이지 이동할 때 사용하고.