이미지의 표현
HTML에서 이미지를 표현하기 위해서는 <img> 태그를 사용한다.
문법(Syntax)
<img src="이미지가 위치하는 URL" alt="대체텍스트" width="폭" height="높이" longdesc="링크" />
- src : source의 약자로 이미지가 위치하는 URL을 기술한다.
- alt : alternative의 약자로 한국어로는 대체 텍스트라고 부른다. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다. 시각장애인을 위한 장치와 검색엔진에서도 사용된다.
- width, height : 이미지의 크기
- longdesc : 이미지와 관련된 링크
설명(Description)
- 이미지를 로드해서 화면에 표시함
- alt는 대체 텍스트를 활용해서 시각장애인, 저사양,저속도 사용자, 이미지가 유실되는 상황에 대비해야 함.
예제(Example)
example1. 이미지 태그를 사용하는 다양한 방법 (jsfiddle, github, ?)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> 이미지 로딩 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" /><br /><br /><br /> 대체 텍스트 사용 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" alt="생활코딩 로고" /><br /><br /><br /> 대체 텍스트 사용, 존재하지 않는 이미지 로딩 : <br /><img src="http://farm7.staticflickr.com/6234/empty.jpg" alt="생활코딩 로고" /><br /><br /><br /> 이미지의 크기 지정 : <br /><img src="http://farm7.staticflickr.com/6234/6233942894_0a917abbf0_s.jpg" width="50" /><br /><br /><br /> </body> </html>
