offset-path상속 불가애니메이션 허용

사용 가능한 값 타입

• Motion Path Module Level 1

  none | path() | <url> | [ <basic-shape> || <geometry-box> ]

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

• <basic-shape>

  clip-path, shape-outside, offset-path 속성에 사용되는 형태를 나타낸다.

  • CSS Shapes Module Level 1

    inset() | rect() | circle() | ellipse() | polygon() | path()

  Details

  관련 함수

  모든 함수를 표시하지 않을 수도 있다.

  • circle()

    정원을 생성한다.

    • CSS Shape Module Level 1

      clip-path: circle(40% at 60% 50%);

      원을 생성하는 함수 테스트

  • ellipse()

    x축과 y축 반지름 값을 설정해 타원을 생성한다.

    • null, CSS Shape Module Level 1

      clip-path: ellipse(40% 50% at 60% 50%);

      타원을 생성하는 함수 테스트

  • inset()

    삽입될 직사각형을 정의한다.

    • null, CSS Shape Module Level 1Post pending

      clip-path: inset(20px round 20% );

      사각형을 삽입하여 클리핑 처리

  • path()

    자유로운 패스를 생성한다.

    • CSS Shape Module Level 1Post pending

      clip-path: path("M20,50 h200, v100, h-80, z");

      다각형을 생성하는 함수 테스트

  • polygon()

    다각형을 생성한다.

    • CSS Shape Module Level 1Post pending

      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

      다각형을 생성하는 함수 테스트

  • rect()

    사각형을 생성하는 함수이다.

    • CSS Shape Module Level 1Post pending

      clip: rect(50px 300px 250px 50px);

      다각형을 생성하는 함수 테스트

  동일한 타입을 사용하는 관련 속성

  모든 속성을 표시하지 않을 수도 있다.

  • clip-path

    요소의 클리핑 범위를 설정한다.

  • shape-outside

    인접 인라인 콘텐츠를 형태에 따라 감싸는 처리를 한다.

• <geometry-box>

  <basic-shape>과 함께 지정하면 <basic-shape>에 대한 참조 박스를 제공한다.

  자체적으로 지정된 경우 모서리 모양을 포함하여 지정된 박스의 가장자리를 클리핑 경로로 사용한다.

  • CSS Masking Module Level 1

    <shape-box> | fill-box | stroke-box | view-box

  Details

  포함된 타입

  • <shape-box>

    CSS 박스 모델에서 박스의 가장자리를 참조하는 키워드를 쉐입(shape)에게 사용하는 경우를 나타낸다.

    • <box> | margin-box

    Details

    사용되는 키워드

    • border-box

      CSS Box Model Module Level 3

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

    • content-box

      CSS Box Model Module Level 3

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

    • margin-box

      바깥쪽 여백 가장자리까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.

    • padding-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 뷰포트를 참조 박스로 사용한다.

  사용되는 키워드

  • fill-box

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

  • stroke-box

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

  • view-box

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

• <url>

  이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.

  • CSS Values and Units Module Level 4

    <url()> | <src()>

  Details

  포함된 타입

  • <src()>

    src() 함수의 매개변수를 나타낸다.

    • CSS Values and Units Module Level 4

      src( <string> <url-modifier>* )

    Details

    포함된 타입

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."

      Details

      동일한 타입을 사용하는 관련 속성

      모든 속성을 표시하지 않을 수도 있다.

      • font-family

        글꼴을 지정한다.

      • content

        가상 요소로 생성할 콘텐츠를 설정한다.

      • quotes

        인용 부호의 유형을 설정한다.

    • <url-modifier>

      URL의 의미나 해석을 어떻게든 변경하는 타입이다.

  • <url()>

    url() 함수의 매개변수를 나타낸다.

    • CSS Values and Units Module Level 4

      url( <string> <url-modifier>* ) | <url-token>

    Details

    포함된 타입

    • <url-token>

      URL Token Railroad Diagrams

    • <string>

      따옴표로 감싸진 데이터 유형을 표현한다.

      • "this is a 'string'."

      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<string>]

    • <url-modifier>

      URL의 의미나 해석을 어떻게든 변경하는 타입이다.

      Details 기능이 없다면 사용되는 타입이 동일한 타입을 사용하는 다른 항목에서 설명하거나 없는 경우이다.

      타입에 대한 자세한 설명은 다음 링크를 참조하라.[<url-modifier>]

  관련 함수

  모든 함수를 표시하지 않을 수도 있다.

  • url()

    CSS에서 사용할 외부 리소스를 가져온다.

    • CSS1, CSS Values and Units Module Level 3Post pending

      background-image: url();

      두 개 이상의 배경 이미지를 설정한다.

      
      

      url() 함수의 인수 값으로 SVG Data URL을 이용한 경우에 대한 샘플 코드

  동일한 타입을 사용하는 관련 속성

  모든 속성을 표시하지 않을 수도 있다.

  • background-image

    선택자를 갖는 요소에 배경 이미지를 설정한다.

  • clip-path

    요소의 클리핑 범위를 설정한다.

관련 함수

모든 함수를 표시하지 않을 수도 있다.

• path()

  자유로운 패스를 생성한다.

  • CSS Shape Module Level 1Post pending

    clip-path: path("M20,50 h200, v100, h-80, z");

    다각형을 생성하는 함수 테스트

공통적으로 사용되는 값

다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

• none

  어떠한 값도 설정하지 않음을 나타낸다.