- <img src="그림파일이있는위치">:기본적인 형태입니다.
- IMG : 그림(image)을 가르키는 단어입니다.
- SRC : 물론, 주소를 말하고요...
- ALIGN="CENTER" : 정렬시킬 위치('LEFT', 'RIGHT','CENTER')
- ALT="설명" : 그림위에 마우스가 올라갔을때 풍선설명박스가 보이도록합니다.
- BORDER='0' : 그림의 테두리 두께를 지정합니다.
- VSPACE="(세로)값" : 그림과 글자간의 세로간격.
- HSPACE="(가로)값" : 그림과 글자간의 가로간격.
- WIDTH="가로수치" : 그림의 가로크기를 지정(원본이미지보다 크게하거나 적게보이게 할때 사용).
- HEIGHT="세로수치" : 그림의 세로크기를 지정합니다(원본이미지보다 크게하거나 적게보이게 할때 사용).
그리고 그림파일을 많이 올릴 때 그림의 크기를 미리 지정해 주면 그림이 뜨는 시간을 줄일 수 있다합니다.
<img src=img.gif" width="200" height="200">와 같이.... - .gif, .jpg, .bmp, .jpeg.... 그림 파일의 확장명.(이 외에도 그림 파일의 확장명은 많습니다. 저도 다 모를 정도로요... 그렇지만 보통 인터넷에서는 gif, .jpg, .jpeg, .bmp 정도를 많이 쓰고 다른것은 거의(?) 쓰지 않습니다.)
기본형 -- <img src="이미지 주소">
이미지 설명태그 -- <img src="이미지주소" alt="이미지 설명쓰는 곳">
alt="이미지 설명쓰는 곳"에서 이와같이 사용한다면 [이미지 설명쓰는 곳]라는 문장이 온전히 보이게 되나,
alt=이미지 설명쓰는 곳처럼 문장에 따옴표로 묶어주지 않을경우에는
[이미지]라는 단어만 보이게 됩니다.
필히 설명은 따옴표로 묶어서 사용하는 버릇을 기르길 바랍니다.
긴문장일 경우 설명의 줄바꿈은 "\n"(역슬레쉬+소문자N)으로 <BR>태그의 효과를 얻을 수 있습니다.
그림에 마우스를 올려보세요 ^^*
그림의 위치정열 태그 <img src="이미지주소" align="수평위치">
위치는, "left" 또는 "right"로 합니다.아래에 첫번째 그림은 왼쪽이고, 그 다음은 오른쪽으로 정열시켜보겠습니다.그림크기조절 -- <img src="이미지주소" width="가로넓이(픽셀수치)" height="세로높이(픽셀수치)">
위와 같은 태그를 사용하면 그림을 왼쪽으로 정열시킬 경우는 글자가 그림의 오른쪽으로 차근 차근 내려쌓입니다. 그러나 위와 같은 태그를 사용하지 않는다면 그림과 글씨가 어울리기 힘이듭니다 .
예를 든다면
그림의 테두리 -- <img src="이미지주소" border="테두리 굵기수치">
이 태그는 액자효과를 낼 수도 있으며, 이미지에 링크를 시킬경우에 생기는 테두리를 없에는 효과도 줄 수 있습니다. 링크된이미지에 테두리가 생기면 어느모로 보더라도 보기에는 안좋습니다.이곳에 들어가는 숫자는 숫자의 크기가 클수록 테두리는 두꺼워집니다.첫번째 그림은 테두리 수치를 "0"으로, 다음은 "1"로, 그 다음은 "10"으로 설정해 봅니다. 링크된 이미지는 테두리가 안보이나 마우스가 올라가면 테두리가 생깁니다.그것을 방지하기 위해 링크이미지는 테두리를 "0"으로 설정하는 것이 좋습니다.
예를 들어서 그림에 문서를 링크를 시킬경우에는
<a href="문서의주소"> <img src="이미지주소"> </a> 와 같은 식으로 한다면,
와 같이 보통은 파란색으로 테두리가 생겨서 보기에도 안좋아 보이지만,
<a href="문서의주소"> <img src="이미지주소" border="0"> </a>와 같은 식으로 한다면,
