HTML 이미지 관리를 위한 img 태그 기본적인 내용

HTML

HTML 이미지 관리를 위한 img 태그 기본적인 내용

 

환경: Eclipse Mars

 

이미지 태그인 <img> 는 아주 많이 쓰입니다. 요즘은 글과 함께 웹 문서에 이미지와멀티미디어 컨텐츠가 같이 들어가야 합니다. 그래서 HTML 을 작성할 때 이미지의 삽입과 관리를 위해 <img> 태그를 많이 쓸 수 밖에 없습니다.

 

이미지 태그에는 여러가지 속성이 있습니다. 그 중에서 주로 쓰이는 것은 5가지 정도 됩니다. 둘러 쌓인 요소에서 이미지를 정렬할 수 있는 align 은 간혹 쓰입니다.

 

l  src : 이미지 파일 경로를 지정합니다.

l  alt : 이미지에 대한 설명이 들어갑니다. 이미지 대체 글이 나타납니다.

l  width : 이미지의 가로 길이 입니다. 단위는 px/%

l  height : 이미지의 세로 길이 입니다. 단위는 px/%

l  align : 둘러싼 요소에 이미지를 정렬합니다.

 

¤ 이미지 경로 지정하는 src 속성

 

▼ 이미지 태그에 가장 기본적인 속성입니다. src=”파일경로와 같이 src 속성값에 파일 경로를 넣어 줍니다.  

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<img src="butterfly.ico">
</body>
</html>

 

HTML 이미지 관리를 위한 img 태그 기본적인 내용

 

¤ 이미지 설명글 alt, title 속성

 

▼ 이미지에 대한 설명이 필요할 때 들어가는 속성입니다. 두 종류가 있는데, alt 는 이미지를 찾지 못했을 때 대신 표시해 주는 텍스트입니다. 검색 엔진에서 이미지 검색할 때 alt 에 입력한 텍스트를 찾게 됩니다. 그래서 이미지 노출을 원하는 분들은 반드시 alt 에 설명 글을 넣어야 합니다. 두 번째 title 속성은 브라우저에서 이미지에 마우스를 가져갔을 때 글을 보여 줍니다. 방문자에게 그림에 대한 설명이 필요할 때 사용합니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<img src="butterfly.ico" alt="나비이미지" title="나비이미지">
</body>
</html>

HTML 이미지 관리를 위한 img 태그 기본적인 내용

 

¤ 이미지 크기 조절하는 width, height 속성

 

▼ 이미지의 가로와 세로 크기를 조절할 수 있는 속성입니다. width 는 넓이 이며 height는 높이 입니다. 단위는 pixel % 가 사용됩니다. % 는 자신을 둘러싼 요소의 영역에서 차지하는 비율을 나타냅니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
</style>
</head>
<body>
	<img src="butterfly.ico"
		 width="200px"
		 height="200px" 
		 alt="나비이미지" 
		 title="나비이미지">
</body>
</html>

HTML 이미지 관리를 위한 img 태그 기본적인 내용

 

¤ 이미지를 정렬하는 align 속성

 

align 은 요소에서 이미지를 배치할 때 사용합니다. 속성에 대한 값은 top, bottom, right, left 가 있으며 이미지를 둘러싼 요소의 영역에서 배치가 됩니다. 아래 샘플은 div 태그 영역 내에서 이미지를 오른쪽으로 배치하였습니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>HTML</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	div {
		background-color: #4e539a;
		height:200px;
	}
</style>
</head>
<body>
	<div>
		<img src="butterfly.ico" align="right">
	</div>
</body>
</html>

HTML 이미지 관리를 위한 img 태그 기본적인 내용

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군