a 태그에서 href 를 제거하고 싶다면! (href가 있는 경우와 없는 경우의 차이점)

제목이 좀 이상한가요? ㅎㅎㅎ

html의 a 태그 존재의 이유가 href 속성으로 알고 있는데, href를 삭제하고 싶다니요?!!!

사실 이렇게 사용하기를 원하는 사람이 얼마나 많을지는 잘 모르겠습니다.

저 같은 경우는 경우에 따라 이동하는 링크가 있기도 하고, 링크가 없어지기도 해야 하는 분기 처리가 필요하여 a 태그에서 href를 삭제할 필요가 있었습니다. 물론 a 태그 대신, span 태그 등으로 대체하여 처리할 수도 있겠지만 말이에요.

일단 a태그 엘레멘트에서 href 속성을 삭제하는 것은 간단합니다.

JQuery 의 속성 제거 함수를 사용하면 되지요.

$("#id").removeAttr("href")

#id 값을 넣어줘도 되고, 클래스 속성을 넣어줘도 되고.. 모든 a 태그에 적용하기 원한다면 $("a").removeAttr("href") 라고 사용해도 됩니다.

그런데 아마 일반적으로 a 태그에서 링크 기능을 쓰지 않기 원할 때는 보통 href="javascript:;" 를 주거나 href="javascript:void(0);" 등의 값을 주어서 링크가 생성되지 않도록 하는 방법을 많이 사용할 겁니다. 즉, a 태그에서 href 속성을 굳이 삭제하지 않더라도 링크의 효과를 없애는 방법은 있단 말이지요. (마치 a 태그에서 href 속성을 삭제하는 것은.. 붕어빵에서 팥을 빼버리는 느낌인데요.. ㅎㅎㅎ)

사실 매우 간단한 문법인데도 일부러 포스팅한 이유는 다음의 이유 때문입니다.

그럼 a 태그에서 href의 속성을 지우게 되면 실제 이동할 수 있는 링크가 삭제되는 것 외에 다른 효과가 있기라도 한건가요?

네 있습니다.

첫번째로 a 태그는 그 속성상 사용자가 태그 위에 마우스 커서를 올려 놓으면 마우스 커서가 손가락 모양(집게 손가락으로 누르려고 하는 모양)으로 바뀝니다. 즉 a 태그에는 디폴트로 cursor 스타일이 pointer (또는 hand)로 설정되어 있는 것이지요.

그런데 a 태그에서 href 속성이 사라지게 되면, cursor가 손가락 모양으로 바뀌지 않습니다. 기본값인 화살표 모양이 그래도 표시되지요. 

href 태그속성이 있는 경우라면 그 값이 무엇이든지 간에(설령 javascript:; 또는 #으로 설정되어 있는 경우..) 마우스 커서 속성이 손가락으로 바뀌게 됩니다.

두번째로는 키보드 탭키가 적용되지 않습니다. 웹페이지에서 탭키로 이동 가능한 요소들은 사용자 입력이나 동작이 가능한 경우입니다. 아마 비밀번호 입력 페이지에서 키보드 탭(Tab) 키를 누르면 아이디 입력창, 비밀번호 입력창, 로그인 버튼 등으로 순차적으로 이동하는 것을 확인하실 수 있습니다. 보통 사용자의 행동이 적용되는 input 요소, a 요소, button 요소 등이 키보드 탭 키로 이동이 가능한 대상인데요.

a 태그에서 href 속성이 사라지게 되면 키보드 탭키를 아무리 눌러도 해당 태그로 이동하지 않게 됩니다.

이렇다 하더라도 사실 a 태그 요소에서 href 속성을 삭제하여 사용하는 경우는 많지 않을 것 같지만.. 그래도 필요한 경우는 있으니, 알아두시면 좋을 것 같습니다.^^