HTML5 <figure> 요소에 캡션을 추가하는 방법
HTML5에서 <figure> 요소에 캡션(설명 텍스트)을 추가하려면 <figcaption> 태그를 사용합니다. <figcaption>은 <figure> 요소 내부에 위치해야 하며, 반드시 첫 번째 또는 마지막 자식 요소로 작성해야 합니다.
<figure>는 이미지, 그래프, 코드 조각 등 본문에서 참조되는 독립적인 콘텐츠를 감싸는 데 사용되며, <figcaption>은 해당 콘텐츠에 대한 간단한 설명을 제공합니다. 이러한 구조는 스크린 리더 사용자에게도 유용하여 웹 접근성 향상에도 도움이 됩니다.
아래 예제 코드를 실행하면 <figure> 요소 안에 이미지와 함께 캡션을 표시하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML figcaption Tag</title> </head> <body> <figure> <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt = "튜토리얼 라이브러리 홈"/> <figcaption>Tutorials Point Library of Tutorials</figcaption> </figure> </body> </html>
주요 포인트
- <figcaption> 태그는 <figure> 요소의 첫 번째 또는 마지막 자식으로만 사용할 수 있습니다.
- 캡션은 이미지 위 또는 아래 어느 곳에든 배치할 수 있으며, CSS로 원하는 스타일을 적용할 수 있습니다.
- 이미지에 alt 속성을 함께 사용하면 접근성이 더욱 향상됩니다.