1. 이미지 태그

<img> 태그는 HTML 문서내에 이미지를 넣고자 할 때 사용하는 기능입니다. HTML 문서에서 사용가능한 이미지 파일의 종류는 GIF 와 JPG 파일이며 여러 가지 속성을 사용할 수 있습니다.

속 성	종 류	설 명
ALIGN	TOP	글자의 위쪽에 위치
	MIDDLE	글자의 중간에 위치
	BOTTOM	글자의 아래쪽에 위치
	LEFT	왼쪽 정렬
	RIGHT	오른쪽 정렬
BORDER	Pixels	경계선 두께
WIDTH	Pixels	그림의 넓이를 임의로 조정
	Percentage
HEIGHT	Pixels	그림의 높이를 임의로 조정
	Percentage
ALT	문자	그림을 읽지 못하는 웹브라우저에 택스트 표시
VSPACE	Pixels	그림의 위쪽과 아래쪽 공간을 지정하여 띄움
HSPACE	Pixels	그림의 왼쪽과 오른쪽 공간을 지정하여 띄움

1) ALIGN 속성 (Top, Middle, Bottom)

그림의 위치를 지정할때 쓰는 테그 입니다.

	실습 (메모장을 열어서 똑같이 따라해 입력해 보세요)
	실행 결과 (위에 메모장에 실습한 내용을 sample_22.html이라고 저장하시고 저장된
	sample_22.html을 더블클릭 해보세요)

2) BORDER 속성

삽입된 그림의 테두리를 지정합니다.

	실습 (메모장을 열어서 똑같이 따라해 입력해 보세요)
	실행 결과 (위에 메모장에 실습한 내용을 sample_23.html이라고 저장하시고 저장된
	sample_23.html을 더블클릭 해보세요)

3) WIDTH 와 HEIGHT 속성

가로 세로 사이즈를 조정합니다.

	실습 (메모장을 열어서 똑같이 따라해 입력해 보세요)
	실행 결과 (위에 메모장에 실습한 내용을 sample_24.html이라고 저장하시고 저장된
	sample_24.html을 더블클릭 해보세요)

	그림을 넣을때 width값과 height값은 꼬~~옥 넣어주는 것이 좋습니다. 그래야 인터넷에서 띄울때 빨리 뜬다는 군요.

4) ALT 속성

ALT 속성이 지정되면 마우스가 이미지에 위치했을 때 ALT 내용이 화면에 나타납니다.
일명, 도움말 풍선이라고도 하지요.

	실습 (메모장을 열어서 똑같이 따라해 입력해 보세요)
	실행 결과 (위에 메모장에 실습한 내용을 sample_25.html이라고 저장하시고 저장된
	sample_25.html을 더블클릭 해보세요)

5) VSPACE 와 HSPACE 속성

<menu> 태그는 길이가 짧은 리스트를 작성할 때 사용하는 기능으로 순서없는 리스트와 유사하지만 웹브라우저에 나타날 때 줄간격 좁은 것이 특징입니다. 　

	실습 (메모장을 열어서 똑같이 따라해 입력해 보세요)
	실행 결과 (위에 메모장에 실습한 내용을 sample_26.html이라고 저장하시고 저장된
	sample_26.html을 더블클릭 해보세요)

6) <a href="· · · "> 태그를 이용한 이미지 링크

위에서 배운 <a href="· · · "> 태그와 지금 배운 그림 넣기 태그를 이용해서 그림에 링크를 걸어볼까요?
저는 (주)오늘과 내일에 링크를 걸어볼께요.

	실습 (메모장을 열어서 똑같이 따라해 입력해 보세요)
	실행 결과 (위에 메모장에 실습한 내용을 sample_27.html이라고 저장하시고 저장된
	sample_27.html을 더블클릭 해보세요)
	클릭 결과 (오늘과 내일로 가기)
	[출처] 빛남이