그림넣기

1. 그림넣기: <IMG> 태그

웹페이지에 이미지를 넣는 기능이다.

1.1. 속성

속성

설명

src="그림 파일 이름"

삽입할 그림 파일의 경로를 써준다.

align="left, right"

이미지를 정렬할 위치를 지정한다.

align="top, middle, bottom"

텍스트의 위치를 이미지의 위쪽, 가운데, 아래쪽으로 정렬시킨다.

width="숫자"

이미지의 폭을 픽셀 단위로 지정한다.

height="숫자"

이미지의 높이를 픽셀 단위로 지정한다.

style=" ..."

(예)<img style="background:red">

title="제목입력"

(예)<imag style="제목의 글자크기">

border="숫자"

그림 경계선의 두께를 나타낸다.

vspace="숫자"

그림의 상하 여백을 픽셀 단위로 표시한다.

hspace="숫자"

그림의 좌우 여백을 픽셀 단위로 표시한다.

속성	설명
src="그림 파일 이름"	삽입할 그림 파일의 경로를 써준다.
align="left, right"	이미지를 정렬할 위치를 지정한다.
align="top, middle, bottom"	텍스트의 위치를 이미지의 위쪽, 가운데, 아래쪽으로 정렬시킨다.
width="숫자"	이미지의 폭을 픽셀 단위로 지정한다.
height="숫자"	이미지의 높이를 픽셀 단위로 지정한다.
style=" ..."	(예)<img style="background:red">
title="제목입력"	(예)<imag style="제목의 글자크기">
border="숫자"	그림 경계선의 두께를 나타낸다.
vspace="숫자"	그림의 상하 여백을 픽셀 단위로 표시한다.
hspace="숫자"	그림의 좌우 여백을 픽셀 단위로 표시한다.

2. 이미지 넣기 예제: <IMG SRC=" 파일명">

웹 페이지에 올리는 이미지 파일의 확장자는 이미지 질의 손상은 적으면서 파일의 크기가 작은 *.gif 와 *.jpg를 많이 사용한다.

2.1. HTML 문서

<Html>
<head>
<title> 홈페이지에 이미지 넣기</title>
</head>
<body>
<center>
<img src="cow.gif">
</center>
</boby>
</html>

<Html> <head> <title> 홈페이지에 이미지 넣기</title> </head> <body> <center> <img src="cow.gif"> </center> </boby> </html>

2.2. 브라우저 화면

3. 이미지와 텍스트 정렬-상하정렬 : align="top, middle, bottom"

3.1.HTML 문서

<Html>
<head>
<title>이미지와 텍스트 정렬</title>
</head>
<body>
<img src="tal.jpg" align=top>
이글은 그림의 윗부분에 위치한다.
<img src="tal.jpg" align=middle>
이 글은 그림의 중간 부분에 위치한다.
<img src="tal.jpg" align=bottom>
이글은 그림의 아래부분에 위치한다.
</boby>
</html>

<Html> <head> <title>이미지와 텍스트 정렬</title> </head> <body> <img src="tal.jpg" align=top> 이글은 그림의 윗부분에 위치한다.<p> <img src="tal.jpg" align=middle> 이 글은 그림의 중간 부분에 위치한다.<p> <img src="tal.jpg" align=bottom> 이글은 그림의 아래부분에 위치한다.<p> </boby> </html>

3.2. 브라우저 화면

4. 이미지와 텍스트 정렬-좌우정렬 : align="left, right"

이미지에 뒤이어 나오는 문장을 이미지의 오른쪽 왼쪽에 붙일 것인가를 정한다.

4.1. HTML 문서

<Html> <head> <title>이미지와 텍스트 정렬2</title> </head> <body> <img src="tal.jpg" align=left> 그림은 왼쪽, 글자는 오른쪽 부분에 위치한다. <p> <img src="tal.jpg" align=right> 그림은 오른쪽, 글자는 왼쪽 부분에 위치한다. <p> </boby> </html>

4.2. 브라우저 화면

5. 이미지 테두리의 굵기 : border

이미지 주위의 외곽선의 너비를 지정한다.

5.1. HTML 문서

<Html>
<head>
<title>이미지 테두리 두께</title>
</head>
<body>
<img src="dooley.gif" border=0> 둘리(외곽선두께는=0) 
<img src="dooley.gif" border=2> 둘리(외곽선두께는=2) 
<img src="dooley.gif" border=5> 둘리(외곽선두께는=5) 
</boby>
</html>

<Html> <head> <title>이미지 테두리 두께</title> </head> <body> <img src="dooley.gif" border=0> 둘리(외곽선두께는=0)<br> <img src="dooley.gif" border=2> 둘리(외곽선두께는=2)<br> <img src="dooley.gif" border=5> 둘리(외곽선두께는=5)<br> </boby> </html>

5.2. 브라우저 화면

6. 이미지 크기 조절

이미지의 크기의 가로(width) 세로(height)를 픽셀 단위로 지정한다.

6.1. HTML 문서

<Html>
<head>
<title>이미지 크기 조정</title>
</head>
<body>
<img src="dooley.gif">원본 100 X 122
<img src="dooley.gif" width="110" height="130"> 120 x 130 pixels
<img src="dooley.gif" width="50" height="60"> 50 x 60 pixels
</boby>
</html>

<Html> <head> <title>이미지 크기 조정</title> </head> <body> <img src="dooley.gif">원본 100 X 122 <img src="dooley.gif" width="110" height="130"> 120 x 130 pixels <img src="dooley.gif" width="50" height="60"> 50 x 60 pixels </boby> </html>

6.2. 브라우저 화면

7. 이미지에 링크 넣기

이미지를 클릭하였을 때 다른 웹사이트나 문서로 이동 할 수 있다.

7.1. HTML 문서

<Html>
<head>
<title>이미지링크</title>
</head>
<body>
<a href="http://www.mbc.co.kr/"><img src="mbclogo.gif">MBC 방송</a> 
<a href="http://www.kbs.co.kr/"><img src="kbslogo.gif">KBS 방송</a> 
<a href="http://www.sbs.co.kr/"><img src="sbslogo.gif">SBS 방송</a> 
</boby>
</html>

<Html> <head> <title>이미지링크</title> </head> <body> <a href="http://www.mbc.co.kr/"><img src="mbclogo.gif">MBC 방송</a><br> <a href="http://www.kbs.co.kr/"><img src="kbslogo.gif">KBS 방송</a><br> <a href="http://www.sbs.co.kr/"><img src="sbslogo.gif">SBS 방송</a><br> </boby> </html>

7.2. 브라우저 화면