Home
HTML

표에 제목이나 설명을 추가하는 방법 - caption, figcaption

표 또는 이미지의 위 아래에 제목이나 설명을 덧붙이는 방법

표(table)에 제목이나 설명을 덧붙일 때 <caption> 태그를 사용하지만 <figcaption> 태그를 사용할 수도 있습니다. 두 가지 방법 모두 알아보겠습니다.

 

caption

먼저 <caption> 태그는 <table> 태그 바로 아래 사용합니다. 기본 위치는 표 위쪽 중앙이고, 태그 안 쪽에 다른 태그를 사용해서 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수 도 있습니다.

아래 표처럼 표 위에 제목을 덧붙일 수 있습니다.

 

Modern Browser

국내에서 자주 사용하는 모던 브라우저
브라우저 다운로드
크롬(Chrome) www.google.com / chrome
파이어폭스(Firefox) www.mozilla.org / ko / firefox
엣지(Edge) www.microsoft.com / ko-kr / windows / microsoft-edge
오페라(Opera) www.opera.com/ ko / download

 

예제

아래 예제는 <caption> 태그로 표 제목을 여러 줄로 표시한 것입니다.

제목의 위치를 파악하기 위해 표의 가로 크기를 100%로 했고, 테두리를 넣었습니다. 

<table>
  <caption>
    <strong>Table Caption</strong>
    <p>표에 제목이나 설명 추가하기</p>
  </caption>
  <tr>
    <th>Lorem</th><th>Ipsum</th>
  </tr>
  <tr>
    <td>Dolor</td><td>Amet</td>
  </tr>
</table>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

figcaption

표에 제목을 붙이는 두 번째 방법으로 <figcaption> 태그를 사용할 수 있습니다.

<figcaption> 태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure> 태그로 감싼 후 그 다음에 제목이나 설명 글을 입력합니다. 이 경우 제목이 중앙 정렬되지 않습니다. 간단한 예시는 다음과 같습니다.

 

Modern Browser

국내에서 자주 사용하는 모던 브라우저

브라우저 다운로드
크롬(Chrome) www.google.com / chrome
파이어폭스(Firefox) www.mozilla.org / ko / firefox
엣지(Edge) www.microsoft.com / ko-kr / windows / microsoft-edge
오페라(Opera) www.opera.com/ ko / download

 

예제 1

아래 예제는 <figure> 태그를 이용해 표 전체를 감싼 후 <figcaption> 태그를 이용해 표에 제목을 붙인 것입니다. 

<figure>
  <figcaption>
    <strong>Table Caption</strong>
    <p>표에 제목이나 설명 추가하기</p>
  </figcaption>
  <table>
    <tr>
      <th>Lorem</th><th>Ipsum</th>
    </tr>
    <tr>
      <td>Dolor</td><td>Amet</td>
    </tr>
  </table>
</figure>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

예제 2

이미지에도 <table> 태그를 사용하여 제목을 추가할 수 있습니다.

다음은 간단한 예시입니다. 

<figure>
  <img src="//bit.ly/2GrygUe">
  <figcaption>
    Image Caption
  </figcaption>
</figure>

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

기타 HTML 참조

HTML로 돌아 가기

Post a Comment