HTML 입문 | HTML 기본 요소 | HTML 이미지(Image)


이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미한다. 웹 페이지에는 이러한 이미지가 매우 중요한 요소 중 하나이다.

웹 페이지에서 사용 가능한 이미지의 종류는 다음과 같다.

  • JPEG Images
  • GIF Images
  • PNG Images

이미지의 삽입

HTML에 이미지를 추가할 때는 <img>태그를 사용한다.
<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용된다.

문법

<img src="이미지주소" alt="대체문자열"/>

이미지를 삽입하는 예제는 아래와 같다.

<img src="/resources/images/logo/128x128.png" alt="devkuma logo"/>

코드 실행

이미지 크기(width, height)

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

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

<img src="/resources/images/logo/128x128.png" alt="devkuma logo" style="width:256px;height:256px;">

코드 실행

이미지 alt 속성

alt는 이미지를 표시 할 수없는 경우 이미지에 대한 대체 텍스트를 표시한다.

연결 속도가 느리거나, 실제 이미지가 존재하지 않는 경우 등 브라우저에서 사용자가 볼 수 없는 경우에 이미지의 대체 정보를 제공한다.

<img src="noimage.png" alt="이미지가 없습니다.">

코드 실행

이미지 테두리(border)

border 속성을 사용하여 이미지의 테두리 사용 여부와 굵기를 설정할 수 있다.

<img src="/resources/images/logo/256x256.png" alt="이미지 테두리" style="border: 3px solid black">

코드 실행

이미지에 <a>태그를 이용하여 링크를 설정할 수 있다.

<a href="/books/pages/112" target="_blank">
    <img src="/resources/images/logo/256x256.png" alt="flag">
</a>

코드 실행

이미지 맵 만들기

HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있다. 이미지 맵(image map)이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능을 의미한다.

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

<img src="/resources/images/logo/256x256.png" alt="devkuma logo" usemap="#devkuma"/>
<map name="devkuma">
  <area shape="rect" coords="105,145,150,175" alt="코"
        href="https://ko.wikipedia.org/wiki/%EC%BD%94">
  <area shape="rect" coords="25,50,60,85" alt="왼쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
  <area shape="circle" coords="205,65,30" alt="오른쪽 귀"
        href="https://ko.wikipedia.org/wiki/%EA%B7%80">
</map>

코드 실행

img 태그

속성 설명
usemap 이 이미지에서 map을 사용할 것임을, 브라우저에게 알려준다. 사용할 map의 이름을 넣어준다.

map 태그

속성 설명
name map 태그에게 붙여줄 이름.
id name 속성에서 정한 것과 동일한 이름을 넣는다.

※ html 5로 넘어오면서, name 속성보다는 id 속성을 사용하라고 권하는 추세다.

area 태그

속성 설명
shape map의 모양. 링크를 걸어줄 영역의 모양. 기본값인 default는, 이미지의 전체 영역. default, rect, circle, poly 중에서 하나를 선택하여 사용한다.
coords map의 좌표. 다각형(poly)일 경우, 최소 3개의 좌표가 필요하다.
alt “스크린 리더” 사용자처럼 이미지를 볼 수 없는 경우, 또는 이미지를 불러올 수 없는 브라우저를 위한 설정. 이미지를 대신할 문구를 넣어준다.
title 말풍선. 해당 영역으로 마우스를 가져갔을 때 나타나는 문구.
href 클릭시 이동할 URL.
※ ie 7 이하에서는, title이 아닌 alt에서 설정한 내용이 말풍선으로 표시됨.

참조