Properties

Properties

Editing
  • account_tree
  • bug_report

caption-side

테이블 캡션의 위치를 설정한다.

설명

CSS Logical Properties and Values Level 1에서는 논리적인 방향을 의미하는 inline-start, inline-end 키워드가 추가되었다.

기존의 topbottom은 각각 테이블의 block-startblock-end로 재정의된다.

사용 가능한 값 타입

<'caption-side'>

DEVDIC-Specified Data Types

caption-side 속성에 사용되는 타입이다.

테이블의 캡션의 위치를 지정하는 값을 나타낸다. CSS 2에서는 top, bottom 키워드가 사용되었으나 CSS Logical Properties and Values Level 1에 부터는 논리적인 방향으로 대체되어진 inline-start, inline-end 키워드로 사용된다. 하지면 여전히 예전 방식도 유효하나 주의할 필요가 있다.

현재 inline-start, inline-end 키워드는 각 유저 에이전트별 지원 여부를 확인할 필요가 있다.
  • CSS Logical Properties and Values Level 1
    inline-start | inline-end
  • CSS2.2
    top | bottom

사용되는 키워드

  • block-end

    블록(block)의 끝을 의미하며 기존의 bottom 개념과 동일하지만 논리적인 방향을 나타낸다.

  • block-start

    블록(block)의 시작을 의미하며 기존의 top 개념과 동일하지만 논리적인 방향을 나타낸다.

  • inline-end

    CSS Logical Properties and Values Level 1

    인라인(inline)의 끝을 의미하며 기존의 right 개념과 동일하지만 논리적인 방향을 나타낸다.

  • inline-start

    CSS Logical Properties and Values Level 1

    인라인(inline)의 시작을 의미하며 기존의 left 개념과 동일하지만 논리적인 방향을 나타낸다.

  • bottom

    CSS2.0

    테이블 그리드 컨테이너 아래에 캡션 컨테이너를 배치한다.

  • top

    CSS2.0

    테이블 그리드 컨테이너 위에 캡션 컨테이너를 배치한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • CSS2.0

    테이블 그리드 컨테이너 위에 캡션 컨테이너를 배치한다.

  • CSS Logical Properties and Values Level 1

    인라인(inline)의 끝을 의미하며 기존의 right 개념과 동일하지만 논리적인 방향을 나타낸다.

    웹브라우저별 지원 현황을 참고한다.
  • CSS Logical Properties and Values Level 1

    인라인(inline)의 시작을 의미하며 기존의 left 개념과 동일하지만 논리적인 방향을 나타낸다.

    웹브라우저별 지원 현황을 참고한다.
    Example
  • CSS2.0

    테이블 그리드 컨테이너 아래에 캡션 컨테이너를 배치한다.

    Example

구문

  • caption-side: inline-end;
    CSS Logical Properties and Values Level 1
  • element.style.captionSide = "bottom";
    CSS2

테스트 도구

표의 캡션의 위치를 설정

버전 명세

Modules
Module NameStatusSummary
CSS Logical Properties and Values Level 1초안 작업

Last review date: 2022-8-23

지원 웹브라우저