CSS의 caption-side 속성은 HTML 표에서 캡션(caption)이 표시될 위치를 제어하는 데 사용됩니다. 이 속성을 활용하면 캡션을 표의 위쪽(top) 또는 아래쪽(bottom)에 자유롭게 배치할 수 있어, 문서의 디자인 의도에 맞게 표를 더욱 유연하게 구성할 수 있습니다.
caption-side 속성의 주요 값
caption-side 속성에는 다음과 같은 값을 사용할 수 있습니다.
- top: 캡션을 표의 상단에 배치합니다. (기본값)
- bottom: 캡션을 표의 하단에 배치합니다.
예제
아래 코드를 실행하면 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>위 예제에서는 클래스 선택자인 .top과 .bottom을 각각 정의하여, 같은 HTML 구조의 두 표에서 서로 다른 캡션 위치를 적용했습니다. 이처럼 caption-side 속성을 사용하면 별도의 추가 마크업 없이 CSS만으로 캡션의 배치를 손쉽게 조정할 수 있습니다.