본문 바로가기

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

이미지 바꿔치기_FIR방법

css의 background(혹은 background-image)속성을 사용해 텍스트 대신 이미지를 표시하도록함
id값을 부여해 이 머리글을 css로 완벽하게 제어
------------------------------------------
#fir {width:200px; height:50px; background: url(fir.gif) no-repeat;}
#fir span{display: none;}

<h1 id="fir"><span>Father Image Replacement</span></h1>
------------------------------------------
마크업을 수정하지않고 css로 이미지를 지정했지 때문에 css를 지원하지 않는 블주어나 장치에서는 이미지 텍스트를 확실하게 표시
마크업을 수정할 필요없이 css파일만 수정하면 쉽게 그래픽 이미지를 다른것르로 교체

장애인 프로그램에서 문제점 발생(읽지를 못함)
의미없는 span을 사용해야한다.