HTML - 그림 삽입하는 요소

이미지 태그의 기본 표기는 다음과 같습니다.

<img src="이미지 파일 경로(주소)" alt="그림 설명"

      align="top | bottom | middle | left | right | texttop
                    | absmiddle | baseline | absbottom"

      width="가로크기" height="세로크기"
      border="이미지 테두리 두께" hspace="좌우여백" vspace="상하여백">

속 성	설 명
alt	그림의 설명, 이미지 대체 텍스트 그림이 없거나 잘못되었을 때 대체되어 출력함.
width	가로 크기
height	세로 크기
align	그림의 위치 설정 top: 그림의 위쪽에 문자가 나타남. bottom: 그림의 아래쪽에 문자가 나타남. middle: 그림의 중간에 문자가 나타남. texttop: 그림과 문자를 정렬할 때 가장 높은 글자를 기준으로 그림을 정렬 absmiddle: 그림의 가운데를 기준으로 정렬 baseline: 그림의 가장 아랫부분을 기준으로 문자를 정렬 absbottom : 그림의 아래쪽에서 현재 문단의 아래쪽을 기준으로 정렬 left: 문자를 기준으로 그림을 왼쪽에 정렬 right: 문자를 기준으로 그림을 오른쪽으로 정렬
border	그림의 테두리 두께
hspace	그림의 좌우 여백을 지정
vspace	그림의 상하 여백을 지정

<figcaption>태그: 이미지에 설명 글 넣기

<figcaption>태그를 사용하려면 <figure>태그로 <img>태그 전체를 감싸 주어야 합니다.

<figcaption>태그는 <img>태그 시작 전에 사용하면 이미지 위에 표시되고, 마지막에 추가하면 이미지 아래에 설명 글이 표시됩니다.

상단 설명 글

하단 설명 글

<figure>
  <figcaption>상단 설명 글</figcaption>
  <img src="image/rol.png" alt="그림 설명입니다." 
    width="300" height="300" border="2" hspace="2" vspace="2">
  <figcaption>하단 설명 글</figcaption>
</figure>