■ HTML5에서는 이미지나 텍스트 단락 또는 미디어 파일 등에 모두 캡션을 붙일 수 있는데요. 요소에 캡션을 붙이기 위해서는 두 개의 태그가 사용됩니다. 먼저 <figure> 태그가 사용되는데요. 이 녀석은 캡션을 붙일 요소들을 지정하거나 묶어주는 역할을 합니다. 그리고 <figcaption> 태그를 이용해서 캡션을 붙이는데요. 태그 형식부터 알아보고 예제를 만들어서 확인해보겠습니다.
먼저 <figure> 태그의 형식은 다음과 같습니다.
▶ <figure> 캡션을 붙일 그림이나 미디어 </figure>
여기서는 이미지에 캡션을 붙이는 과정으로 진행해볼게요.
■ 간단하게 <body> 태그 안에 이미지를 하나 넣었습니다. 여기서는 그림 한 장만 넣었지만 <figure> 태그 안에 여러 장을 넣어서 한번에 묶고 모든 사진에 대해서 한 번에 캡션을 달 수도 있습니다.
■ 이 그림에 캡션을 붙여보겠습니다.
■ 예제에서 보는 것과 같이 <figure> 태그 안쪽에 요소(이미지파일) 다음에 <figcaption>을 이용해서 캡션을 붙이면 됩니다.
■ 이렇게 캡션이 붙게 되는데요. 캡션의 위치를 그림의 바로 밑 중앙으로 옮기고 텍스트 등 몇 가지 스타일을 적용해보겠습니다.
■ <head> 태그 안에 <style> 태그를 입력하고 figure figcaption {} 의 스타일을 몇 가지 적용해봤습니다.
■ 스타일을 지정한 대로 캡션이 '나눔 고딕' 글씨체의 굵은(bold) 빨간색(red) 글씨로 바뀌게 됩니다. 다음은 이 캡션을 중앙으로 옮겨보겠습니다.
■ 먼저 이미지와 캡션을 박스단위로 묶기 위해서 id="aaa"라는 <div>태그를 입력했구요. 이 박스 안에 이미지가 꽉 차게 하려고 스타일에서 body img {}의 넓이를 100%로 설정했습니다.
그리고 id="aaa" 박스의 넓이와 높이를 500, 300으로 설정하고 글자를 중앙에 위치하도록 text-align : center; 속성을 입력했습니다. 이제 브라우저에서 확인해보겠습니다.
■ 지금 박스는 보이지 않지만, 실질적으로는 파란색 선처럼 박스가 쳐진 상태이구요. 캡션이 그림 아래 중앙으로 위치한 걸 확인할 수 있습니다. ^^ 이렇게 figure 태그와 figcaption 태그를 이용해서 그림 등의 요소에 캡션을 붙이고, 캡션의 위치를 조절할 수 있습니다. 간단한 내용이니까 직접 입력해서 해보세요.^^ 수고하셨습니다.
