HTML : figure, figcaption - 이미지 등을 감싸고 캡션을 만드는 태그

HTML : figure, figcaption - 이미지 등을 감싸고 캡션을 만드는 태그

---

<figure>

: <figure>는 독립적인 콘텐츠(설명, 콘텐츠 등)를 표현하는 태그이며, <figcaption>을 사용해서 설명을 붙일 수 있다.

<figure>
	<img src="이미지주소" alt="이미지에 대한 설명">
	<figcaption>설명문</figcaption>
</figure>

<figure>
	<p> 예시문 입니다. </p>
    <p> 예시를 두번 썼습니다. </p>
</figure>

• <figure>로 이미지, <pre>를 사용한 코드와 인용문 등을 감쌀수있다.
  
  • <figure>를 사용하는 이유는 <figure>로 감싸지 않고 <p>로만 사용할 경우 문단이 연관이 없는 별개의 문단으로 인식되어 웹 접근성이 떨어진다.

 

기술 요약

• 콘텐츠 카테고리 : 플로우 콘텐츠
• 가능한 콘텐츠 : <figcaption> 뒤에 플로우 콘텐츠를 넣고 </figcaption>을 사용하거나  <figcaption>없이 플로우 콘텐츠만 넣어도 된다.
• 태그 생략 : 시작 태그와 종료 태그 모두 필수
• 가능한 부모 요소 : 플로우 콘텐츠를 허용하는 모든 요소

 

---

<figcaption>

: <figcaption>은 부모요소인 <figure>요소가 포함하는 다른 콘텐츠에 대한 설명을 나타내기 위한 태그이다.

<figure>
	<img src="이미지주소" alt="이미지에 대한 설명">
	<figcaption>설명문</figcaption>
</figure>

기술 요약

• 콘텐츠 카테고리 : 없음
• 가능한 콘텐츠 : 플로우 컨텐츠
• 태그 생략 : 시작 태그와 종료 태그 모두 필수
• 가능한 부모 요소 : <figure>

---

예시

    <figure>
      <img
        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F5c0y5%2Fbtrz3liDu0O%2FAAAAAAAAAAAAAAAAAAAAAIvmIB3ptYmL_v8Vy1s_w4Rqz8iL7HrZEUwA3CVx1sJp%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1769871599%26allow_ip%3D%26allow_referer%3D%26signature%3DPemI06fuXPhJHg2O%252BQ%252BAq9rOYLE%253D"
        alt="노을빛을 띄고 있는 구름사진"
        width="300"
      />
      <figcaption>퇴근하다가 찍은 노을빛이 나는 구름사진입니다.</figcaption>
    </figure>

<예시> - 이미지 사이즈가 너무 커서 조정했습니다.

 

 

---

2022.04.12 - [TIL/HTML] - HTML : 콘텐츠 카테고리 (Contents Category)

HTML : 콘텐츠 카테고리 (Contents Category)