html/css 독학하기

코스 전체목록

닫기

figcaption

HTML5에서 도입

설명

The HTML Figcaption Element (<figcaption>) represents a caption or a legend associated with a figure or an illustration described by the rest of the data of the <figure> element which is its immediate ancestor.

<figcaption> Element는 도표나 그림과 관련된 제목 혹은 범례를 표현한다. 그림이나 도표는 <figure> element에서 표기되며 <figcaption>의 부모 element가 된다. (너무 의역한것 같은데 좀 더 자연스럽게 표현하거나 부가설명을 붙여야할것)  (범례라는 용어로 번역하는것이 어울리는지도 고민)

Usage Context

Permitted content Flow content
Tag omission None, both the start tag and the end tag are mandatory
Permitted parent elements A <figure> element
Normative document HTML5, section 4.5.12

속성

이 엘리먼트는 전역속성을 지원한다.

예제

Please see the <figure> page for examples on <figcaption>.

<figure> 페이지에서 <figcaption>의 사용예를 볼 수 있다.

 

<!-- 이미지만 넣은 것 -->
<figure>
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276930_174499879257223_502215841_n.jpg" 
alt="멋진 사진~!">
</figure>
 
<!-- 이미지에 캡션 넣은 것 -->
<figure>
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276930_174499879257223_502215841_n.jpg" 
alt="멋진 사진!">
         
    <figcaption>제일 잘 나가~</figcaption>
</figure>

 

DOM Interface

This element implements the HTMLElement interface.

이 요소는 HTMLElement 인터페이스를 구현한다.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 지원 4.0 (2.0) 9.0 11.0 4.0
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원   4.0 (2.0)      

참고

댓글

댓글 본문
  1. happytk
    아 완전하게 의역도 가능한건데, 너무 저 틀을 유지하려고만 했나봐요ㅡ그런데 '<가을사진>'이라는 단어가 캡션의 예로서 적절한가요? 흐흐ㅡ 조금 생뚱맞은 느낌도 있는것 같아서요.
  2. engfordev
    정의부분을 좀 풀어서 써 봤어요. ^^
    웹페이지를 보면 도표나 그림이 나올 때가 있다. 그리고 그림이나 도표 위에 <가을 사진> 이라고 캡션이 붙은 것을 볼 수 있다. 이 때 도표나 그림을 표시해주는 태그는 <figure>이고, 캡션을 표시해주는 태그가 바로 <figcaption>이다. <figcaption>은 <figure>의 자식 요소이다.
    </figure></figcaption></figcaption></figure>
버전 관리
graphittie
현재 버전
선택 버전
graphittie 자세히 보기