이미지넣기

이미지 넣기

■■■■
■■■■■■■■
■■■■■■■■■■■■

문서의 헤더	글꼴과 문자열의 강조	문단 나누기	목록명령어	다른 문서 연결하기	이미지 넣기	TABLE 만들기	HTML 주석

문서내에는 GIF, JPG, XBM(흑백) 등의 이미지 파일을 넣을 수 있다.

 <IMG SRC="url"
      ALT="text"
      ALIGN=[top|middle|bottom|left|right]
      WIDTH=[pixels|percentage]
      HEIGHT=[pixels|percentage]
      BORDER=pixels
      VSPACE=pixels
      HSPACE=pixels     
      ISMAP>

<IMG SRC="url">: SRC는 그림의 위치를 지정하는 속성이다. 넣고자 하는 그림파일이 있는 곳의 경로를 URL 부분에 지정한다.
<IMG SRC="url" ALT="text">: 그림을 표시하지 못하는 웹브라우저가 텍스트 상태로 웹 검색을 할 경우 이미지를 로딩할 수 없다. 이런 경우에 텍스트로 그림 내용을 써서 보여 줄 수 있다. 다음의 예제에서 /icons/up.gi을 보여줄 수 없을 경우에는 "위로"라는 텍스트를 보여준다. 사용자 편의를 위해서 가능한 적어주는 것이 좋다.

<IMG SRC="/icons/up.gif" ALT="위로">
<IMG SRC="url" ALIGN=[top|middle|bottom|left|right]>: 이미지에 뒤이어 나오는 문장을 이미지의 오른쪽에서 위/가운데/아래 에 붙일 것인가를 지정하는 곳이다. 아무런 지정이 없다면 밑으로 붙 인다.; left : 그림이 왼쪽에 오며, 텍스트는 오른쪽 빈 공간에 메워진다.; rigth : 그림이 오른쪽에 오며, 텍스트는 왼쪽에 메워진다.

[결과를 보시려면 여기를 누르세요.

<IMG SRC="/cartoon/tiger.gif" ALT="호랑이">호랑이 <IMG SRC="/cartoon/tiger.gif" ALIGN=top>호랑이 <IMG SRC="/cartoon/tiger.gif" ALIGN=middle>호랑이 <IMG SRC="/cartoon/tiger.gif" ALIGN=right>호랑이
<IMG SRC="url" WIDTH=n HEIGHT=m>: 이미지의 폭과 높이를 지정하는 것으로 n, m은 %나 pixel단위이다. %단위는 브라우저 화면의 크기에 비례한다.

[결과를 보시려면 여기를 누르세요.]

<IMG SRC="/cartoon/tiger.gif" WIDTH=50> <IMG SRC="/cartoon/tiger.gif" HEIGHT=50%> <IMG SRC="/cartoon/tiger.gif" WIDTH=50 HEIGHT=50 ALIGN=middle>
<IMG SRC="url" BORDER=n>: 화면에 나타난 이미지에는 일반적으로 테두리가 없다. BORDER는 이미지의 테두리를 표시하며 n은 테두리의 굵기를 나타낸다.
<IMG SRC="url" HSPACE=n VSPACE=m>: 이미지 주위에 여백을 만들어 준다. HSPACE는 좌/우 여백을, VSPACE는 위/아래 여백을 말한다.

[결과를 보시려면 여기를 누르세요.]

<IMG SRC="/cartoon/tiger.gif" BORDER=2> <IMG SRC="/cartoon/tiger.gif" BORDER=10> <IMG SRC="/cartoon/tiger.gif" HSPACE=20> <IMG SRC="/cartoon/tiger.gif" HSPACE=40 VSPACE40 ALIGN=middle>
<IMG SRC="url" ISMAP>: 이미지를 지도로 표시하여 나타내고 싶을 때 사용하는 것이다. 즉,그림의 특정 영역과 어떤 문서를연결시키는 기법을 이미지 맵(image map)이라고 한다.; 이미지 맵을 만들려면 해당 그림이 이미지 맵이라는 것을 알려주어야 하고, 또 그림의 영역을 구분하여 각 영역에 문서를 연결시켜야 하다. 이것은 다음과 같이 <A HREF>태그와 <IMG ISMAP> 태그를 같이 상요하여 가능하다.

<A HREF="좌표 URL"><IMG SRC="그림 URL" BORDER=0 ISMAP></A>

여기에서 "그림 URL"은 화면에 나타날 그림 파일의 위치를 가리키고, ISMAP 속성을 주어 이 그림이 이미지 맵임을 가리킨다. "좌표 URL"은 그림의 어느 부분이 어떤 문서와 연결되는지에 대한 리스트를 포함하는 파일의 위치이다. 좌표 파형식은 서버의 종류에 따라 다르다.

포항 공대의 sensitive map(http://firefox.postech.ac.kr/map/)은 이미지 맵을 이용한 것이다.

세련된 이미지를 구할 수 있는 사이트

http://dblab.changwon.ac.kr/~inho/image_gallary.html

http://cafe.postech.ac.kr/~shoon/images/

http://www3.aminet.co.kr/~rainlee/

http://www.cbil.vcu.edu:8080/gifs/bullet.html

http://users.unitel.co.kr/~dschoi/

http://www.marketwizz.com/backgrounds2/

http://www.columbia.edu/~jll32/backgrounds/

http://www.pitt.edu/~slcst19/icon.html

문서의 헤더 글꼴과 문자열의 강조 문단 나누기 목록명령어 다른 문서 연결하기 이미지 넣기 TABLE 만들기 HTML 주석

☜DB Lab.

▲홈페이지 작성법

◀Prev. Chap.

▶Next. Chap.

DB Lab. Home	Welcome to Database Laboratory in Changwon National University !	Univ. Home

Drop any comments or suggestions to : ytwoo@sarim.changwon.ac.kr
Copyright(C) 1996. YongTae Woo, Database Laboratory, Changwon National University
Tel. 82-551-79-7423 Fax. 82-551-79-7680 All rights reserved.