figure, figcaption

설명
캡션과 무언가를 묶는 용도 이미지, 차트, 코드 등에 캡션을 달고싶을 경우 묶어주면 된다
Primary
content category
flow
figure, figcaptioncaption 추가코드 스니펫 예시인용구 예시시 인용 예시

figure, figcaption

<figure> 는 단순히 인용구나 텍스트뿐만 아니라 이미지, 그래프, 코드 스니펫, 테이블 등 다양한 독립적인 콘텐츠를 감싸는 데 사용됩니다.
이 요소는 선택적으로 <figcaption> 요소를 사용해 캡션(설명)을 추가할 수 있고, 캡션과 해당 콘텐츠는 하나의 단위로 참조됩니다.

caption 추가

태그의 첫번째 또는 마지막 자식요소로 figcaption 추가하면 됨.
<!-- Image with a caption -->
<figure>
  <img src="favicon-192x192.png" alt="The beautiful MDN logo." />
  <figcaption>MDN Logo</figcaption>
</figure>
notion image

코드 스니펫 예시

<figure>
  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>
notion image

인용구 예시

<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>
notion image

시 인용 예시

<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
notion image