[HTML5] figure img figcaption 태그

<figure> ?

 

figure는 사진, 이미지, 다이어그램 등을 감싸는 시멘틱 태그이다.

이미지를 바로 불러올 수 없고 자식요소로 img태그를 넣어 이미지를 불러온다.

닫는 태그가 필요하다.

 

 

<figcaption> ?

 

figure 태그의 자식요소이다.

제일 처음 또는 제일 마지막에 위치시킨다.

figure 요소 안에서의 콘텐츠에 대한 제목을 출력한다.

 

 

예시

<figure style="text-align: center;">
    <img src="./ddory.jpg" title="주인"/>
    <img src="./bom.jpg" title="강아지"/>
    <img src="./ddorybom.jpg"/>
    <figcaption style="text-align: center;">figure 사용 예시</figcaption>
</figure>

img의 title 속성은 이미지 위에 마우스 포인터를 가져다 대었을 때 나타나는 풍선 도움말 문구이다.

 

 

img ?

 

img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그다.

반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성하면 정상적으로 출력된다.

</img>태그는 꼭 사용하지 않아도 된다.