기초) HTML5 figure/figcaption 요소

 

 

 

 

1. <Figure>요소는

이미지나 멀티미디어 등에

사용하는 요소

 

 

2. <figcaption>요소는

figure 요소를 설명하는

하나의 요소.

 

figcaption 사용 시

img를 설명하는 대체 텍스트인

alt 값은 비워두어야 하는데,

 

시각 장애인분들이 사용하는

화면 낭독기가 중복되어

읽어 주는 것을 방지하기 위함이다.

 

필수 요소는 아니니

필요에 따라 쓰자

 

---

 

샘플 코드 1

 

<a href="#a">
    <figure>
         <img src="타쿠.jpg" alt="">
            <figcaption>
            어린 타쿠가 늠름한 아빠를 향해 거칠게 짖고 있다
            <span>작성일</span> 2017-11-11
            </figcaption>
    <figure>
</a>

 

---

 

 

샘플 코드 2

 

<ul>
   <li>
       <a href="#a">
            <figure>
                <img src="mgs.jpg" alt="">
                <figcaption>메탈기어솔리드 스네이크 수트버전</figcaption>
                <span>상품코드</span> GJO-JI01D8 <br>
                <em>구매하기</em>
            </figure>
       </a>
   </li>
</ul>

 

---

 

 

각 코드를 비교해 보면

하나는

<span> 요소를

<figcaption>안에 포함시켰고

하나는 아니다.

 

둘 다 맞는 방법이니

어울리다 생각되는 곳에

알맞게 쓰고

 

다시 한번 말하지만

figcaption 자체가

필수 요소가

아니니 필요한 경우에

알맞게 쓰자.