Properties

Properties

Editing
  • account_tree
  • bug_report

clip-path

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

설명

쉐입(shape)을 생성하는 함수를 이용하여 원하는 모양을 만들 수 있다.

사용 가능한 값 타입

<'clip-path'>

DEVDIC-Specified Data Types

clip-path 속성에 사용되는 타입이다.

  • CSS Masking Module Level 1
    <clip-source> | [ <basic-shape> || <geometry-box> ] | none
  • CSS Masking Module Level 1
    <basic-shape> || <geometry-box>

    다음 아래와 같은 작성 패턴은 현재 Firefox, Safari 등 일부 웹브라우저에서만 지원하는 점을 주의하고 실제 적용시 확인이 필요하다.

    clip-path: margin-box circle(25% at 25% 25%);

포함된 타입

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

  • <basic-shape>

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

    • CSS Shapes Module Level 1
      inset() | rect() | circle() | ellipse() | polygon() | path()
    Details

    관련 함수

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

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

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

    • offset-path

      요소가 따라가야할 모션 경로를 지정하고 부모 컨테이너 또는 SVG  좌표 시스템 내에서 요소의 위치를 정의한다.

    • shape-outside

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

  • <clip-source>

    클리핑 소스로 사용할 리소스의 경로를 나타내는 타입이다.

    • CSS Masking Module Level 1
      <url>
    Details

    관련 함수

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

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

공통적으로 사용되는 값

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

  • none

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

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

  • 〈'clip-path'〉none
    CSS Masking Module Level 1

    설정하지 않는다.

  • CSS Masking Module Level 1

    정원을 생성한다.

    대상을 정원으로 마스킹(masking)한다.

    Example
  • CSS Masking Module Level 1

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

    대상을 타원으로 마스킹(masking)한다.

    Example
  • CSS Masking Module Level 1

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

    대상의 안쪽으로 직사각형을 삽입하고 필요에 따라 모서리를 둥글게 처리후 마스킹(masking)한다.

    Example
  • CSS Masking Module Level 1

    다각형을 생성한다.

    대상을 다각형으로 마스킹(masking)한다.

    Example
  • CSS Shape Module Level 1

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

    대상을 자유로운 패스 형태로 마스킹(masking)한다.

    Example
  • CSS Masking Module Level 1

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

    SVG 요소를 clip path로 지정하여 지정 대상을 클리핑(Clipping)한다.

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

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 스트로크 바운딩 박스(stroke bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 〈shape-box〉border-box
    CSS Box Model Module Level 3

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

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 〈shape-box〉content-box
    CSS Box Model Module Level 3

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

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 〈shape-box〉margin-box
    CSS Masking Module Level 1

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

    웹브라우저별 지원 여부를 확인할 필요가 있다.
    Example
  • 〈shape-box〉padding-box
    CSS Box Model Module Level 3

    내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 오브젝트 바운딩 박스(object bounding box)를 참조 박스로 사용한다. 웹브라우저에 따라서 SVG 컨텍스트에서만 적용될 수도 있다.

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 〈shape-box〉stroke-box

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

    웹브라우저별 지원 여부를 확인할 필요가 있다.
  • 가장 가까운 SVG 뷰포트를 참조 박스로 사용한다.

    웹브라우저별 지원 여부를 확인할 필요가 있다.

테스트 도구

기본 Shape을 이용한 클리핑 처리 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Masking Module Level 1후보 추천 초안

Last review date: 2023-1-14

지원 웹브라우저