[CSS] clip-path, clip

clip-path

요소의 클리핑 범위를 지정한다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨진다.

---

clip-path 문법

<basic-shape>자료형에 따라 문법이 달라지기 때문에 자세한 것은 MDN을 참고하세요.

 

inset() 함수

clip-path: inset(top right bottom left);

- 사각형

- 값은 띄어쓰기로 구분한다.

- 값(매개변수)의 갯수

• 1개인 경우: 상, 하, 좌, 우를 한꺼번에 컨트롤 한다.
• 2개인 경우: 상,하 / 좌,우로 나눠서 컨트롤 한다.
• 4개인 경우: 상/하/좌/우를 각각 컨트롤 한다.

polygon() 함수

clip-path: polygon(x좌표 y좌표, x좌표 y좌표, x좌표 y좌표);

- 다각형 

- 띄어쓰기로 구분하고, 꼭지점은 ,(쉼표)로 구분한다.

 

[inset() 함수 예제]

See the Pen [css] clip-path by mill (@millfeel) on CodePen.

 

 

---

clip 속성 (대신 clip-path 속성을 사용하는 것을 권장한다.)

- 요소의 보이는 부분을 정의한다.

- position : absolute 또는 position : fixed 요소에만 적용된다.

---

clip 속성 문법

clip: rect(top, right, bottom, left);

<top>과<bottom> 값은 상단의 오프셋이고, <right>와 <left>는 왼쪽의 오프셋이다.

 

See the Pen [css] clip by mill (@millfeel) on CodePen.

---

[공부 좌표]

clip

clip-path

<basic-shape>