웹마당넷 |HTML 강좌 - [제06강] 이미지 삽입을 위한 <Img Src> 태그

제 목

HTML 강좌 - [제06강] 이미지 삽입을 위한 <Img Src> 태그

작성자

컴쟁이

등록일

2008-01-10 13:08:47

조회수

20,149

바늘과 실처럼 글자는 역시 그림과 잘 조화를 이룬다. 글자만으로는 충분히 이해하지 못한 부분을 그림으로 나타내주어야 하므로 그림의 삽입 또한 매우 중요하다는 것을 알고 있다. 지금부터는 그림을 삽입하는 태그들에 관하여 살펴보기로 하자!

1. <Img Src> : Image SouRC

- <IMG SRC="그림경로"> : 그림을 삽입할 때 그림의 경로를 잘 지정해 주어야 한다.
- <IMG SRC=" " ALIGN=" "> : 그림의 정렬을 나타는 옵션(Left, Right, Center)
- <IMG SRC=" " WIDTH=" " HEIGHT=" "> : 그림의 크기를 나타내는 옵션(단위는 픽셀)
- <IMG SRC=" " VSPACE=" " HSPACE=" "> : 그림 사이의 여백을 나타내는 옵션(vspace는 수직여백 으로 상하 여백이고 hspace는 수평여백으로 좌우 여백을 뜻한다.)
- <IMG SRC=" " BORDER=" "> : 그림의 테두리 굵기를 나타내는 옵션
- <IMG SRC=" " ALT=" "> : 그림에 대한 간단한 설명을 나타낼 수 있으며 마우스를 그림위에 올렸을 때 글씨를 보이게 하거나 그림을 불러오지 못하였을 때 그림대신 보여진다.

2. 예제-1 (그림 삽입 옵션)

[Source]

[Result]

그림이 안 보이시져? 그림 경로 또는 파일이름 오류!

3. <Img Src> 사용시 주의 사항

- 예제-1과 같은 경우 그림의 경로가 웹상으로 절대적인 경로가 되므로 위와 같이 쓰면 되지만, 저장된 HTML문서가 그림과 같은 경로에 있느냐 다른 경로에 있느냐에 따라 경로 지정이 달라진다.

4. 예제-2 (HTML문서가 그림과 같은 경로에 있는 경우)

[Source]

<html>
<head>
<title>
HTML문서가 그림과 같은 경로에 있는 경우
</title>
</head>

<body>
<img src="logo.gif" alt="폴더없이 동등 위치일 경우 경로를 지정하지 않고 파일이름만..">
</body>
</html>

▲ 그림 파일을 HTML 문서와 같은 위치에 임의대로 저장하고 결과를 살펴보자.

[Result]

5. 예제-3 (HTML문서가 그림과 다른 경로(하위 폴더)에 있는 경우)

[Source]

<html>
<head>
<title>
HTML문서가 그림과 다른 경로(하위 폴더)에 있는 경우
</title>
</head>

<body>
<img src="images/logo.gif" alt="하위 폴더 경로를 지정하고 파일이름 쓰기">
</body>
</html>

▲ 그림 파일을 HTML 문서의 같은 위치(하위 폴더 images를 만들어 그림 저장) 저장하고 결과를 살펴보자.

[Result]

6. 예제-4 (HTML문서가 그림과 다른 경로(동등 폴더)에 있는 경우)

[Source]

<html>
<head>
<title>
HTML문서가 그림과 다른 경로(동등 폴더)에 있는 경우
</title>
</head>

<body>
<img src="../images/logo.gif" alt="동등 폴더 경로를 지정하고 파일이름 쓰기">
</body>
</html>

▲ 그림 파일을 HTML 문서와 다른 위치(HTML문서가 있는 폴더와 같은 위치에 images폴더를 만들어 그림 저장) 저장하고 결과를 살펴보자.

[Result]