그림 사용의<br> 예
그림 사용의예
대부분의 Web 브라우저에서는 글자들과 함께 나오는 in-line 이미지들을 보여준다. 이때 제공되는 이미지는 XBM/GIF/JPG 파일 포맷이어야 한다.
<IMG SRC="image_URL">
위에서 image_URL은 이미지 파일이 있는 위치를 나타내는 URL로서, 파일이 그림이어야 한다는 것을 제외하면 <a> tag에서 사용된 HREF와 사용법이 동일하다. 만약 이미지 파일이 GIF의 형식을 사용하는 것이라면 image_URL은 반드시 .gif의 확장자를 가져야하며, X Bitmap인 경우에는 .xbm의 확장자를 가져야만 한다.
이미지도 다른 문자와 마찬가지로 링크로 사용될 수 있다.
[예]
<a href="first.html"><img src="UpArrow.gif"></a>
| BOTTOM: | 그림의 하단과 텍스트를 일치시킨다. |
| TOP: | 그림의 상단과 텍스트를 일치시킨다. |
| MIDDLE: | 그림의 중앙에 텍스트를 일치시킨다. |
| LEFT: | 그림이 왼쪽에 오며, 텍스트는 오른쪽 빈 공간에 메워진다. |
| RIGHT: | 그림이 오른쪽에 오며, 텍스트는 왼쪽에 메워진다. |
<IMG SRC="UpArrow.gif" ALT="위로">
위에서 보면 UpArrow.gif는 위쪽으로 올라가는 기능을 나타내는 화살표 그림이다. Lynx와 같은 VT100환경에서 브라우저를 사용하는 경우라면, 사용자는 이미지 대신 "위로"라는 글자를 보게 된다.
| WIDTH, HEIGHT: | 그림의 폭과 넓이를 변경한다. 그림의 축소,확대를 위해 사용될 수 있다. |
| HSPACE, VSPACE: | 그림 좌우, 상하에 여백을 준다. |
| BORDER: | 그림 주위에 테두리를 그린다. 그림이 링크된 경우 푸른 테두리가 나타나게 되는데, 이 테두리를 없애려면 border=0을 지정하면 된다. |
| <img src="sample.html"
align=right width=100 height=50 vspace=10 hspace=20
border=8> 그림 사용의<br> 예 |
그림 사용의 예 |
일반적으로 사진은 JPG 포맷으로, 색상 수가 적은 그래픽은 GIF 포맷으로 제공하는 것이 효율적이다. 특히 GIF는 인터레이스드 모드를 사용하는 것이 좋다. 유틸리티를 이용하여 GIF 파일은 배경을 투명하게 만들 수도 있다. 그리고 가급적이면 색상 수를 줄여 파일 크기를 작게 해 주어야 전송속도를 향상시킬 수 있다. 또한 ALT attribute를 사용하여 text 환경의 사용자들도 알아 볼 수 있게 하여야 한다.
이미지를 확대 축소하지 않더라도, WIDTH와 HEIGHT attribute를 사용하는 것을 권장한다. 이는 그림 파일이 모두 전송되어 오기 이전에 텍스트를 먼저 브라우저의 화면에 나타나게 할 수 있으므로 전송속도를 향상시키는 효과를 가져온다.