링크포커스 없애기

링크포커스가 뭔지 아시나요?

바로 아래 그림처럼 링크를 클릭했을 때 클릭된 글이나 이미지 주위에 생기는 점선입니다.

보통 링크에 생기는 아래 밑줄은 보통 CSS 설정을 통해 없애시는 편이시죠.

a    {color:#3C9CD6; text-decoration:none;}
a:link   {color:#3C9CD6; text-decoration:none;}
a:visited  {color:#3C9CD6; text-decoration:none;}
a:hover  {color:#66D0F9; text-decoration:none;}
a:active  {color:#66D0F9; text-decoration:none;}

여기서 text-decoration 부분이 밑줄이라든지 점선 효과 같은 걸 정의하는 부분인데 none 값을 주면 링크에 생기는 일반적인 밑줄은 생기지 않습니다.

하지만, 페이지 이동을 하다보면 링크포커스는 사라지지 않는데, 이 링크포커스를 없내는 방법을 찾아봤습니다.

1. 특정 링크에 바로 적용하는 방법

<a href="home.html" onfocus=blur()>test</a>

이렇게 하시면 test 라는 글자를 클릭할 때 링크포커스가 생기지 않습니다만, 일일이 타이핑해야 되고 특히 html 소스를 직접 에디팅하기 힘든 블로그에서는 어려운 방법이라고 할 수 있겠습니다.

2. 일괄적으로 적용하는 방법

일괄적으로 적용하는 방법은 모두 자바스크립트를 이용하는 방법인데, head 태그 바로 다음에 넣어주시면 됩니다.

참고로 저는 첫번째 자바스크립트를 사용했습니다.

<script language="JavaScript">
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring; 
</script>

<SCRIPT LANGUAGE="JavaScript">
<!--
    function allblur() {
         for (i = 0; i < document.links.length; i++)
         document.links[i].onfocus = document.links[i].blur;
    }
document.onfocusin = allblur;
//-->
</SCRIPT>

<script language="JavaScript1.2">
function click_blur()
{
   switch( event.srcElement.tagName )
   {
      case "A":
      case "IMG":
      document.body.focus();
   }
}
document.onfocusin=click_blur;
</script>

3가지 방법 모두 자바스크립트를 통해서 "A" 태그와 "IMG" 태그를 찾아내서 포커스를 죽이는 방법입니다.