<img src="이미지 경로" alt="대체 텍스트">

src

폴더 내 이미지가 있을 경우

<img src="image.jpg">
<img src="/images/img/jpg">

형태인 상대 주소로 존재하게 된다.
* 아래의 경우 하위 폴더에 이미지가 존재할 경우 작성할 수 있는 하위 폴더

웹 사이트 내 이미지

<img src="https://url.com/img/photo.jpg">

와 같이 링크와 경로가 한번에 나오는 절대 주소값이 들어가게 된다.

alt

이미지를 표시할 수 없을 경우 표시하게 되는 문구
alt 속서을 이용하여 사용자에게 이미지 설명을 보여주게 된다.

style

사진 크기 조정

<img src="" width="" height="">

width 너비 지정
height 높이 지정

%, px, em, rem 등 여러 방식으로 표현할 수 있으며,
width, height 중 하나만 설정시 동일비율로 상대값도 변환되며 두 속성 모두 설정시 비율을 무시한채로 정의된 크기를 지정한다.

링크 추가

<a href="">
  <img src="">
</a>

형식을 가지며 이미지 클릭시 a 태그 내 존재하는 링크로 변경된다.

이미지 맵

위 경우 이미지 어느 위치를 눌러도 변경 가능하며, 이미지 내 영역을 구분하여 각 영역이 모두 별도의 링크를 갖게 하기 위해 사용되는 방식이다.

생성하기

<img src="img.jpg" usemap="#area">
<map name="area">

map 태그로 사용하며 usemap과 name은 같은 이름을 갖는다. usemap에는#이름 으로 #이 붙게 된다.

영역 만들기

<area> 태그를 활용하며, 모양 정의시 4가지 속성값 중 하나를 선택할 수 있다.

속성	설명	속성	설명
rect	사각형의 영역 지정 가능	circle	원형의 영역 지정 가능
poly	다각형의 영역 지정 가능	default	전체 지역을 정의

사각형

<area shape="rect" coords="시작x,시작y,끝x,끝y" alt="" href="">

원형

<area shape="circle" coords="중심x,중심y,반지름" alt="" href="">

다각형

<area shape="poly" coords="모서리x,모서리y,모서리x,모서리y, ..." alt="" href="">

기타

img 태그는 애니메이션인 .gif 파일도 지원한다.
흔히 말하는 움짤도 지원한다는 의미를 지니게 된다.

지원하는 이미지 형식

.gif, .png, .jpg, .jpeg, .svg 등을 지원