a href="#" 에 대해서

참고자료 :  http://blog.outsider.ne.kr/223   굽신

읽을 시 참고할 것 :  http://naradesign.net/wp/2007/07/11/123/ 

보통 이미지를 버튼 형태로 만들어주기 위해서 사용하는 형태는 아래와 같다.

<a href="#"><img src="PATH" alt="" onClick="function();"/></a>

여기서 a 태그를 넣는 이유는 단 한가지, 이미지를 버튼으로 만들기 위함이다. 즉, 이미지로 마우스를 올리면 포인터를 손 모양으로 바꾸기 위함이다.

IE 같은 경우에는 이 때 파란색 테두리가 이미지에 포인터를 갖다대면 생긴다. 그래서

<a href="#"><img src="PATH" alt="" onClick="function();" border="0"/></a>

 
하지만 처음부터 그래왔지만 가독성이 상당히 떨어진다. 또한 href="#"로 해놓으면 무조건 페이지 최상단으로 이동하게 된다. 이미지가 비교적 상단에 위치한다면 상관이 없지만 이미지가 하단에 위차할 경우 사용자의 게이지만 올려줄 따름이다. 클릭을 할 때마다 최상단으로의 이동은 심히 불편한 일이니까.

이는 CSS를 통해서 해결이 가능하다.

<style>
.btn {cursor: pointer;}
</style>

<img src="PATH" alt="" class="btn" onClick="funtion();" /> 

이렇게하면 이미지의 개수에 관계없이 손쉬운 관리가 가능해진다.

하지만 또 하나의 문제가 발생된다.(이군 님의 의견) 장애인의 경우에는, 즉 키보드만을 다루는 사람들에게는 별도의 클래스 선언을 통해서의 포인터 변경법은 접근에 해가 될 뿐이다. 보통들 tab 키를 이용해서 접근을 하기 때문이다. 아래와 같이 사용하자. 둘 중 하나를 사용해주면 된다.

<input type="image" src="PATH" alt=""/>

 

<button><img src="" alt=""/></button>

 
 


지나가다 님의 발언
페이스북에서는 아래와 같이 사용합니다.

<a onClick="">abcdefg</a>

물론 지나가다 님은 2011년 10월 21일 18시 29분에 발언을 하셨기 때문에 현재 글을 쓰는 2012년 2월 13일에는 어찌 되었는지는 모르겠다. 하지만 이렇게 하면 href를 쓰지 않고 원하는 기능도 되고 포커스도 가게 할 수가 있다.




음.... 이제서야 웹에 입문하는 학생이기에 웹표준의 세계에 잠깐 물 적신 기분. a 태크에 그 이외이 기능을 쓰는게 옳을가에 대한 문제인데. 브라우저는 a 태크에게 링크의 기능을 기대하고 있으니까.