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">

코드 실행

이미지에 링크(link) 설정

이미지에 <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 태그

map 태그

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

area 태그

참조

• https://tonks.tistory.com/39