HTML <caption> 태그, 표에 제목을 추가하는 방법

HTML <caption> 태그, 표에 제목을 추가하는 방법

HTML에서 <caption> 태그는 <table> 요소에 제목을 추가하는 데 사용됩니다. 표에 명확한 제목을 제공하면, 사용자에게 표의 내용을 더 쉽게 이해할 수 있도록 도와주며, 특히 스크린 리더를 사용하는 사용자에게 유익합니다. 이 글에서는 <caption> 태그의 기본 사용법, 스타일링 방법, 그리고 웹 접근성을 고려한 팁까지 알아보겠습니다.

 

 

목차

1. caption 태그란?
2. caption 태그의 기본 사용법
3. caption 위치와 스타일링
4. 접근성을 위한 caption 활용법
5. caption 태그를 활용한 예제

 

caption 태그란?

<caption> 태그는 HTML 표(<table>)에 제목을 제공하기 위해 사용되는 태그입니다. <table> 요소 안에 위치하며, 표의 내용을 설명하거나 요약하는 역할을 합니다. <caption> 태그는 텍스트로 제공되며, 표와 별도의 요소로 처리되어 접근성도 강화할 수 있습니다.

 

 

 

caption 태그의 기본 사용법

<caption> 태그를 사용하는 기본적인 구조는 아래와 같습니다:

        <table>
            <caption>표 제목</caption>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </table>
    

<caption> 태그는 <table> 요소의 첫 번째 자식 요소로 위치해야 합니다. 이 위치 규칙을 지키지 않을 경우, 웹 브라우저가 올바르게 해석하지 못할 수 있습니다.

 

 

 

caption 위치와 스타일링

<caption> 태그는 기본적으로 표 상단에 나타나지만, CSS를 사용해 위치와 스타일을 변경할 수 있습니다. 예를 들어, 표의 아래쪽에 제목을 표시하고 싶다면 caption-side 속성을 사용할 수 있습니다:

        table {
            caption-side: bottom;
        }
    

또한, font-weight, text-align 등의 CSS 속성을 통해 <caption> 텍스트의 크기, 색상, 정렬 등을 조정할 수 있습니다. 예를 들어:

        caption {
            font-weight: bold;
            text-align: center;
            font-size: 1.2em;
            color: #333;
        }
    

 

 

 

 

접근성을 위한 caption 활용법

<caption> 태그는 웹 접근성을 고려할 때 매우 중요한 역할을 합니다. 시각 장애가 있는 사용자는 화면 낭독기(Screen Reader)를 통해 페이지를 탐색하며, <caption> 태그가 포함된 표는 쉽게 이해할 수 있습니다. 다음과 같은 접근성 팁을 고려해보세요:

• 의미 있는 제목: 표의 내용을 요약하는 간결하고 정확한 제목을 작성하세요.
• 데이터 요약: 표의 구조가 복잡할 경우, 표에 대한 요약을 <caption>에서 제공하여 사용자에게 이해를 돕습니다.

 

 

 

caption 태그를 활용한 예제

다음은 <caption> 태그를 포함한 표의 예제입니다:

        <table>
            <caption>2024년 분기별 매출 보고서</caption>
            <tr>
                <th>분기</th>
                <th>매출(억 원)</th>
            </tr>
            <tr>
                <td>1분기</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2분기</td>
                <td>150</td>
            </tr>
            <tr>
                <td>3분기</td>
                <td>200</td>
            </tr>
        </table>
    

위 예제에서 <caption> 태그는 표의 상단에 위치하며, "2024년 분기별 매출 보고서"라는 제목이 추가됩니다. 이를 통해 표의 의미를 명확하게 전달할 수 있습니다.