..

Search

<figure>

HTML <figure> 태그


정의 및 특징

<figure> 태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용합니다.

 

<figure> 요소의 콘텐츠는 문서의 내용과는 연관성을 가지지만, 해당 콘텐츠의 위치가 문서의 주요 흐름과는 독립적이어서 제거해도 문서의 흐름에 영향을 주어서는 안 됩니다.


예제
<figure>
    <img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
</figure>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<figure> 8.0 지원함 9.0 4.0 5.1 11.0

HTML5에서 변경된 사항

<figure> 태그는 HTML5에서 새롭게 추가된 요소입니다.


CSS 기본값

figure {

  display: block;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 40px;

  margin-right: 40px;

}


DOM 인터페이스


연관 페이지

HTML 의미 요소 수업 ⇒


연습문제