[css] CSS - clip-path 속성 - 보일 범위 지정해 자르기 (= clip-path속성 = 클립패스속성)

1. clip-path 예제 - 이미지 보일 범위 자르기
2. clip-path 정의
3. clip-path 구문

clip-path 예제 - 이미지 보일 범위 자르기

 

<style>

img {

  clip-path: circle(40%);

}

</style>

<img src="https://i.imgur.com/57sBeiJ.gif" width="120" height="96">

 

결과보기

clip-path 정의

 

요소의 클리핑(clipping: 보일 범위 지정해 자름.) 범위 지정.
(※ 범위 안은 보이고, 범위 밖은 안 보임.)

 

---

 

1.

clip 속성은 폐기예고(Deprecated) 됨. 대신, clip-path 속성 사용.

 

2.

• 기본값: none
• 상속여부: X
• 애니가능: O (단, basic-shape 경우만)
• CSS버전: CSS Masking Module Level 1
• JS구문: object.style.clipPath="circle(50%)";

 

3.

IE제외한 주요 최신 브라우저 모두 지원.

(단, Firefox 제외한 나머지는 부분 지원.)

 

4. MDN clip-path 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

 

clip-path 구문

 

selector {clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;}

 

---

[속성값]

 

clip-source

SVG <clipPath> 요소에 대한 URL 정의.

 

basic-shape

요소를 기본 모양으로 자름. (가능값 종류)

• circle() - 원 (예) circle(50px at 0 100px)
• ellipse() - 타원 (예) ellipse(50px 60px at 0 10% 20%)
• polygon() - 다각형 (예) polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
• inset() - 직사각형 (예) inset(100px 50px)
• path() - 선택적 SVG 채우기 규칙과 SVG 경로 정의를 사용하여 모양을 정의.

 

margin-box

마진박스( = 바깥여백까지 포함한 박스를 참조박스로 사용.

 

border-box

보더박스(= 테두리까지 포함한 박스)를 참조박스로 사용.

 

padding-box

패딩박스 (= 안쪽여백까지 포함한 박스)를 참조박스로 사용.

 

content-box

콘텐트박스 (= 순수 내용까지만의 박스)를 참조박스로 사용.

 

fill-box

객체바운딩박스(object bounding box)를 참조박스로 사용.

 

stroke-box

스트록바운딩박스(stroke bounding box)를 참조박스로 사용.

 

view-box

SVG viewport를 참조박스로 사용.

 

none

자르기 안 함. (기본값)

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.