테이블을 만들기 위해 사용하는 테이블 태그(table)에는 다양한 속성들이 사용된다. 그 중에서도 우리는 다음과 같이 summary 속성을 속성을 사용한 태그를 볼 수 있다. 과연 이 속성은 어떤 역할을 하는 태그인지 알아보겠다.
summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.
우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로 들어보자.
! Summary 태그의 예제소스 코드보기
# 테이블의 모습
참고로, 이 태그는 아래와 같이 caption 태그와 함께 사용되기도 하니 참고하기 바란다. 이 경우 캡션태그는 요약이라기 보다 중요 핵심 키워드만 가지는 것이 보통이다.
참고로, summary 속성은 모든 브라우저에서 지원되나 html 5에서는 축소된 속성임을 알아두자.
summary 속성은 현재 테이블이 갖고 있는 내용을 요약한 부분으로 어떤 내용이 담겨있는지 간략하게 알려줄 수 있다. 이 태그를 사용하는 목적 중 가장 큰 이유는 웹접근성에 해당하는 이유이다. 시각 장애인의 경우를 예로 들면 리더기를 통해 테이블을 읽는 경우가 생길 수 있다. 이 경우 테이블이 어떻게 구성되었고 무엇을 보여주는지에 대하여 간략한 요약을 나타낸다.
우선 이 속성의 쓰임을 아래의 예제를 통해 상세하게 알아보자. 만약 행사에 대한 스케쥴표가 아래와 같이 있는 경우를 예로 들어보자.
! Summary 태그의 예제소스 코드보기
<table summary="첫째줄은 시간을 나타내며 다른 컬럼들은 행사에 대한 장소 및 설명이다.">
<tbody>
<tr>
<td></td>
<td>장소</td>
<td>설명</td>
</tr>
<tr>
<td>13:00 ~ 14:00</td>
<td>강의실 A</td>
<td>커뮤니케이션 강화</td>
</tr>
<tr>
<td>14:00 ~ 15:00</td>
<td>강의실 B</td>
<td>컴퓨터 사이언스</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td></td>
<td>장소</td>
<td>설명</td>
</tr>
<tr>
<td>13:00 ~ 14:00</td>
<td>강의실 A</td>
<td>커뮤니케이션 강화</td>
</tr>
<tr>
<td>14:00 ~ 15:00</td>
<td>강의실 B</td>
<td>컴퓨터 사이언스</td>
</tr>
</tbody>
</table>
# 테이블의 모습
장소 | 설명 | |
13:00 ~ 14:00 | 강의실 A | 커뮤니케이션 강화 |
14:00 ~ 15:00 | 강의실 B | 컴퓨터 사이언스 |
참고로, 이 태그는 아래와 같이 caption 태그와 함께 사용되기도 하니 참고하기 바란다. 이 경우 캡션태그는 요약이라기 보다 중요 핵심 키워드만 가지는 것이 보통이다.
<table>
<caption>13시부터 15시까지 수업</caption>
</table>
<caption>13시부터 15시까지 수업</caption>
</table>
참고로, summary 속성은 모든 브라우저에서 지원되나 html 5에서는 축소된 속성임을 알아두자.
Author ByEnSSo
네. 도움이 되었어요
아니요. 별로에요