caption-side 속성의 이해

caption-side 속성은
테이블 캡션(설명 또는 제목)의 위치를 지정합니다.

이 속성을 사용하여 <caption> 요소로 표시되는 캡션을 테이블을 기준으로 위쪽 또는 아래쪽에 배치할 수 있습니다.

데모

다음의 CSS 데모로 caption-side 속성의 사용 방법을 확인해 보세요.

CSS 데모: caption-side 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    caption-side: top | bottom
}

구문

CSS 
/* 키워드 값 */
caption-side: top; /* 초깃값 */
caption-side: bottom;

/* 전역 값 */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;

형식 정의

caption-side 속성의 형식 정의
초깃값 visible
적용 요소 테이블 캡션 요소
상속 예
애니메이션 아니오

값

<caption> 요소로 표시되는 캡션을 테이블을 기준으로 위치를 ​​지정합니다.
값의 의미는 다음과 같습니다.

top

캡션이 테이블 블록의 시작 쪽에 위치합니다. 초깃값입니다.

  • 일반적으로는 캡션이 테이블 블록의 위쪽에 배치됩니다.
  • writing-mode 속성의 설정으로 인해 테이블이 세로로 표시될 경우 테이블 블록이 시작하는 쪽에 위치합니다. 예를 들어 vertical-rl 값으로 설정되면 캡션은 오른쪽에 위치하고, vertical-lr 값으로 설정되면 캡션은 왼쪽에 위치합니다.

bottom

캡션이 테이블 블록의 끝 쪽에 위치합니다.

  • 일반적으로는 캡션이 테이블 블록의 아래쪽에 배치됩니다.
  • writing-mode 속성의 설정으로 인해 테이블이 세로로 표시될 경우 테이블 블록이 끝나 쪽에 위치합니다. 예를 들어 vertical-rl 값으로 설정되면 캡션은 왼쪽에 위치하고, vertical-lr 값으로 설정되면 캡션은 오른쪽에 위치합니다.

테이블 캡션의 수평 정렬을 설정하려면 text-algin 속성을 사용하세요.
예제에서도 확인할 수 있습니다.

값 지정을 위한 선택자

caption-side는 기본적으로 상속(inherit)되는 속성입니다.
따라서 <caption> 요소에 지정하지만, 많은 개발자들은 이 속성을 적용할 캡션의 부모 요소인 <table>에 지정하는 경우가 많습니다. 두 경우 모두 동일한 결과를 가져옵니다.

CSS 두 경우 모두 동일한 결과를 가져옵니다. 
/* caption 요소에 직접 지정하는 경우 */
caption {
    caption-side: bottom;
}

/* table 요소에 지정해서 caption 요소가 상속되게 하는 경우 */
table {
    caption-side: bottom;
}
HTML 
<table class="top-caption">
    <caption>테이블 위의 캡션</caption>
    <tr>
        <td>셀 데이터</td>
        <td>셀 데이터</td>
    </tr>
</table>
<br>
<table class="bottom-caption">
    <caption>테이블 아래의 캡션</caption>
    <tr>
        <td>셀 데이터</td>
        <td>셀 데이터</td>
    </tr>
</table>
CSS 
.top-caption caption {
    caption-side: top;
    text-align: left; /* 캡션 텍스트의 왼쪽 정렬 지정 */
}
.bottom-caption caption {
    caption-side: bottom;
    text-align: right; /* 캡션 텍스트의 오른쪽 정렬 지정 */
}

table {
    border: 1px solid red;
}
td {
    border: 1px solid blue;
    padding: 0.5em 1.5em;
}

코드 부연설명
text-align 속성으로 테이블 캡션의 수평 정렬을 지정할 수 있습니다.

실제 적용된 모습
caption-side 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
caption-side 1 12 1 1
top 80 80 72 13.1
bottom 80 80 72 13.1

명세서

caption-side 속성의 명세서 사양
명세서 사양
caption-side Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
#propdef-caption-side

참고문헌

같이 보기