본문 바로가기

웹표준화/실용예제로 배우는 웹표준

이미지 바꿔치기_LIR방법

텍스트를 감추기위해 display 속성을 사용하는 대신 텍스트를 포함하는 태그의 높이를 0을 지정하고 padding-top값을 바꿔치기할 이미지와 같은 값으로 지정
별도의 span을 슬 필요가없다.
----------------------------------------------------
#lir{
padding:90px 0 0 0;
overflow:hidden;
background: url(lir.gif) no-repeat;
height: 0p; /* 대부분의 웹브라우저를 위한 명령 */
height: 90px; /*IE5를 위한 명령*/
}
<h1 id="lir">Leahy/Langridge Image Replacsment</h1>
----------------------------------------------------
대부분의 웹브라우저에서는 높이를 0으로 지정하면 텍스트가 표시되지않는다.

텍스트를 숨기기위한 display속성을 사용하지 않기 때문에 스크린리더 프로그램에서 문제가 발생하지않는다.