CSS의 caption-side 속성은 테이블의 <caption> 요소(제목)가 테이블을 기준으로 어느 위치에 배치될지를 지정하는 데 사용됩니다. 이 속성을 활용하면 표 제목을 상단, 하단 등 원하는 위치에 자유롭게 배치할 수 있습니다.
caption-side 속성의 주요 값
caption-side 속성은 다음 네 가지 값을 가질 수 있습니다.
- top: 캡션을 테이블 위쪽에 배치합니다. (기본값)
- bottom: 캡션을 테이블 아래쪽에 배치합니다.
- left: 캡션을 테이블 왼쪽에 배치합니다.
- right: 캡션을 테이블 오른쪽에 배치합니다.
참고로 left와 right 값은 CSS2에서 도입되었으나, 브라우저 호환성 문제로 현재는 top과 bottom 값이 가장 널리 사용되고 있습니다.
caption-side 속성 사용 예제
아래 예제를 통해 caption-side 속성을 실제로 어떻게 구현하는지 살펴보겠습니다. 첫 번째 테이블에는 캡션이 상단에, 두 번째 테이블에는 캡션이 하단에 배치됩니다.
<html>
<head>
<style>
caption.top {
caption-side: top;
}
caption.bottom {
caption-side: bottom;
}
</style>
</head>
<body>
<table style = "width:500px; border:3px solid gray;">
<caption class = "top">
국가 목록 (상단 캡션)
</caption>
<tr><td> 인도</td></tr>
<tr><td> 영국</td></tr>
<tr><td> 미국</td></tr>
<tr><td> 호주</td></tr>
</table>
<br />
<table style = "width:500px; border:3px solid blue;">
<caption class = "bottom">
국가 목록 (하단 캡션)
</caption>
<tr><td> 인도</td></tr>
<tr><td> 영국</td></tr>
<tr><td> 미국</td></tr>
<tr><td> 호주</td></tr>
</table>
<br />
</body>
</html>코드 설명
위 코드에서는 <style> 태그 내부에 caption.top과 caption.bottom이라는 두 개의 클래스 선택자를 정의했습니다. 각각 caption-side: top과 caption-side: bottom 스타일을 적용하여 캡션의 위치를 제어합니다.
첫 번째 테이블은 회색 테두리를 가지며, 클래스가 top으로 지정된 캡션이 테이블 상단에 표시됩니다. 두 번째 테이블은 파란색 테두리를 가지며, 클래스가 bottom으로 지정된 캡션이 테이블 하단에 표시됩니다.
마무리
caption-side 속성은 간단하지만 테이블의 가독성과 사용자 경험을 향상시키는 데 유용한 CSS 속성입니다. 특히 데이터가 많은 표에서 제목의 위치를 조절함으로써 문서 구조를 더 명확하게 전달할 수 있습니다. 웹 접근성 측면에서도 캡션은 스크린 리더 사용자에게 테이블의 내용을 안내하는 중요한 역할을 하므로, 적절히 활용하는 것이 좋습니다.