caption-side

1 개요
2 문법
3 예제

개요

caption-side는 표(table)의 caption 위치를 정하는 속성입니다.

기본값 : top
상속 : Yes
애니메이션 : No
버전 : CSS Level 2

문법

caption-side: top | bottom | initial | inherit

top : 기본값으로, 표의 위에 캡션을 위치시킵니다.
bottom : 표의 아래에 캡션을 위치시킵니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      table { width: 100%; }
      table, td { border: 1px solid #444444; }
      .abc { caption-side: top; }
      .xyz { caption-side: bottom; }
    </style>
  </head>
  <body>
    <p>Captionside Top</p>
    <table>
      <caption class="abc">caption-side: top;</caption>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor</td>
      </tr>
      <tr>
        <td>Sit</td>
        <td>Amet</td>
        <td>Elit</td>
      </tr>
    </table>
    <p>Captionside Bottom</p>
    <table>
      <caption class="xyz">caption-side: bottom;</caption>
      <tr>
        <td>Lorem</td>
        <td>Ipsum</td>
        <td>Dolor</td>
      </tr>
      <tr>
        <td>Sit</td>
        <td>Amet</td>
        <td>Elit</td>
      </tr>
    </table>
  </body>
</html>

CSS / Reference / calc()

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px );

CSS / Reference / border-style

border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / quotes

quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다. 기본값 : 큰따옴표 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / background-repeat

background-repeat는 배경 이미지의 반복 여부와 반복 방향을 정하는 속성입니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / font-weight

font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / background-image

background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-color

background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1