Properties

Properties

Editing
  • account_tree
  • bug_report

transform-box상속 불가애니메이션 허용

변형과 관련된 참조 박스 타입을 지정한다.

설명

transform 및 transform-origin 속성에 의해 정의된 모든 변환은 요소의 참조 박스 위치 및 크기에 상대적이다.

최근 작성 시점에서 주요 웹브라우저에서 지원이는 되는 것으로 MDN에서 확인이 되나 실제로 사파리 웹브라우저에서만 동작을 한다.

사용 가능한 값 타입

<'transform-box'>

DEVDIC-Specified Data Types

transform-box 속성에 사용되는 타입이다.

  • CSS Transforms Module Level 1
    content-box | border-box | fill-box | stroke-box | view-box

사용되는 키워드

  • border-box

    CSS Box Model Module Level 3

    테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • content-box

    CSS Box Model Module Level 3

    실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

  • fill-box

    오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • stroke-box

    스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • view-box

    가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

값

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

  • 〈'transform-box'〉view-box기본값

    가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

  • CSS Box Model Module Level 3

    테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

  • CSS Box Model Module Level 3

    실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

  • 오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

  • 스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

구문

  • transform-box: border-box;
    CSS Transforms Module Level 1

테스트 도구

content-box vs border-box

버전 명세

Modules
Module NameStatusSummary
CSS Transforms Module Level 1추천 후보

Last review date: 2022-11-17

지원 웹브라우저

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com