[HTML] 이미지 태그 - IMG 태그

 이미지를 표시해 주는 태그는 IMG 태그입니다. src 속성을 이용하여 이미지 경로를 지정해 주고 align 속성을 이용하여 이미지의 위치를 지정합니다. width와 height 속성으로 이미지 크기를 지정하고 alt 속성으로 대체 문자를 지정하는 방법을 설명드리겠습니다.

1. 기본구조

<img src="./fruit.jpg" align="top">
<img src="http://fruit.co.kr/fruit.jpg" align="center">

 src 속성을 이용해서 파일의 경로를 적어 줍니다. 작성하는 웹문서를 기준으로 로컬경로를 적어주거나 인터넷 URL을 입력할 수 있습니다.

 align 속성은 이미지를 정렬하는 방식을 적을 수 있습니다. left | right | center 는 좌측, 우측, 중앙 정렬을 의미합니다. top | middle | bottom 중에 입력하게 되면 이미지와 텍스트를 어울리게 배치할 때 텍스트의 시작 위치가 위, 가운데, 아래 중에서 지정됩니다.

2. 이미지 크기 변경

<img src="fruit.jpg" width="500" height="300">

width 속성은 가로 너비, height 속성은 세로 길이를 지정합니다. 원본 이미지의 크기를 따르지 않고 별도로 지정할 때 쓰이며 픽셀단위나 화면의 % 단위로 지정이 가능합니다.

3. 대체문자 지정

<img src="fruit.jpg" width="500" height="300" alt="과일사진">

 대체문자는 브라우저에서 이미지를 지원하지 않거나(요즘에 이런 브라우저는 없겠죠^^) 이미지를 표시하지 않게 설정된 경우에 보여지는 이미지 설명 문구를 의미합니다. alt 속성을 이용해서 입력하게 되는데 최근에는 검색엔진에서 이미지 검색을 할 때, alt 속성에 입력한 텍스트를 기준으로 보여주게 되므로 대체문자를 입력해 주는 것이 좋습니다.

4. 제목 지정

<img src="fruit.jpg" width="500" height="300" alt="과일사진" title="맛있는 과일">

 이미지에 제목을 지정해 주는 부분입니다. title 속성을 이용하여 이미지의 제목을 붙여줍니다. 이미지 위에 마우스 포인터를 이동하게 되면 입력한 제목이 말풍선 형태로 나타납니다. 예전에 HTML4.0에서는 alt 속성으로 지정한 대체문자가 말풍선으로 나타났었던 것으로 기억되네요.