친절한효자손 취미생활

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


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

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


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


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


figure 요소 사용 예시

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



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


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





이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.