|
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>
|
¤ 이미지 설명글 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>
|
¤ 이미지 크기 조절하는 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>
|
¤ 이미지를 정렬하는 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' 카테고리의 다른 글
| HTML 입력양식 input 태그 HTML5 추가된 type 타입 에 대한 설명 (2) | 2022.07.03 |
|---|---|
| HTML 입력양식 input 태그 기본 적인 타입에 대한 설명 (0) | 2019.04.26 |
| HTML 입력양식 input 태그 HTML5 추가된 속성에 대한 설명 (1) | 2019.04.11 |
| HTML 하이퍼링크 텍스트의 색상 상태에 따라 별도 지정하기 (0) | 2019.01.14 |
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
