이미지의 표현
HTML에서 이미지를 표현하기 위해서는 <img> 태그를 사용한다.
문법(Syntax)
1 | <img src= "이미지가 위치하는 URL" alt= "대체텍스트" width= "폭" height= "높이" longdesc= "링크" /> |
- src : source의 약자로 이미지가 위치하는 URL을 기술한다.
- alt : alternative의 약자로 한국어로는 대체 텍스트라고 부른다. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다. 시각장애인을 위한 장치와 검색엔진에서도 사용된다.
- width, height : 이미지의 크기
- longdesc : 이미지와 관련된 링크
설명(Description)
- 이미지를 로드해서 화면에 표시함
- alt는 대체 텍스트를 활용해서 시각장애인, 저사양,저속도 사용자, 이미지가 유실되는 상황에 대비해야 함.
예제(Example)
example1. 이미지 태그를 사용하는 다양한 방법 (jsfiddle, github, ?)
1 2 3 4 5 6 7 8 9 10 11 12 | <!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 > |