[HTML] HTML img 태그 필수 속성 – width, height, alt 속성 정리

crushed-taro 2025. 3. 15. 14:01

728x90

[HTML] HTML 표 만들기 – table, tr, td 태그 활용법 총정리 [HTML] HTML 표 만들기 – table, tr, td 태그 활용법 총정리1. 표 관련 태그1. 기본웹 문서에서 자료를 정리할 때 자주 사용하는 태그행과 열로 이

crushed-taro.tistory.com

1. 이미지 관련 태그

<img/>
- 웹 페이지에 사진이나 그림을 삽입할 때 사용하는 태그
속성

src	삽입할 이미지 경로를 지정하는 속성
alt	이미지 설명해 주는 텍스트 속성 이미지가 출력이 안되면 표시
width, height	이미지의 크기를 설정하는 속성

웹 페이지에서 이미지 태그로 사용 가능한 확장자

GIF	파일 크기가 작아 아이콘이나 블릿 기호에 많이 사용 됨 투명한 배경이나 움직이는 이미지를 만들 수 있음
JPG/JPEG	사진을 위해 개발 되었으며 저장을 반복하다 보면 화질이 떨어질 수 있음
PNG	네트워크용으로 개발되어 요즘 많이 사용

<map><area><map>
- 이미지에 구역을 나누어 링크 설정을 할 때 사용하는 태그

<img src="경로" usemap="#areaMap">
  <map name="areaMap">
	  <area shape="모양 coords="00,00(시작), 00,00(끝) href="링크경로", target="위치">  
	  <area shape="모양 coords="00,00(시작), 00,00(끝) href="링크경로", target="위치">
	</map>

2. 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>이미지 관련 태그들</title>
 </head>
 <body>
	<!--
		이미지를 삽입하기 위해 <img> 태그를 사용한다.
		이미지 파일의 경로를 src라는 속성의 속성값으로 지정해 주어야 하며,
		<img>태그는 닫기태그를 사용하지 않는다.
	-->
	<h1>이미지 관련 태그</h1>
	<img src="sample/image/river1.PNG">
	<p>src 속성에 경로를 설정하여 이미지 파일을 불러온다.</p>
	<hr>
	<h2>자주 사용하는 속성들</h2>
	<h3>alt 속성</h3>
	<p>화면낭독기는 이미지를 읽을 수 없기 때문에 대체되는 텍스트가 필요하다.<br>
	혹은 사진의 경로가 잘못되거나 이미지를 제대로 표현할 수 없는 경우 대체 텍스트의 용도로 사용 가능하다.</p>
	<img src="salple/image/river1.png" alt="두물머리 사진">

	<br>
	<h3>width와 height속성</h3>
	<p>사진의 높이와 너비를 지정할 수 있다.<br>
	고정된 단위의 크기로도 지정 가능하며<br>
	가변 크기 단위의 크기로도 지정 가능하다.</p>
	<h4>고정 크기 단위 : 화면 사이즈가 줄어도 크기가 변하지 않는다.</h4>
	<img src="sample/image/flower1.PNG" width="200px" height="150px">
	<img src="sample/image/flower2.PNG" width="200px" height="150px">
	<img src="sample/image/flower3.PNG" width="200px" height="150px">
	<img src="sample/image/flower4.PNG" width="200px" height="150px">
	<img src="sample/image/flower5.PNG" width="200px" height="150px">

	<h4>가변 크기 단위 : 화면 사이즈 혹은 기준이 사이즈에 따라 크기가 변경된다.</h4>
	<img src="sample/image/flower1.PNG" width="15%" height="150px">
	<img src="sample/image/flower2.PNG" width="15%" height="150px">
	<img src="sample/image/flower3.PNG" width="15%" height="150px">
	<img src="sample/image/flower4.PNG" width="15%" height="150px">
	<img src="sample/image/flower5.PNG" width="15%" height="150px">

	<hr>
	<h4>이미지 구역을 2개로 나누어 각각 링크 설정</h4>
	<img src="sample/image/river1.PNG" width="600px" height="500px" usemap="#map">
	<map name="map">
		<area shape="rect" coords="00, 00, 300, 500" href="http://www.naver.com" target="_self">
		<area shape="rect" coords="300, 0, 600, 500" href="http://www.google.com" target="_blank">
	</map>

	<!-- image 태그의 설명은 주로 figure태그 와 figcaption태그를 활용하게 된다.(약간 들여쓰기 기능 있음) -->
	<figure>
		<img src="sample/image/tower1.PNG" width="600px" height="300px" alt="타워">
		<figcaption>멋진 타워 사진이다.</figcaption>
	</figure>

	<img src="sample/image/tower1.PNG" width="600px" height="300px" alt="타워">
	<p>이쁜 사진이다.</p>

 </body>
</html>

3. 결과 화면

728x90