IMAGES(그림파일) 불러오기
이것은 그림을 HTML 문서에 연결할 때에 사용한다. 외부파일을 HTML에 불러들이는 형식이므로 과도한 사용은 HTML의
검색을 더디게 한다. 먼저 img에 들어가는 명령어를 살펴 봅시다.
I m g 에 들 어 가 는 명 령 어 |
ALIGN=left, right, top, texttop,middle,absmiddle, baseline, bottom, absbottom |
한 줄 Line에서 그림의 위치와 글자에 대한 상대적 높낮이를 결정한다. |
ALT=설명 |
그림에 대한 ToolTip 즉, 풍선도움말을 지정한다. |
ISMAP (이 부분은 따로 설명 해드리겠습니다.클뤽) |
다른 곳에서 이미지맵<MAP>을 불러들일 때에 사용한다. |
SRC=주소 |
그림이 위치한 주소를 지정한다. |
WIDTH=값, HEIGHT=값 |
그림의 가로, 세로의 길이를 지정한다. 이 때, 그림이 가지는 고유의 값을 지정할 수도 있고, 축소 또는 확대하여 나타낼 수도 있다. 길이를 지정하는 것이 그림이 떠오르는 시간을 줄일 수 있다. |
BORDER=값 |
그림의 테두리를 설정한다. |
VSPACE=(세로)값, HSPACE=(가로)값 |
그림과 글자간의 가로와 세로의 간격을 지정한다. |
LOWSRC
<IMG SRC="그림주소2" LOWSRC="그림주소1"> |
HTML에 접속하면, 브라우저는 먼저 LOWSRC에 지정한 그림을 나타나게 하고,모든 문서가 다 나타났을 때, 그 그림 위에 SRC에서 지정한 그림이 나타나도록 한다. 이 때, 두 그림의 길이를 지정하지 않았다면, LOWSRC의 원래 크기에 해당하는 크기에 맞추어 SRC에서 지정한 그림이 드러나도록 한다. |
NAME |
HTML문서상에서의 그림의 이름을 지정한다. |
※ 이미지 태그는 웹 제작이나 대화방 까페나 게시판을 보시면 만이 삽입 된걸 아실겁니다. 그만큼 중요하기 때문입니다.
그리 어렵지는 안치만 중요하다는 걸 염두해 두시고 공부 하시기 바랍니다.
먼저 이미지를 불러오는 태그는 <img src="이미지주소"> 이렇게 써주시면 됩니다. 여기에서 약간의 속성만 추가 하면
img 공부는 다 끝나다고 볼 수 있습니다.
☞ img의 속성
<IMG SRC="이미지 파일의 URL"> <IMG SRC="이미지 파일의 URL" ALIGN="옵션"> <IMG SRC="이미지 파일의 URL" HSPACE="값"VSPAVE="값"> <IMG SRC="이미지 파일의 URL" BORDER="값"> <IMG SRC="이미지 파일의 URL" HEIGHT=" 값" WIDTH="값"> <IMG SRC="이미지 파일의 URL" ALT="문자열"> <IMG SRC="이미지 파일의 URL" LOWSRC= "작은 이미지 파일의 URL"> <IMG DYNSRC="동영상 파일의 URL"START="옵션"> <IMG DYNSRC="동영상 파일의 URL"CONTROLS> <IMG DYNSRC="동영상 파일의 URL"LOOP= "되풀이 하는 횟수"> <IMG DYNSRC="동영상 파일의 URL"LOOP="되풀이 하는 횟수 "LOOPDELAY="기다리는 시간">
☞ 자 이제 연습해 볼까요. (img는 닫아주는 명려어는 없습니다.)
<img src="http://myhome.hananet.net/~kpy2one/img/smoon.gif"" width="100" height="120">
위 주소를 써주시면 아래 처럼 나온답니다. 원본 이미지는 이보다 크지만 속성을 지정해서 원본보다 작게 나왔죠.
위 테이블에 있는 명령어를 사용해서 다른 것도 응용해 보세요. 그리 어렵진 안을 겁니다.
☞ 이미지와 문자 정렬하기(태그 연습장에서 실행해 보세요.) 이 문장은 이미지 위에 정렬된 것입니다. <IMG SRC="http://dibidib.new21.org/spboard/id/guest/files/오페라하우스.jpg" width=200 align=top> 내용
이 문장은 이미지 가운데 정렬된 것입니다. <IMG SRC="http://dibidib.new21.org/spboard/id/guest/files/오페라하우스.jpg" width=200 align=MIDDLE> 내용
이 문장은 이미지 아래 정렬된 것입니다. <IMG SRC="http://dibidib.new21.org/spboard/id/guest/files/오페라하우스.jpg" width=200 align=bottom> 내용
☞ 필터 태그 명령어 사용하는 방법은 따로 작성해놨습니다.(맨 위의 메뉴에서 Filter태그 선택)
☞ 백그라운드에 배경그림과 배경 컬러 집어 넣기는 다음장에서 강의 합니다.(밑에 다음으로 클뤽) |