블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글




웹표준 강의 중에 어떤 수강생분이 질문했던 부분인데  파이어폭스에서  <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;
}


샘플파일 


사실 이러한 점선은 웹접근성에 비춰볼때 상당히 중요한 요소이다. 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
Post by 넥스트리소프트 데꾸벅(techbug)
, |