..

Search

16) 이미지

HTML 이미지


HTML 이미지(Image)

이미지(image)란 2차원 평면 위에 그려진 시각적 요소를 의미합니다.

오늘날 웹 페이지에는 이러한 이미지가 매우 중요한 요소의 하나로 자리 잡고 있습니다.

 

웹 페이지에서 주로 사용되는 이미지의 종류는 다음과 같습니다.

JPEG 이미지 GIF 이미지 PNG 이미지
jpg gif png

이미지의 삽입

HTML 문서에 이미지를 삽입할 때는 <img>태그를 사용합니다.

 

<img>태그는 종료 태그가 없는 빈 태그(empty tag)이며, 다음과 같은 문법으로 사용됩니다.

문법

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

 

src 속성은 이미지가 저장된 주소의 URL 주소를 명시합니다.

alt 속성으로 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열을 설정할 수 있습니다.

 

예제

 

<img src="/img_html5_logo.png" alt="이미지가 없나봐요..">

 

코딩연습 ▶


이미지의 크기(width, height) 설정

HTML에서는 style 속성을 사용하여 이미지의 크기를 설정할 수 있습니다.

또한, width 속성과 height 속성을 이용하면, 이미지의 너비와 높이를 각각 픽셀(pixel) 단위로 설정할 수도 있습니다.

 

위의 두 가지 방법 모두 HTML5 표준에는 적합한 방법이지만, 나중에 배우게 될 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">

코딩연습 ▶


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

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

예제

 

<img src="/examples/images/img_flag.png" alt="이미지 테두리"

    style="width:320px; height:214px; border: 3px solid black">

 

코딩연습 ▶


이미지에 링크(link) 설정

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

예제

<a href="/html/intro" target="_blank">

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

</a>

코딩연습 ▶


이미지 맵 만들기

HTML에서는 <map>태그를 이용하여 이미지 맵(image map)을 제작할 수 있습니다.

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

 

<img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정됩니다.

<map>태그는 하나 이상의 <area>태그를 가지며, 이 <area>태그가 바로 버튼과 같은 역할을 합니다.

예제

<img src="/examples/images/img_imagemap.jpg" alt="진실혹은거짓" usemap="#vending" style="width:320px; height:240px" />

<map name="vending">

    <area shape="rect" coords="90,60,180,130" alt="거짓"

        href="https://ko.wikipedia.org/wiki/%EA%B1%B0%EC%A7%93%EB%A7%90">

    <area shape="rect" coords="210,200,70,130" alt="진실"

        href="https://ko.wikipedia.org/wiki/%EC%A7%84%EC%8B%A4">

</map>

코딩연습 ▶


연습문제