[ HTML ] img/ 이미지태그의 모든것

 이미지 테두리

가장 기본적인 이미지 태그 입니다.
<img src="이미지주소">

그럼 그냥 요로케 이미지가 나타나게 됩니다.

---

이미지에 테두리를 줘보겠습니다.
<img src="이미지주소" border="1">

그럼 이미지에 1 만큼의 두께의 테두리가 생겼습니다.

당연히 border="숫자"의 크기가 높을수록 테두리 두께가 두꺼워 지겠지요.

---

 이미지 링크

<a href="링크주소"><img src="이미지주소"></a>

이미지에 그냥 링크를 걸면 , 이미지 주위로 파란색 테두리가 생기게 됩니다.
이럴때는 뒤에 border="0" 을 적어주면 파란색 테두리가 사라지게 됩니다.

<a href="링크주소"><img src="이미지주소" border="0"></a>

---

 이미지옆의 글자 위치

<img src="이미지주소" align="top">  
그림의 위쪽과 텍스트의 위쪽을 나란히 하여 한 줄의 텍스트만 들어갑니다.

<img src="이미지주소" align="middle">
그림의 중간부분을 기준으로 한 줄의 텍스트만 들어갑니다.

<img src="이미지주소" align="bottom">
그림의 아래쪽을 맞추어 한 줄의 텍스트만 들어갑니다.

 이미지옆에 글을 적어보자

<img src="이미지주소" align="left">이곳에다가 글을 막 써주세요 ^^
 = 그림은 왼쪽, 글자는 오른쪽에 여러 줄로 들어갈수가 있습니다.

<img src="이미지주소" align="right">이곳에다가 글을 막 써주세요 ^^
 =  그림은 오른쪽, 글자는 왼쪽으로 여러줄이 들어갈 수가 있습니다.

위 소스를 보시면 이미지 옆으로 글이 넘 붙어있는걸 볼 수 있습니다.
그럼 지금부터는 이미지와 글자사이의 공간을 주는 속성에 대해서 알아보겠습니다.

---

<img src="이미지주소" align="left" vspace="10" hspace="10"> 글을 적어주세요.
 = vspace / hspace 는  그림과 글자 사이의 상하 여백과 좌우 여백을 픽셀로 지정해 줍니다.

어떤가요? 확실히 그림과 글자사이에 여백이 생기니깐 보기도 좋고 읽기도 편해집니다.

 이미지 크기 조절하기

<img src="이미지주소" width="100" height="200">
 = width=가로 숫자, height=세로 숫자 입니다.

가로 세로의 길이가 변했습니다. ^^

 이미지에 설명글 넣기

<img src="이미지주소" alt="이미지설명글적기">
 = 그림에 대한 설명을 적습니다. 마우스를 그림위로 가져갔을때 풍선도움말로 이미지의 설명이 나타납니다.
만약 두 줄 이상의 설명문을 줄을 바꿔 나타내려면, 줄이 바뀔 지점에 &#10;을 넣어주세요.
예) <img src="이미지주소" alt="희야의웹하우스&#10;티스토리블로그">