웹마스터 팁
링크시 텍스트 혹은 이미지에 생기는 점선 CSS로 없애기
2010.04.24 20:46
이걸 팁에 올려야 할지 고민 했는데요.
어디선가 누군가가 질문한 기억이 있어서요.
먼저 텍스트 링크나 이미지 링크에 점선이 생기지요. 특히 페딩을 줬을경우 양쪽, 아래위 같은 크기로 페딩을 하지 않았을경우 좀 그렇더군요.
저 점선을 없애는 방법으로 자바스크립트를 사용하시는 분들이 많은듯 해요. 혹은 링크마다 넣으라는 분들도 계시고요...
<script>
function removeFocusOnAllLinks(){
for(var i=0 ; i < document.links.length ; i++)
document.links.onclick=blurLink;
}
function blurLink() {
if (this.blur) this.blur();
}
window.onload=removeFocusOnAllLinks;
</script>
위의 스크립트 말고 혹은 스크립트로도 점선이 없어지지 않는다면 아래 CSS 추가로 간단히 없애는 방법도 있다는 허접한 팁이였습니다.
댓글 9
-
SMaker
2010.04.25 09:47
아주 좋지 않은 방법입니다.
스크립트를 이용해 focus를 없애는 것은
접근성을 무시하는 것입니다.
-
겨우리851
2010.04.25 13:42
아 죄송합니다.
저는 스크립트를 이용하자 쓴 팁이 아니구요. CSS로 링크의 아웃라인을 없애자 하는 의도 였습니다. 가끔 게시판에 링크 점선 테두리 질문하시는 분들께 거의 모든 답변이 스크립트로 있어서요..
그냥 CSS에 아래 한줄 첨가하는것이 접근성에 문제를 주는지 모르겠네요. 자세히 설명해 주시면 정말 감사하겠습니다.
a { outline:0; }
-
SMaker
2010.04.25 17:32
CSS를 이용한 방법을 사용하면 접근성에 전혀 문제가 없습니다.
단지 자바스크립트를 이용하면 접근성에 문제가 된다는 걸 참고하시라고 올린 것 뿐입니다.
-
쪼꼬렛주세요
2010.04.25 20:21
접근성을 훼손하지 않으면서도 이런 좋은 방법이 있었군요...! 팀 감사합니다 :)
-
무건이
2010.04.25 23:17
위 스크립트를 사용하면 키보드 사용자는 아무것도 할 수 없게 되죠..
css 선에서 해결하는게 좋습니다.
-
음?.. 전 css보고 한 건데 --;; 다들 아시는거였쿠나..
-
별
2010.04.30 15:22
a { outline:0; }
요거 요거~ 잘 되네요~ 우훗~레이아웃 편집창에서 css 부분에 넣어주니 다 적용이 되는군요! 고맙습니다! ^^
-
kbj
2010.10.11 09:08
이거를 이제서야 보다니요..
어제 저녁부터 오늘 새벽까지 계속 이 방법만 찾아다니고 있었습니다.
잠 안자고 마지막으로 구글로 검색하니깐 여기가 뜨더군요. 아~ 눈물 납니다 ㅠㅠ
이상하게 답글대로 해도 점선이 없어지지 않았는데 드디어 없어지네요,,
a { outline:0; } 요거 한방에 다 없어지다뇨. 정말 놀라울 따름입니다.
이런 귀한 팁 올려주신 님께 정중히 감사 표현 드립니다.
감사합니다. 처음 봤어요. 오오 이런게 있었다니