[Html] 멀티미디어 이미지 - 테두리, 부분 선택

이미지(Image)

• 웹 페이지에서 주로 사용되는 이미지에는 JPEG, GIF, PNG가 있다.
• HTML에서는 ① style 속성을 사용하거나 ② width와 height 속성을 이용하면 이미지 크기를 픽셀 단위로 설정할 수 있다
• alt는 이미지가 로딩될 수 없는 상황에서 이미지 대신 나타날 문자열이다.

<img src="이미지주소"
width="가로" height="세로"
title="이미지제목" alt="대체문자열"
style="이미지스타일" border="이미지테두리 두께">

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

<img src="img_flag.png" alt="국기" width="320" height="214">
<img src="img_flag.png" alt="국기" style="width:320px; height:214px">

이미지 테두리 설정

<img src="img_flag.png" border: 3px solid black">

이미지 맵(image map) 만들기

• 이미지 맵이란 이미지의 일부를 클릭할 수 있도록 만들어서 버튼처럼 사용하는 기능이다.
• <img>태그의 usemap 속성을 <map>태그의 name 속성과 연결하면 이미지와 맵사이의 관계가 설정된다.
• <map>태그는 버튼 역할을 하는 <area>태그를 하나 이상 가진다.

<img src="img_imagemap.jpg" usemap="#vending"/>

<map name="vending">
<area shape="rect" coords="90,60,180,130" href="https://wikipedia.org">
<area shape="rect" coords="210,200,70,130" href="https://wikipedia.org">
</map>

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/