웹마스터 팁
링크시 텍스트 혹은 이미지에 생기는 점선 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; } 요거 한방에 다 없어지다뇨. 정말 놀라울 따름입니다.
이런 귀한 팁 올려주신 님께 정중히 감사 표현 드립니다.
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
링크시 텍스트 혹은 이미지에 생기는 점선 CSS로 없애기
[9]
 | 겨우리851 | 2010.04.24 |
| XE를 처음 접하거나 이제막 사이트개발을 하려는 초보자를 위한 XE 접근방법 [1] | DuRi | 2009.11.12 |
| 1.4.4.1 업데이트이후 이미지가 엑스박스로 뜨는 분들 참고 [1] | 위드파트너 | 2010.10.04 |
| 관리화면(제어판)에서 게시판목록 많이 보기 [1] | 연필깎는까치 | 2009.08.22 |
| Google Analytics 코드 직접 추가해도 안되시는 분들! | 연필깎는까치 | 2009.08.24 |
| Cooliris 위젯 사용 삽질끝에 어이없게 알아낸 설치 방법 [2] | 사탕 | 2009.09.01 |
| ㅋㅋ계정용량 체크(php)팁. [2] | mc뷰 | 2009.09.02 |
| 퀵타임 무비 화일 (mov) 화일을 퀵타임 플레이어로 재생하기 [2] | thejaewoo | 2009.09.08 |
|
이모티콘 액박으로 뜨시는 분들 ...이거 올려 주세요
[1]
| apollos | 2009.09.03 |
| 복수 도메인 사용 방법 [1] | 박하향풍선껌 | 2009.09.07 |
|
활성 메뉴 위젯
| 박송휘 | 2009.09.10 |
| XE 속도 향상 팁 (코어 수정 팁) [6] | SMaker | 2010.06.26 |
| 쉬운 설치 오류 해결..까지는 아니구요.. ㅎㅎ | 차명기993 | 2010.09.07 |
| css 배경이미지가 잘린다 싶을때... | ForHanbi | 2010.09.14 |
| PHP 5.3.X 버전 사용자들 중 XE 최신버전의 위젯 생성, 텍스타일 등에서의 에러날 때... | 비나무 | 2010.10.03 |
| 크로스 브라우징을 위한 css 초기화 [2] | hhgyu | 2010.10.05 |
| 게시판 가로사이즈 줄이기....[초보만 클릭] [4] | 유팔복 | 2009.03.07 |
| rewrite mod 설정, 해지 [1] | 아름드리479 | 2007.08.22 |
|
textarea 에디터를 사용하는 리플에서 태그 막기
[2]
| 老姜君 | 2009.02.22 |
| 1.4.4 판올림 이후 발생하는 문제들 - 개발자용 [10] | June Oh | 2010.09.30 |
감사합니다. 처음 봤어요. 오오 이런게 있었다니