본문 바로가기

Tip / Tech

이미지 링크 점선 선택 박스 감추기

반응형

홈페이지나 블로그 화면을 꾸밀때 주로 이미지를 많이 사용하게 되므로
이미지에 링크를 걸게 되는 경우가 있다.

개인 이메일 주소를 사용하므로 메일로의 접속을 편하게 하기 위해서
이 블로그에도 우측편에 배너 형식으로 메일 접속 이미지 링크를 설치 했는데
이동을 위해 클릭을 하게 되면 링크임을 나타내기 위한 점선 선택 박스가 나타나게 된다.



별건 아니지만 미관상 이 점선 선택 박스를 나타나지 않게 하기 위해서
스타일을 지정해 줄 필요가 있다.

#mail a{
           outline:none;
           selector-dummy: expression(this.hideFocus=true);
           }

위에 보이는 css 태그는 mail 이라는 이름의 id를 지정하고
링크를 걸기 위한 a 태그에 선택 박스가 나타나지 않게 하기 위한 속성을 지정해 준 것이다.

이렇게 하면 이미지의 링크를 클릭해도 이미지가 깔끔하게 보이게 된다.


반응형