▣ <img>태그
· 웹 문서에 이미지 삽입 시 사용
<img src="pic.jpg" alt="image text" width="100" height="150">
<img src="pic.jpg" alt="image text" style="width: 100px;" height="150px">
<img src="pic.jpg" alt="image text" title="이미지 설명" style="float: right;">
▣ <img> 태그 속성
· src : 이미지 파일이 저장도니 경로 지정
·alt : 이미지를 웹 브라우저에서 표시하지 못했을 경우 표시되는 대체 텍스트 지정
· width/height : 이미지의 가로, 세로 길이를 픽셀 단위로 지정(% 단위를 사용하면 웹 브라우저의 크기에 따라 이미지 크기가 조절되도록 지정할 수 있음)
· style : 이미지의 스타일(크기, 위치 등)을 픽셀 단위로 지정
· border : 이미지 경계선의 두께를 픽셀 단위로 지정
♧ 이미지 삽입하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 기본 표현</title>
</head>
<body>
<h3>이미지 기본 표현</h3>
<img src="../ch03/dog.jpg" alt="이미지가 표시되지 않습니다.">
<h3>이미지에 설명 추가 & 오른쪽 정렬</h3>
<img src="../ch03/dog.jpg" title="너모 귀엽짜냐아ㅏ" style="float: right;">
<h3>이미지의 크기를 픽셀 단위로 조정</h3>
<img src="./dog2.jpg" style="width: 250px; height: 280px;">
<h3>이미지의 크기를 % 단위로 조정</h3>
<img src="../dog1.jpg" width="50%" height="40%">
</body>
</html>
♧ 이미지에 링크 걸기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지에 링크 걸기</title>
</head>
<body>
<h3>이미지를 클릭하세요.</h3>
<a href="http://www.w3.org" target="_blank">
<img src="dog2.jpg" alt="강아지 사진" title="사랑스런 강아지" border="2" style="width: 100px; height: 110px;">
</a>
<a href="http://cafe.naver.com/go2web" target="_blank">
<img src="../ch03/dog.jpg" alt="저자 홈페이지로 이동" border="2" style="width: 100px; height: 110px;">
</a>
<a href="http://en.wikipedia.org/wiki/lsaac_Newton" target="_blank">
<img src="../dog1.jpg" alt="newton site" title="뉴턴 홈페이지로 이동" border="2" style="width: 100px; height: 110px;">
</a>
</body>
</html>
♧ 이미지에 제목 붙이기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지에 제목 붙이기</title>
</head>
<body>
<h3>이미지에 제목 추가하기</h3>
<figure>
<img src="dog2.jpg" alt="강아지 사진1" title="사랑스러운 강아지">
<figcaption>[그림1]하늘리본 강아지</figcaption>
</figure>
<figure>
<figcaption>[그림2]빨강리본 강아지</figcaption>
<img src="../ch03/dog.jpg" alt="강아지 사진2" title="이쁜 강아지">
</figure>
</body>
</html>
'웹프로그래밍 HTML > 태그와 멀티미디어' 카테고리의 다른 글
| <video> 태그 (0) | 2025.03.05 |
|---|---|
| <audio> 태그 (0) | 2025.03.05 |
| <table> 태그 (0) | 2025.03.05 |
| 목록 태그의 종류 (1) | 2025.03.05 |
| <a>태그 (0) | 2025.03.05 |