[Anchor] a태그 하이퍼 링크 에 대한 고찰...

form태그에 대한 submit이나 화면이동 등등 버튼에 하이퍼링크를 주어서 화면 이동을 해야하는 상황이 꽤 많다.

그럴때 마다 버튼에 대해서 어떻게 값을 세팅 하는것이 가장 효율적인지 고민을 많이 해봤다.

그 중에서도 a태그에 대해 이야기 해보려고 한다.

 

화면이동

ajax통신이 아닌 http프로토콜 에서 화면 이동을 하는 경우 라면

<a href="URL"> 화면이동</a>

이렇게 해주어도 썩 나쁘지 않다.

 

버튼

 문제는 화면 이동이 없는 버튼 일때 인데 여기서 화면 이동이 없다는 말은 url의 변경이 없다는 뜻이다

즉, ajax통신 또는   새로고침, 네비게이터 메뉴 등을 사용할 때 이다.

대학교에서 수업이나 과제 따위를 할때는 화면이동이 없어도 어쨋든 버튼이기때문에

버튼 위에 손모양이 보여야 하고 그래서 이런식으로 쓰는 경우가 대부분이다.

<a href="#" onclick="functionName">확인</a>

<style>
    #test{cursor:pointer;}
</style>
 
<a onclick="functionName" id="test">확인</a>
 

href 에 #을 넣어서 손모양을 만들거나 css로 cursor속성을 pointer로 지정해주는 것이다.

또한,

 

<a href="javascript:functionName()">확인</a>

<a href="javascript:void(0)" id="test">확인</a>
 
<script>
var test= document.getElementById('test');
    test.onclick = function(){ testFunction(); }
 
function testFunction(){
    alert("test버튼이 눌렸다");
}
</sciprt>