Firefox에서 링크 점선 없애기
Publisher/CSS / 2010. 3. 6. 02:49
웹표준 강의 중에 어떤 수강생분이 질문했던 부분인데 파이어폭스에서 <a>태그에 텍스트를 이미지로 대체할때 (CSS를 이용한 Text 대체하기 포스트 참조) 점선으로 테두리가 생기는 것을 확인했다.
예전에는 IE에서 이미지에 이러한 점선이 생기면 아래와 같이 작업하였었는데
<img src="이미지주소" onfocus="this.blur()" />
사실 이와같은 방법은 데꾸벅은 즐겨쓰지 않았지만.. (접근성을 고려할때 링크는 링크임을 표시해줘야 한다고 생각해서... )
Firefox에서 CSS를 이용하여 text-indent값을 주었을때 점선이 생기면 다음과 같이 아주 지저분하게 점선이 생긴다. 그래서 overflow로 잘라줌으로써 이와 같은 현상을 해결할 수 있다.
div h1 a {
display:block;
width:300px;
height:100px;
background:url(이미지주소) 0 0 no-repeat;
text-indent:-2000px;
overflow:hidden;
outline:none;
}
Firefox의 경우 text-indent까지 링크영역으로 인식해서 점선이 해당 indent영역까지 처리됨으로 overflow:hidden 을 더 추가해 줌으로써 이와 같은 현상을 깔끔히 해결할 수 있다. 밑의 outline:none; 은 a 링크의 점선라인을 삭제해주는 것으로 추가적으로 적어주긴 했으나 overflow만으로도 충분히 가능하다.
<a>링크의 점선까지 없애주기 위해서는 다음과 같은 속성으로 전역에 공통으로 선언함으로써 전체 링크의 점선을 모두 처리할 수 있다. 이 속성은 IE, FF등 모든 브라우저에 적용할 수 있다.
a {
outline:none;
}
샘플파일
test.html
사실 이러한 점선은 웹접근성에 비춰볼때 상당히 중요한 요소이다. CSS-TRICKS에서도 데꾸벅과 같은 생각을 가지고 있었는데 나보다 한술 더 떠서 이 블로그에서는 마우스를 올렸을때 포커스 했을때 CSS를 이용해서 좀더 꾸밀때를 설명해 주고 있다.
a:hover, a:active, a:focus { // styling for any way a link is about to be used }
'Publisher > CSS' 카테고리의 다른 글
| CSS 최적화 기법 (7) | 2010.03.08 |
|---|---|
| 지금 바로 쓸수 있는 CSS3 (0) | 2010.03.07 |
| CSS로 만든 3D입체 이미지 (6) | 2009.12.31 |
| CSS 이용한 Text를 이미지로 대체하기 (3) | 2009.11.16 |
| CSS Float속성의 모든것 (All About Floats) (18) | 2009.11.07 |