친절한효자손 취미생활

HTML5에서 새롭게 추가된 태그 중 figure 그리고 figcaption 요소가 있습니다. 한국어로 굳이 표기하자면 "피규어"가 되겠군요. 이 태그는 어떤 의미이며 어떻게 사용하는지 간략하게 알아보겠습니다.


figure : 삽화, 다이어그램, 사진, 동영상, 음원 등 해당 콘텐츠에 대한 설명을 입력할 때 사용함

figcaption : figure 요소 안에서의 콘텐츠에 대한 제목 출력


이렇게 쓰인다고 하는데 아무래도 예제가 없으면 무슨 뜻인지 잘 모르겠네요. figure 대신 우리는 보통 div 요소를 사용해서 여러가지 요소들을 묶곤 합니다. 이미지 파일들을 묶는다던지, p태그로 구성된 문장 꾸러기를 묶는다던지 할 때 사용됩니다. figure도 이와 비슷한 의미라고 생각하시면 됩니다.


단지 figure를 사용하게 되는 이유는 웹접근성 때문입니다. 이미지로만 구성된 꾸러미를 만들고 싶은데, 과거 html 에서는 div로만 사용할 수 있었다면 HTML5로 넘어오면서 figure 라고 하는 태그 요소로도 사용이 가능해진 것 입니다. 선택의 폭이 더 넓어진 샘 입니다.


<figure style="text-align: center;">

    <img src="https://via.placeholder.com/150x300">

    <img src="https://via.placeholder.com/150x300">

    <img src="https://via.placeholder.com/150x300">

    <figcaption style="text-align: center;">figure 요소 사용 예시</figcaption>

</figure>


위는 figure 태그의 간단한 사용 예시 입니다. 피규어라는게 사전적 의미로 여러가지 뜻을 가지고 있고, 가장 흔하게 알려진 의미는 "형태" 또는 "뜻" 입니다. 일상에서는 캐릭터를 실제로 리얼하게 만든 모형이 피규어인 것 처럼, HTML에서의 figure의 의미도 이와 비슷한 맥락입니다. 여러가지 물건들이 있고 이것을 하나의 형태로 갖춰놓은 것! 그리고 피규어의 종류도 다양하듯, figure 안에 어떤 요소들을 담느냐, 이것또한 자유롭다는 것! 이렇게 알고 계시면 좋을 것 같습니다. 위의 예시를 토대로 완성된 모습은 다음과 같습니다.



See the Pen HTML5: figure / figcaption example by rgy0409 (@rgy0409) on CodePen.


figure 그리고 figcaption 태그도 스타일을 만들어서 적용시킬수도 있습니다. 위의 예시에서는 인라인 방식으로 스타일을 중앙정렬만 넣은 상태입니다. 내부스타일 혹은 외부스타일로 CSS 스타일을 얼마든지 꾸밀 수 있습니다. 끝.





공유하기

facebook twitter kakaoTalk kakaostory naver band