10. HTML 이미지
<* 10. HTML 이미지 *>
- HTML 이미지 구문
: HTML에서는 이미지가 <img>태그로 정의됩니다.
<img>태그는 닫는 태그가 없습니다.
src 속성은 이미지의 URL(웹 주소)를 지정합니다.
<img src="url">
- alt 속성
: alt 속성은 어떤 이유로 사용자가 볼 수 없는 경우에 속성은 이미지에 대한 대체 텍스트를 제공한다.
alt 속성의 값은 이미지를 설명한다.
<!DOCTYPE html>
<html>
<body>
<img src="img_chania.jpg" alt="Flowers in Chania">
</body>
</html>
실행 결과
또한,
브라우저에서 이미지를 찾을 수 없다면 alt 속성 값이 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find the image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="Flowers in Chania">
</body>
</html>
실행 결과
- 이미지 크기 (너비와 높이)
: style 속성을 사용하여 이미지의 너비와 높이를 지정할 수 있습니다.
EX 1)
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
EX 2)
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
--> width 및 height 속성은 픽셀 이미지의 폭과 높이를 정의합니다.
- 다른 폴더의 이미지
: 이미지를 하위 폴더에 저장하는 것이 일반적입니다. 그런 다음 src 속성에 폴더 이름을 포함시켜야 합니다.
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
/ (슬러시)를 사용하여 하위폴더로 이동을 합니다. 위의 예제는 현재 HTML파일이 있는 폴더에서 images 폴더로 이동하여 html5.gif파일을 찾습니다.
- 이미지 플로팅
: CSS float 속성을 사용하여 이미지가 텍스트의 왼쪽이나 오른쪽으로 떠있게 합니다.
<p><img src="smiley.gif" alt="Smiley face"style="float:right;width:42px;height:42px;"></p>
<p><img src="smiley.gif" alt="Smiley face"style="float:left;width:42px;height:42px;"></p>
실행 결과
- 이미지 map
: <map> 태그는 이미지 맵을 정의합니다. 이미지 맵은 클릭 가능한 영역이 있는 이미지입니다.
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
</body>
</html>
실행 결과 (클릭 전 -> 클릭 후)
- 배경 이미지
: 웹 페이지에 배경 이미지를 추가하려면 body 요소에 background-image 속성을 지정하세요.
<body style="background-image:url('clouds.jpg')">
<h2>Background Image</h2>
</body>
실행 결과
: 단락에 배경 이미지 추가
<body>
<p style="background-image:url('clouds.jpg')">
...
</p>
</body>
