#4-4. HTML 이미지(Image) <img> 태그

# HTML 에 이미지를 삽입하는 방법을 알아봅니다.
# HTML 다양한 설정 방법을 알아봅니다.
# 이미지 삽입, 이미지 크기 설정, 이미지 테두리(border) 설정, 이미지에 링크 설정, 이미지맵 만들기

# tag 목록을 볼 수 있는 페이지로 이동합니다.

# 비전공자가 이해한 HTML

---

HTML 이미지

 

---

 

1) 이미지 삽입

문법  <img src="이미지 주소" alt="대체문자열">
src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.
alt 속성은 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.

<!-- 이미지 삽입 -->
<img src="/img_html5_logo.png" alt="이미지가 없습니다.">

 

---

 

2) 이미지 크기 설정

HTML 에서는 style 속성으로 이미지의 크기를 설정할 수 있습니다.
또한, width와 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수 있습니다.

위의 두 가지 방법 모두 HTML 표준에는 적합한 방법이지만, 나중에 배우게 될 CSS를 이용한 내부 스타일 시트나 외부 스타일 시트와 상관없이 이미지의 원래 크기를 유지하려면 style 속성을 사용하는 것이 좋습니다.

<style>
  img {
    width: 100%
    border: 1px solid black;
  }
</style>

<img src="/examples/images/img_flag.png" alt="html size" width="320" height="214">
<img src="/examples/images/img_flag.png" alt="style size" style="width:320px; height:214px">

 

---

 

3) 이미지 테두리(border) 설정

<img src="/examples/images/img_flag.png" alt="이미지 테두리" 
     style="width:320px; height:214px; border:3px solid black"

 

---

 

4) 이미지에 링크 설정

<a href="/html/into" target="_blank">
  <img src="/examples/images/img_flag.png" alt="flag" style="width:320px; height:214:px">
</a>

 

---

 

5) 이미지 맵(image map) 만들기

이미지 맵(image map): 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미함

<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵 사이의 관계가 설정됨
<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 함

 

<img src="/examples/images/img_flag.png" alt="진실혹은거짓" usemap="#vending" style="width:320px; height:240px" />
<map name="vending">
  <area shape="rect" coords="90,60,180,130" alt="거짓"
        href="##link##">
  <area shape="rect" coords="210,200,70,130" alt="진실"
        href="##link##">
</map>

 

---

 

해당 글은 TCP School에 있는 글을 토대로 공부한 내용입니다.