이미지 대치(image replacement)

html에서 명확성을 위해서 가능한 이미지대신에 텍스트를 사용하는것이좋다.하지만 웹디자인너들이 선택할수 있는 폰트의 제약이 있고 css를 사용해서 특정스타일만 지정할 수 있기에 텍스트만으로 처리하기에 불가능한 경우가 있다. 로고를 보여준다던지..할때 그 예를 들수있다. 이를위해 이미지를 넣는 대신에 이미지대치기법을 사용한다.

호고를 단순히 이미지만으로 넣을경우 검색엔진에 텍스트는 무시될 수 있다. 따라서 텍스트는 검색되고 원하고자하는 이미지를 넣을때 사용되는것이 이방법이다.그방법들을 보자

FIR 방법

토드 파너가 만든 FIR(Fahrner Image Replacement) 방법이다.

이미지 대치

h2{ background: url(image.gif) no-repeat 0 0;
   width:70px; height:50px;/*이넓이와 높이는 이미지 크기 이다.*/     
   }
h2 span{dispay:none;}

먼저대치하고자하는 텍스트가 포함된 태그에 span을 넣고 sapn부분이 보이지않게 dispay:none;으로 처리하는 방법이다. 문제는 dispay:none; 로 적용할경우 몇몇은 역시 텍스트를 검색시 읽어주지않는다는 점이다. 이럴경우 오히려 접근성이 더 떨어지고 만다.

파크방법

이미지 대치

h2{ background: url(image.gif) no-repeat 0 0;
      text-indent:-9999px;
      width:70px; height:50px;
   }

이방법은 간단하고 span같은 불필요한 태그를 넣을 필요도없고 문서검색에도 문제는 없으나 여러번사용시 로딩에 문제가있다

갈빈/ 레더법

이미지 대치

h2{position:relative;width:70px; height:50px;}
h2 span{background: url(image.gif) no-repeat 0 0; position:absoute;
             width:100%; height:100%
}

이방법은 span태그가 가로세로를 100%로 잡으면서 텍스트위를 덥도록하는 방법이다. 단점은 태그를 보다시피 불필요한 태그를 마크업에 추가한다는점이며 도한 투명그림은 뒤의 텍스트가 비칠수 있기때문에 사용하지못한다.

여러 사이트의 CSS를보면 알수있겠지만 파크 방법이 가장 많이사용되고 있다.

저작자표시

샷타이거's Simple Blog

CSS 이미지 대치 기법

이미지 대치(image replacement)

FIR 방법