테이블
caption-side
테이블 내부의 캡션 엘리먼트 정렬을 제어하는 유틸리티입니다.
| Class | Styles |
|---|---|
caption-top | caption-side: top; |
caption-bottom | caption-side: bottom; |
예제
테이블 상단에 캡션 배치하기
caption-top 유틸리티를 사용해 캡션 엘리먼트를 테이블 상단에 배치할 수 있습니다:
| 레슬러 | 시그니처 기술 |
|---|---|
| "스톤 콜드" 스티브 오스틴 | 스톤 콜드 스터너, 루 테즈 프레스 |
| 브렛 "더 히트맨" 하트 | 샤프슈터 |
| 레이저 라몬 | 레이저스 엣지, 폴어웨이 슬램 |
<table> <caption class="caption-top"> 표 3.1: 프로레슬러와 그들의 시그니처 기술 </caption> <thead> <tr> <th>레슬러</th> <th>시그니처 기술</th> </tr> </thead> <tbody> <tr> <td>"스톤 콜드" 스티브 오스틴</td> <td>스톤 콜드 스터너, 루 테즈 프레스</td> </tr> <tr> <td>브렛 "더 히트맨" 하트</td> <td>샤프슈터</td> </tr> <tr> <td>레이저 라몬</td> <td>레이저스 엣지, 폴어웨이 슬램</td> </tr> </tbody></table>테이블 하단에 캡션 배치하기
caption-bottom 유틸리티를 사용해 캡션 엘리먼트를 테이블 하단에 배치할 수 있습니다.
| 레슬러 | 시그니처 기술 |
|---|---|
| "스톤 콜드" 스티브 오스틴 | 스톤 콜드 스터너, 루 테즈 프레스 |
| 브렛 "더 히트맨" 하트 | 샤프슈터 |
| 레이저 라몬 | 레이저스 엣지, 폴어웨이 슬램 |
<table> <caption class="caption-bottom"> 표 3.1: 프로레슬러와 그들의 시그니처 기술 </caption> <thead> <tr> <th>레슬러</th> <th>시그니처 기술</th> </tr> </thead> <tbody> <tr> <td>"스톤 콜드" 스티브 오스틴</td> <td>스톤 콜드 스터너, 루 테즈 프레스</td> </tr> <tr> <td>브렛 "더 히트맨" 하트</td> <td>샤프슈터</td> </tr> <tr> <td>레이저 라몬</td> <td>레이저스 엣지, 폴어웨이 슬램</td> </tr> </tbody></table>반응형 디자인
접두사 a caption-side 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<caption class="caption-top md:caption-bottom ..."> <!-- ... --></caption>변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
