본문 바로가기

html

07.img태그 _ Images


Img태그는 말그대로 이미지를 불러오는 태그입니다.


파일경로를 이용해 이미지를 화면에 출력합니다.
이 태그는 다른 태그들과 달리 혼자 닫는 태그입니다. 상당히 심플합니다.
다른 태그들은 <태그>내용 이렇게 생긴 반면에 img태그는 짝궁이 붙지 않고 혼자 /로 닫아줍니다.



<img src="url" alt="이미지에 대한 설명"/>
 

src 속성

이곳에 이미지의 경로를 넣어줍니다
경로에는 절대경로와 상대경로가 있는데 (이 다음번에 자세히 설명합니다.)
이 경로를 따라가 이미지를 출력합니다.
참고로 아래에 http://... 는 절대경로입니다.


<img src="http://ododog12.com/img/img/img_tv.png" alt="TV 일러스트"/>
<span> TV 입니다. </span>
 
TV 일러스트

alt 속성

alt에는 이미지의 설명을 넣어줍니다.
alt는 이미지를 보지 못하는 경우에 이미지의 쓰임새 및 내용을 알려줍니다.
alt태그는 웹표준을 지킬때 꼭 들어가야 하는 필수요소로 img태그와는 항상 같이 다니는
짝궁이라 생각하면 됩니다.
앞을 보지 못하는 사람들의 경우 특별한 리더기로 웹을 읽어들여 사용하는데
img의 경우 출력이 불가합니다.
이때 alt속성을 써주면 리더기는 alt에 쓰인 내용을 읽어주게 됩니다.
그렇기 때문에 alt의 내용은 이미지의 기능을 보다 자세하게 써주는 것이 좋겠지요.
특히 이미지텍스트나 이미지버튼의 경우 기능을 작동시키는 부분이기 때문에
정확하게 표현해 주어야 합니다.


* 개인적인 공부를 정리하는 블로그입니다.

'html' 카테고리의 다른 글

09. a태그 _ Links  (0) 2015.10.27
08. 파일경로 _ 절대경로, 상대경로  (0) 2015.10.19
06. strong태그, em태그 _ paragraph 구성요소  (0) 2015.10.06
05. p태그 _ paragraphs  (0) 2015.10.06
04. h태그 _ headings  (0) 2015.10.06