HTML img src, map - 이미지 넣기, 이미지 링크 추가

이번 시간에는 HTML 이미지를 넣는 <img> 태그에 대해서 알아보겠습니다.

문법

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

예제

<img src="img/wraith.png" alt="이지미 설명">

 

1. 이미지 크기조절

이미지를 넣고나면 style 태그를 사용하여 크기 및 테두리 등을 설정 할 수 있습니다.
border: 테두리
width : 넓이
height : 높이

<style>
    img {
        width:100%;
        border: 1px solid black; 
    }
</style>
<img src="img/wraith.png" alt="style size" style="width:300px; height:200px"><br>
<hr>
<img src="img/wraith.png" alt="style size" style="width:500px; height:300px">

 

2. 이미지 링크설정

이미지에 <a> 태그를 추가해서 링크를 넣을 수 있습니다.

이미지 위에 마우스를 올려보면 다음 사이트로 어떤 사이트로 연결되어 있는지 볼 수 있습니다.

<a href="https://daum.net" target="_blank">
    <img src="img/wraith.png" alt="style size" style="width:300px; height:200px"><br>
</a>

 

3. 이미지 맵 생성

<map> 태그를 이용해서 이미지맵을 만들 수 있습니다.
여기서 coords 속성은 좌표 값이며 shape="rect" 속성과 같이 사용합니다.

 

먼저 이미지 크기가 가로, 세로 200으로 설정되어 있는것을 생각하고
 cords의 첫번째 두번째 2개의 값이 x1,y1 로 첫번째 좌표점 이고
cords의 세번째 네번째 2개의 값이 x2,y2 로 두번째 좌표점 입니다.
2개의 좌표점을 사각형으로 연결하면 클릭할 구역이 만들어 집니다.

<h1>이미지 맵 좌표 만들기</h1>
<img src="img/wraith.png" alt="" usemap="#1" style="width:200px; height:200px" />
<map name="1"> 
    <area  shape="rect" coords="0,0,200,100" alt="상단" href="https://www.daum.net">
    <area  shape="rect" coords="100,0,200,200" alt="상단" href="https://www.naver.com">
</map>

 

이상으로 HTML 이미지 태그에 대한 설명을 마치겠습니다.