[CSS] clip-path (feat.html path)

사이트를 둘러보다 글씨체를 확인하기 위해 개발자도구를 눌러 확인해 보았더니 path라는 태그로 이루어져 있는 것을 많이 봐서 path에 대해 공부를 해보고 싶었다.

 

유튜브에 검색해봤을 때 일단 css의 clip-path에 대한 강의들이 있어서 먼저 공부해 보았다.

 

일단

https://bennettfeely.com/clippy/

Clippy — CSS clip-path maker

이 사이트에 들어가면

이와 같은 화면이 나온다. 오른쪽의 다양한 도형이 있고, 하단의 코드가 바로 화면에 나오는 도형을 만들어주는 clip-path코드이다.

5개의 div를 만들어주고 각 도형에 맞는 클래스명을 붙여준 후

코드를 붙여보았다.

결과

 

hover효과도 줄 수 있다. 

근데 별에서 다각형으로 변하는 효과를 주려고 했더니 transition이 먹히지 않았다.

아마 추측으로는 저 도형에 있는 점의 개수(좌표개수)가 같아야 하는 듯.. 별모양상태에서 직접 점을 드래그해서 변경해 줬더니 된다.

 

마찬가지로 애니메이션 효과도 이용할 수 있음

 

도형별 clip-path문법

1. 다각형 

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

위는 삼각형이고 꼭짓점의 개수만큼 좌표값을 설정해 주면 되나 봄

 

2. 원(정원)

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

3. 타원

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

 

근데 이런 단순한 모양 말고 폰트같이 현란한(?) 모양을 path로 만드는 법을 아는 것이 나의 목적이었는데

이거는 아마도 html의 path태그를 이용하는 것 같다

 

아마 이 좌표를 하나하나 직접 입력하는 건 아닐 것 같고.. 일러스트레이터 같은 걸로 이미지를 벡터파일로 만들어서 코드를 변환하는 거라고 추측을 해보고,

한번 피그마로 별모양을 만들어서 svg로 저장한 다음 메모장을 열어 실험해 봤더니

 

<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 0L3.67354 2.07295H5.85317L4.08981 3.3541L4.76336 5.42705L3 4.1459L1.23664 5.42705L1.91019 3.3541L0.146831 2.07295H2.32646L3 0Z" fill="#D9D9D9"/>
</svg>

 

이와 같은 텍스트가 들어있었다

일단 원하는 이미지를 벡터로 만든 다음 메모장의 코드를 붙여넣기하면 될 것 같다

색상을 변경하려면 끝의 fill을 이용하면 될 것 같다.

 

 

 

잘 나온다(svg태그 안에 width랑 height값이 6으로 되어 있는데 내가 css에 속성을 따로 주어서 크기가 커짐)

viewBox="0 0 6 6"는 0,0,6,6 크기의 viewbox(프레임)를 제공하는 것을 의미하는 것 같다

(내가 피그마에서 6px 6px의 별모양을 만들어서 이런 값이 나온 듯..)

뒤의 w3.org 링크는 지워도 되는 것 같다

 

이 내용도 블로그에 다시 한번 정리해야겠당

 

---

 

참고링크

1. 🔗

2. 🔗