이미지 태그

◆ 이미지의 제작
우선 그래픽용 프로그램을 이용하여 자신이 원하는 이미지를 만들거나 편집을 한다.홈페이지에 이미지를 넣기 위해서는 다음과 같은 태그를 이용

한다.
<Img Src="Image.Gif Or Image.Jpg>
Alt 안의 Text는 Netscape나 Mosaic이 아닌 Lynx와 같이 이미지를 지원하지 않는 브라우저인 경우에 그림 대신에 나타날 글이다.요즘의 브라우

저는 여기에 글을 쓰는 경우 그림 위로 마우스 포인터가 올라갔을 때,   풍선도움말과 같이 나타난다.
  → Vspace는 아래와 위, Hspace는 양 옆의 여백을 지정한다.
  → Width와 Height는 각각 가로와 세로 화면의 현재 윈도우 크기의 비율을 나타 낸다.                        퍼센티지일 경우는 뒤에 %를 붙여야 한

다.
  → Border는 그림 경계선의 굵기를 지정한다. 0일 경우는 경계선이 생기지 않는다.
  → Align은 그림 옆에 올 텍스트를 정렬하는 방식이다. 디폴트로 Bottom으로 정렬되어 있다.                        Left로 지정하면 그림의 오른 쪽에

글을 여러 줄 쓸 수 있게 된다.
◆  이미지의 최적화
홈페이지내에서는 이미지가 너무 크면 배치상의 문제도 생기고 로딩속도를 저하시키는원인이 되므로 이미지의 사이즈나 배치등을 고려하여 이미

지를 최적화하는 것이 중요하다. Gif 포맷이나 Jpg 포맷의 파일을 넣어 주면 된다.(Gif는 256 칼라까지만 지원을 하므로 색상 수가 많을 때는 Jpg

를  쓰는 것이 유리하다. Jpg 파일은 압축률도 좋기 때문에 크기가 큰 그림일 경우에 쓰는 것도 좋다.)

2. 이미지배치
홈페이지를 제작하는데 있어 그래픽도중요하다 하지만 너무나 많은 그래픽을 요하는 홈페이지는 진정한 정보전달의 의미를 간과하지 않을 수없

다.
Text위주의 홈페이지는 글자의 단조로움이 있으나 로딩속도는 매우 우수하다.
Image위주의 홈페이지는 보기에는 좋으나 로딩속도를 저하시키는 원인이기도 하다.
적절한 이미지 배치를 위한 사항으로는 다음과 같다.
 ㄱ. 해상도를 조절하여 이미지의 데이터 양을 줄인다.(256 컬러가 가장적당)
 ㄴ. 글자를 중심으로 배치하는 경우에 사용되는 태그
               <Img Src="그림화일명.Gif" Align=Left,Right,Center>
 ㄷ. 그림을 중심으로 배치하는 경우
 <Imgsrc="Home.Gif"        
                       Align=Top,Texttop,Middle,Absmiddle,Baseline,Bottom,Absbottom>
◆ 이미지 배치의 3요소
 1. 표 : 표를 만드는 것처럼 이미지도 하나의 데이터 처럼 배열이 가능하다.
 2. 태그 : 가장 기본 적인 이미지 배치방법이다.

3.이미지와 글자 혼합하기
 이미지의 옆에 글자쓰기
 Img 태그의 Align요소에 따라 글자의 위치를 지정 할수 있다.
        1. 글자가 이미지의 오른쪽 상단부분 부터 본문의 시작  
 2. 글자가 이미지의 왼쪽 상단부분 부터 본문이 시작  
 3. 글자가 이미지의 왼쪽 하단부분 부터 본문이 시작
 4. 이미지와 본문 사이의 간격 조절 
 5. 본문이 이미지의 밑부분에서 시작
 6. 이미지가 제대로 전송되지 않을 경우 문자를 표현해 준다
 

4. 이미지의 여백과 테두리
이 기능은 브라우져 자체의 기능으로 바탕과 같은 이미지를 삽입하여 문자가 그 위치에 오지 못하도록 하여 여백을 만들어 준다.
◆ 주요태그
 <Img Src "Apple.Jpg" Vspace=30 Hspace=30>
  * Hspace: 이미지의 좌우측 여백을 지정한다.
  * Vspace: 이미지의 상하 여백을 지정한다.
  <Img Src "Orange.Jpg" Border=3>
  : 이미지 주위에 테두리를 만들어 준다.
  * Border=0 이면 테두리가 없어진다.
자! 이제 최초의 그림을 웹페이지에 넣어봅시다.

<Img Src="Bag1.Gif" Alt="화랑그림"><P>
<Img Src="Bag1.Gif" Alt="화랑그림" Width=100 Height=100> <P>

Img 태그는 말그대로 그림을 삽입하는 역할을 합니다. 그리고 이것은 종료태그를 사용하지 않습니다. 위에서 Src=Img.Gif 부분은 단순히 그림의

이름을 적어준 것은 아닙니다. 이것은 Body 태그에서 설명하였듯이 그림의 Url을 적어주는 것입니다. Url이라.. 아직도 그냥 넘어가도록 하죠.

'Width=108 Height=125' 부분은 그림의 가로 세로 크기(단위: 픽셀)를 지정해주는 것입니다. 만약 이 부분을 생략하면 브라우저는 원래크기를 출

력합니다. 단 지정해 주는 것이 좋습니다. 브라우저가 그림크기를 일일이 계산할 필요가 없으므로 페이지를 빨리 뜨게합니다. 이제 같은 그림으로

크기를 바꿔 볼까요?

<Img Src=Img.Gif Width=108 Height=55 Alt=공줘! Border=0>

 Alt 속성은 그림에 대한 설명부분입니다. 그리고 그림이 나타나지 않는 경우(로딩 시간을 줄이기 위하여 이미지가 브라우저에 나타나지 않도록

설정해서 사용하기도 합니다)에도 똑같은 기능을 수행하도록 하죠.

위 그림을 보면 가장자리에 테두리가 나타나 있을 겁니다. 이것은 Border의 값을3으로 해준 것인데 취향에 따라 적절한 값을 선택하면 되겠습니

다. 테두리를 나타내지 않으려면 Border=0(기본값)입니다. 잘 기억해 두십시오. 마지막으로 글과 그림이 어떤 식으로 정렬되는 지 알아보기로 하

죠.
<Img Src="Bag1.Gif" Width=200 Height=200 Border=0>
<Img Src="Bag1.Gif" Width=200 Height=200 Border=5>
<Img Src="Bag1.Gif" Width=200 Height=200 Border=10> <P>
<Img Src=Img.Gif Width=108 Height=125 Align=Bottom>

 정렬 속성 Bottom 입니다. 바닥에 글자가 나타날 것입니다. 그림도 하나의 글자로 취급하므로 한줄이 넘어가면 다음글은 그림 밑에 나타나죠. 

<Img Src="Test.Gif" Align=Top>Top<Br>
<Img Src="Test.Gif" Align=Middle>Middle<Br>
<Img Src="Test.Gif" Align=Bottom>Bottom<Br>
<Img Src="Test.Gif" Align=Left>
이 그림은<Br>
경주 문화 엑스포<Br>
마스코트입니다.<Br>
화랑의 이미지를<Br>
현대에 맞게<Br>
편집했다는군요<Br>
어때요 귀엽지않나요 <Br><Br><Br>

 정렬 속성 Middle 입니다. 그림중간 위치에 글자가 나타날 것입니다. 마찬가지로 한줄이 넘어가면 다음글은 그림 밑에 나타나죠.  또 다른 정렬

속성값으로 Top, Left, Right을 지정할 수 있는데, Top의 경우는 그림의 윗부분에 글자가 위치할 뿐 Bottom이나 Middle와 기능이 같으므로 설명하

지 않겠습니다. 아래 예제는 Align을 Right로 지정한 것입니다. 정렬 속성 Right입니다. 글이 한줄이 넘어가도 그림과 어울리게 표현됩니다. Right

는 오른쪽 Left는 왼쪽으로 정렬되는 것은 아시겠죠?

(Img Src="파일명" Lowsrc="이미지파일2")<Br>
(Img Src)태그에 Lowsrc 옵션으로 이미지를 지정하면 2단계로 표시할수 있다.<Br>
대개 Lowsrc쪽에 용량이 작은 이미지파일을 지정한다.<Br>
(Alt옵션으로 이미지 대신 글을 표시하듯이 적은 용량의 그림을 먼저 띄운다.)<Br><Br><Br>
<Img Src="Bag1.Gif" Lowsrc="Test.Gif"> <Br>

그림에 Link시키는 방법
<P><A Href="링크.Htm"><Img Src="Test.Gif" Align="Top" Width="50" Heigt="50" Border="2">1111111</A><P>

<Marquee>
MS-EXPLORER 확장 기능에 스크롤하는 문자열(Marquee)을 만드는기능이 있다. 이를 위해 사용되는 것이 <marquee> 태그로써 위치나 움직임

등 다양한 설정을 할수 있다.
. 위치에 관한것
align=top, middle, bottom(문자열의 위치)
height=픽셀수나 %(문자열의 높이)
width=픽셀수나 %(문자열의 넓이)
hspace=픽셀수(문자열의 왼쪽 여백)
vspace=픽셀수(문자열의 위쪽 여백)
2. 움직임에 관한것
behavior=scroll, slide, alternate
direction=left, right
3. 회수와 시간에 관한 것
loop=num, -1, infinite
scrolldelay=num
scrollamount=num
4. 색에 관한 것
bgcolor=#RRGGBB, colorname

<html>
<head>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<h5>움직이는 글자를 만들어 봅시다.<p>
<marquee align=top width=300 bgcolor=yellow
behavior=scroll
direction=right scrolldelay=10 scrollamount=20 loop=-1>
왼쪽부터 오른쪽으로 글자들을 스크롤 한다.
</marquee>
<h4>움직이는 글자를 만들어 봅시다.<p>
<marquee align=middle width=400 bgcolor=yellow
 behavior=slide
direction=left scrolldelay=20 scrollamount=30 loop=-1>
오른쪽부터 왼쪽으로 글자들을 스크롤 한다.
</marquee>
<h3>움직이는 글자를 만들어 봅시다.<p>
<marquee align=top width=500 bgcolor=yellow behavior=alternate
direction=right scrolldelay=30 scrollamount=40 loop=-1>
글자들이 왔다 갔다 하죠!
</marquee>
</body>
</html>