[image] HTML - <figure> 태그 - 독립콘텐츠표시 (= figure태그 = 피겨태그)

목차

1. <figure> 예제 - 독립 콘텐츠 표시
2. <figure> 정의
3. <figure> 구문
4. <figure> 기본 CSS

<figure> 예제 - 독립 콘텐츠 표시

<figure> 정의

 

삽화, 도형, 사진, 코드 일람표 같은 독립적인 콘텐츠를 표시. 

 

---

 

1.

독립적인 콘텐츠란 내용 상 웹문서의 일부이나 위치상 독립적이며, 

없더라도 웹문서 흐름에 영향 안 미치는 콘텐츠.

2.

시작태그와 종료태그로 구성

3.

HTML5에서 새로 도입

4.

IE 9 이상 주요 최신 브라우저 모두 지원.

5.

<figure> 태그는 전역속성과 이벤트속성 지원.

6.

<figcaption> 태그 : <figure> 태그 제목 달 때 사용

 

<figure> 구문

 

<figure> 독립 콘텐츠 요소 </figure>

 

<figure> 기본 CSS

 

figure {

    display: block; 

    margin-top: 1em; 

    margin-bottom: 1em; 

    margin-left: 40px; 

    margin-right: 40px; 

}