티스토리 뷰

figure element

pilot376 2013. 7. 16. 23:47

figure 엘리먼트는 문서의 주요 흐름에서 독립적이고 하나의 단위로 참조되는 일부 흐름의 컨텐츠를 나타낸다. 이 엘리먼트는 문서의 메인 컨텐츠에서 참조되는 일러스트레이션, 다이어그램, 사진, 코드 목록 등에 사용될 수 있다.

figcaption 엘리먼트는 figure 엘리먼트의 자식 엘리먼트이고 figure 엘리먼트 컨텐츠의 표제를 표현한다. 선택적으로 사용할 수 있다.

figure 엘리먼트로 코드 목록을 마크업 한 예시 :

<p>In <a href="#l4">listing 4</a> we see the primary core interface API declaration.</p>
<figure id="l4">
    <figcaption>Listing 4. The primary core interface API declaration.</figcaption>
    <pre>
        <code>
            interface PrimaryCore {
                boolean verifyDataLine();
                void sendData(in sequence&lt;byte> data);
                void initSelfDestruct();
            }
        </code>
    </pre>
</figure>
<p>The API is designed to use UTF-8.</p>

figure 엘리먼트로 사진을 마크업 한 예시 :

<figure>
    <img src="bubbles-work.jpeg" alt="Bubbles, sitting in his office chair, works on his latest project intently.">
    <figcaption>Bubbles at work</figcaption>
</figure>

참조 : http://www.w3.org/TR/2012/WD-html5-20121025/the-figure-element.html#the-figure-element=

댓글