- 전체(91)
- html5(1)
- web accessibility(11)
- Cross Browsing(20)
- html basic(7)
- css basic(23)
- meta(2)
- form(12)
- table(2)
- menu(2)
- box(1)
- button(1)
- font(1)
- etc(8)
- CSS 애니메이션
의미가 포함되어 있는 이미지를 배경으로 처리하고 대신 전경에 상응하는 텍스트를 넣는 방법으로써 시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 '화면 낭독기를 사용하는 시각 장애인, CSS 제거, 인쇄' 시에는 텍스트 데이터에 접근하거나 텍스트를 볼 수 있는 형태로 설계하는 기법을 말합니다. 이 기법의 장점은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다. 한편 모바일 브라우징 장치에서 전송 요금 등을 고려하여 일부러 이미지를 끈 상태로 웹 사이트를 이용하는 사용자에게는 이미지와 텍스트가 모두 출력되지 않기 때문에 치명적일 수 있습니다. 따라서 의미가 포함된 이미지는 전경으로 처리한다는 원칙을 먼저 세우고 여러 조각의 이미지가 전송 성능에 영향을 미치지 않도록 고려해야 하는 경우에만 Sprite(조각난 이미지들을 하나의 이미지로 배경 처리해서 전송 성능을 높이는) 기법과 함께 사용하는 것이 좋습니다.
- HTML
-
<a href="#"><span>NAVER</span></a>
- CSS
-
a { position:relative; display:inline-block; width:193px; height:47px; overflow:hidden; background:url(naver.gif) no-repeat; text-decoration:none; }
a span { position:absolute; z-index:-1; visibility:hidden; }
댓글 쓰기 권한이 없습니다.
2 | Image Sprite 기법이란 무엇입니까? | 2013.08.02 |
> | IR(Image Replacement) 기법이란 무엇입니까? | 2013.08.02 |