">
Permalink: http://blog.crows.kr/5040422
개인적인 취향입니다만 전 Anchor 태그를 그다지 좋아하지 않습니다. 그 이유가 마우스 커서를 올리면 손가락 모양으로 변하는 것 때문인데요. 왠지 그게 맘에 들지 않더라구요.본래 Anchor 태그. 흔히 <a> </a>로 사용하는 태그는 단어 뜻 그대로 닻, 고정 장치의 뜻을 가집니다. 여기에 href라는 하이퍼 링크 속성이 붙으면 href가 가리키는 페이지로 방향을 가지게 되는 것이구요. 클릭하면 닻이 고정된 곳으로 따라간다라고 생각 하면 되겠습니다. 그리고 페이지 안에 임의의 Anchor를 만들거나 만든 Anchor로 이동할 때도 사용됩니다. name 속성을 이용하는 것이죠. 페이지 주소 뒤에 #AnchorName 이 붙으면 AnchorName에 맞는 Anchor로 바로 이동됩니다.
단어 뜻을 조금 더 찾아보니 군사 용어로 목표 지점이라는 뜻도 있네요. 하이퍼 링크라는 개념에서 보면 군사 용어가 더 가까운 뜻을 가지고 있다고 볼 수 있겠네요.
Anchor 태그의 본래 목적은 다른 페이지 링크가 아니라 이 Anchor를 생성하는 것인데, 어쩌다보니 다른 페이지 링크의 목적으로 많이 쓰이게 됐습니다. 하긴 HTML 1.0 초기에도 Anchor라는게 다른 페이지를 지칭하는 것이 주목적이었던 것을 생각하면 다른 목적으로 쓰인 건 아니긴 하네요.
그런데 개인적으로 Anchor 태그는 말 그대로 Anchor만 생성할 때 사용하고 평소에는 엘리먼트 객체의 onclick 이벤트를 사용하고 있습니다. 물론 포스팅 할 때는 귀찮은 나머지 에디터가 제공하는 기능만 사용하지만요.
그러다보니 document.loacation.href나 document.location.replace를 자주 사용하게 됩니다. 그런데 이 둘의 사용 목적이 미묘하게 다르기 때문에 목적에 맞게 사용할 필요성이 생깁니다.
href는 하이퍼 링크를 생성하는데, 이는 페이지가 href에서 가리키는 방향으로 이동합니다. 현재 페이지는 이 링크로 이동할 시에 History에 기록이 되기 때문에 페이지 이동이 이루어지면 refferer로 기억되죠. 반면에 replace는 현재 페이지를 replace에서 지정한 페이지로 교체합니다. 목적지 페이지로 이동하는 것이 아니라 그냥 한 페이지 안의 내용을 바꾸기만 하는 것이기 때문에 History에는 기록되지 않고 refferer도 기존 것을 그대로 가지고있게 됩니다.
간단히 설명하자면 A, B, C 페이지가 있다고 하고, A에서 B로 하이퍼 텍스트 링크를 이용해서 이동한 상태라고 가정한 상태에서 href로 B에서 C로 이동 했다고 하면, A → B → C 이런 순서로 이동한 것이 됩니다. C 페이지에서 이전 페이지를 누르면 B 페이지로 이동되는 거죠. 반면 replace를 이용하면 A → (B = C) 이런 상태가 됩니다. 여기서 =은 대입 연산자의 의미로 보시면 됩니다. 간단하게 줄이면 A → C 상태가 되는 거죠. C 페이지에서 이전 페이지를 누르면 A 페이지로 이동 됩니다. replace가 현재 페이지에서 이동하는 것이 아니라 현재 페이지를 바꾸는 것이기 때문에 이런 차이를 보이게 되는 거죠.
자바 스클립트를 사용해야하는 것 때문에 조금 번거롭기는 하지만, 이미지에 하이퍼 링크를 만든다고 할 경우에는 객체의 수를 줄일 수 있어서 도움이 됩니다. Anchor 태그를 쓸 경우에는 <a><img /></a>의 순서로 만들어지기 때문에 엘리먼트 객체가 두 개 만들어지는데, 자바 스클립트를 이용하면 img 객체에 onclick 이벤트를 만들어주는 것으로 하나의 객체 안에서 다 해결됩니다. 텍스트에 하이퍼 링크를 만들 경우에는 span 태그를 사용할 수 있는데, 텍스트에 효과까지 동시에 넣을 수 있어서 좋구요. 일반적으로 화면에 그려지는 엘리먼트 객체는 전부 onclick 이벤트를 사용할 수 있기 때문에 유용하게 사용할 수 있습니다. 때문에 렌더링 속도가 미세하게나마 빠릅니다. 페이지가 복잡해질수록 그 차이는 더 커지구요.
유일한 단점은 번거로울 수 있다는 것 정도... 그리고 저와는 다르게 링크는 반드시 손가락 모양으로 바뀌어야 좋다고 생각하시는 분들은 Anchor 태그가 더 좋겠네요. 어디까지나 개인 취향이니...
">
">
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.










☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
HTML5에서 객체마다 직접 링크를 삽입할 수 있는 날이 오기 전까지는 앵커태그로 링크를 만들어 줘야 하는게 옳은게 아닌가 싶습니다. 자바스크립트로 링크를 만들면 자바스크립트 작동이 열악한 스크린리더같은 곳 등에서 접근성과 관련된 문제를 발생시킬 것이라 생각됩니다.
손가락의 유무는 시각적인 문제이므로, 꼭 손가락을 없애야 겠다면 css로 처리하는게 낫지 않는가 싶구요...