'caption'에 해당되는 글 1건

  1. 2025.09.23 표 요소는 "caption" 요소를 포함해야 합니다.
posted by 내.맘.대.로 2025. 9. 23. 09:30

내맘대로의 EPUBGUIDE.NET에서 편집자의 의도를 그대로 살려 전자책을 제작해 드립니다.

종이책의 편집 스타일을 최대한 유지하며, 팝업 주석 처리, 이미지 확대 축소 등 전자책의 장점을 반영하여 전자책을 제작합니다. 탬플릿을 사용하지 않고, 책 한권 한권 고유 스타일을 살리기 때문에 전자책에서도 종이책 디자인을 느낄 수 있습니다.

한국출판문화진흥원의 [텍스트형 전자책 제작 지원 사업] 선정 도서는 ‘제작 난이도별 제작비 산정 기준에 근거하여’ 제작 단가를 산정하고, 일정에 맞춰 제작을 해 드리니 많은 문의 바랍니다.

자세한 내용은 여기로: https://www.epubguide.net/notice/309

오래 전 작성된 글은 현재의 Sigil 버전과 차이가 날 수 있습니다. 등록 일자를 확인 하고 1년 이상 지난 글은 변경된 내용이 있는지 확인하시기 바랍니다.

Table elements should include a caption element.

 

이 규칙은 표(table)에 대한 접근성과 가독성을 높이는 데 매우 중요합니다.

<caption> 요소는 표의 '공식적인 제목' 역할을 합니다. 📚

## 중요한 이유

화면 낭독기(Screen Reader)와 같은 보조 기술은 표를 인식했을 때 이 <caption>에 있는 내용을 가장 먼저 읽어줍니다. 이 제목을 통해 사용자는 표의 전체 내용을 살펴보기 전에 무엇에 대한 정보인지 미리 파악할 수 있습니다.

## 해결 방법

해결 방법은 간단합니다. <table> 태그 바로 아래, 첫 번째 <tr> 태그 위에 <caption> 요소를 추가하고 그 안에 표의 제목을 적으면 됩니다.

올바른 구조:

HTML
 
<table>
  <caption>월별 판매 보고서</caption>
  <tr>
    <th>월</th>
    <th>수량</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>150</td>
  </tr>
</table>

이렇게 하면 모든 사용자가 표의 목적을 더 명확하게 이해할 수 있습니다.

반응형