블로그 이미지

카테고리

데꾸벅 (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 }






Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요

  1. 2010.03.06 16:00 김경윤  댓글주소  수정/삭제  댓글쓰기

    어제 말씀해주신대로 font-size:0px; 로 설정해도, 텍스트문제가 해결되더라구요~ 고맙습니다. 여러가지 방법을 알게되어서 좋네요~!
    5일동안 너무 많은걸 배워서 너무 감사합니다.
    앞으로도 좋은강의 부탁드립니다.