CSS clip-path
생성기
드래그 앤 드롭으로 CSS clip-path 모양을 직관적으로 만드는 생성기입니다. 다각형, 원형, 타원형을 지원하며 즉시 사용할 수 있는 CSS 코드를 제공합니다.
에디터
캔버스를 클릭하여 정점을 추가합니다. 드래그하여 이동하고, 우클릭하여 삭제합니다.
미리보기 설정
Hover 애니메이션 (선택)
활성화하면 호버 시 clip-path와 transition을 위한 CSS가 생성됩니다. 다각형 모드의 경우 정점의 수가 일치하는지 확인하세요.
에디터에서 기본 상태의 모양을 편집하고 있습니다. Hover 상태로 전환하여 호버 시 모양을 설정하세요.
생성된 코드
CSS clip-path 생성기 소개
이 생성기는 드래그 앤 드롭 작업을 통해 직관적으로 CSS clip-path 속성을 만들 수 있는 무료 온라인 도구입니다.
이전에는 이미지를 자르기 위해 수동으로 좌표를 계산해야 했습니다. 이 도구를 사용하면 도형을 시각적으로 만들고 단 한 번의 클릭으로 CSS 코드를 생성할 수 있습니다.
다양한 도형을 지원하며, 심지어 부드러운 Hover 애니메이션 코드도 생성해 줍니다.
사용 방법
1️⃣ 모양 선택
사전 설정 또는 탭에서 원하는 도형을 선택합니다.
2️⃣ 모양 조정
캔버스에서 정점을 드래그합니다. 다각형 모드에서는 클릭하여 정점을 추가하거나 우클릭하여 삭제할 수 있습니다.
3️⃣ 코드 복사
미리보기가 마음에 들면 '복사'를 클릭하고 자신의 코드에 붙여넣습니다.
clip-path 속성 가이드
주요 도형 함수에 대한 설명입니다:
■ polygon() — 다각형
clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)
원하는 만큼의 정점 좌표를 지정합니다. 최소 3개의 정점이 필요합니다.
■ circle() — 원형
clip-path: circle(radius at centerX centerY)
원의 반지름과 중심 좌표를 지정합니다.
■ ellipse() — 타원형
clip-path: ellipse(rx ry at centerX centerY)
X, Y 방향의 반지름을 각각 다르게 지정하여 타원을 그립니다.
■ inset() — 내부 여백 (사각형)
clip-path: inset(top right bottom left round radius)
요소의 경계에서 안쪽으로 얼마나 자를지 지정합니다.
자주 묻는 질문
- Q.clip-path가 SEO에 영향을 미치나요?
- 아니요. clip-path 속성은 시각적 렌더링만 변경하며 HTML 구조나 텍스트 내용을 변경하지 않습니다. 잘린 영역 밖의 텍스트도 검색 엔진에서 정상적으로 인식하고 색인화합니다.
- Q.CSS clip-path와 SVG clipPath의 차이점은 무엇인가요?
- CSS clip-path는 기본 함수를 사용하여 스타일시트 내에서 전적으로 작동합니다. 반면 SVG clipPath는 SVG 요소를 정의하고 이를 참조합니다. CSS는 적용하기 더 쉽지만, 매우 복잡한 경로를 다루기에는 SVG가 더 적합합니다.
- Q.hover 시 clip-path 애니메이션을 적용할 수 있나요?
- 네. 전환 전후의 정점 수가 정확히 같으면(다각형의 경우) transition 속성을 사용하여 부드럽게 애니메이션을 적용할 수 있습니다.
- Q.clip-path 외부 영역은 클릭할 수 있나요?
- 아니요. 클리핑된 영역 밖에서는 클릭이나 호버 같은 포인터 이벤트가 발생하지 않습니다. 이를 통해 대화형 요소가 예상대로 작동하도록 보장합니다.
- Q.이 도구를 사용할 때 보안 위험이 있나요?
- 전혀 없습니다. 자신의 이미지를 업로드하고 미리 보는 것을 포함한 모든 과정이 브라우저 내에서 100% 로컬로 실행됩니다.
활용 사례
대각선 히어로 섹션
웹사이트의 히어로 헤더에서 배경 이미지를 대각선으로 잘라 역동적인 첫인상을 만듭니다.
독특한 프로필 이미지
일반적인 원형 대신 맴버 아바타 이미지를 육각형이나 별 모양 같은 눈길을 끄는 모양으로 자를 수 있습니다.
Hover 시 드러나는 애니메이션
작게 잘린 이미지로 시작하여 호버 시 전체 크기로 부드럽게 커지는 애니메이션을 쉽게 만듭니다.
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.