대체 텍스트란?
네이버의 예)

이미지 읽기에 실패하거나 사용자가 이미지보기를 X 했을경우 네이버에서는 대체 텍스트를 보여줍니다.






이미지를 로딩에 문제가 있거나 사용자가 이미지 보길 원치 않을 경우 대체 텍스트가 보여집니다.





미리보기 http://blog.playcast.kr/html/ex7/noname.html

사용방법은 아래와 같습니다.

<span class="img_button">
<a href="http://naver.com" class="img1" title="Naver">
<em class="h1">Naver</em></a>
</span>

span 에 쓰인 선택자는 img_button으로 하시고요
a 에 쓰인 img1 은 css에 사용자가 지정한 선택자를 쓰시면 됩니다.
em 에 쓰인 선택자는 대체 텍스트 크기를 선택하는건데요 h1 ~ h6 까지 있습니다. (수정하셔서 쓰시면됩求�. h6이 작습니다.

CSS

/*
대체 텍스트가 포함된 이미지 링크
김현석(egghyun)
http://blog.playcast.kr/egghyun/
*/
span.img_button{}
span.img_button{position:relative;display:inline-block;}
span.img_button em{font:12px 굴림,Gulim;position:absolute;display:block;z-index:-1;top:0px;left:0;font-style:normal;vertical-align:middle;}
span.img_button em.h1{font:bold 24px 굴림,Gumil;}
span.img_button em.h2{font:bold 22px 굴림,Gulim;}
span.img_button em.h3{font:20px 굴림,Gulim;}
span.img_button em.h4{font:18px 굴림,Gulim;}
span.img_button em.h5{font:12px 굴림,Gulim}
span.img_button em.h6{font:11px 돋움,Dotum;}
span.img_button a{display:inline-block;overflow:hidden;background-repeat:no-repeat;}
/* 아래 사용자 버튼의 이미지와 크기를 지정해서 추가하세요 */
span.img_button a.img1{background:url(naver.jpg);width:141px;height:27px;}
span.img_button a.img2{background:url(daum.jpg);width:141px;height:27px;}
span.img_button a.img3{background:url(google.jpg);width:141px;height:27px;}
span.img_button a.img4{background:url(sir.jpg);width:110px;height:44px;}
span.img_button a.img5{background:url(xe.jpg);width:70px;height:40px;}
span.img_button a.img6{background:url(egghyun.jpg);width:41px;height:14px;}



대체 텍스트를 쉽게 넣자!