CSS Clip-Path 생성기 - 도형 시각 편집 온라인
비주얼 드래그 앤 드롭 에디터로 CSS clip-path 도형 생성. 다각형, 원형, 타원형, 인셋 경로를 라이브 미리보기로 제작.
자주 묻는 질문
CSS clip-path란 무엇인가요?
CSS clip-path는 요소의 어떤 부분이 보이는지를 결정하는 클리핑 영역을 생성하는 속성입니다. 클리핑 도형 안쪽은 표시되고, 바깥쪽은 숨겨집니다. polygon()으로 임의의 다각형, circle()로 원형, ellipse()로 타원형, inset()으로 둥근 모서리를 포함한 직사각형 영역을 지원합니다. 비직사각형 레이아웃, 장식적 섹션 구분선, 이미지 마스크, 창의적인 UI 요소를 만드는 데 널리 사용됩니다.
이 clip-path 생성기는 어떻게 사용하나요?
탭에서 도형 유형(Polygon, Circle, Ellipse, Inset)을 선택합니다. 다각형의 경우 캔버스에서 제어점을 드래그하여 모양을 조정하고, 가장자리를 클릭하여 새 점을 추가하거나, 프리셋 도형을 시작점으로 선택할 수 있습니다. 원형/타원형의 경우 슬라이더나 숫자 입력으로 반지름과 중심 위치를 조정합니다. 인셋의 경우 상하좌우 인셋 값을 설정하고 선택적으로 테두리 반지름을 추가합니다. 변경 사항에 따라 실시간으로 업데이트되는 미리보기를 확인한 후, 한 번의 클릭으로 생성된 CSS 코드를 복사하세요.
내 데이터는 안전한가요? 서버로 전송되는 것이 있나요?
네, 데이터는 완전히 안전합니다. 이 도구는 클라이언트 측 JavaScript를 사용하여 브라우저에서 완전히 실행됩니다. 이미지 데이터, 도형 설정 또는 기타 정보가 서버로 전송되지 않습니다. 모든 계산은 사용자의 기기에서 로컬로 수행되므로 완벽한 프라이버시가 보장됩니다.
퍼센트(%)와 픽셀(px) 단위의 차이점은 무엇인가요?
퍼센트(%) 값은 요소의 크기에 상대적이므로 clip-path가 반응형이 됩니다. 요소의 크기가 변경되면 자동으로 조정됩니다. 픽셀(px) 값은 절대적이고 고정적이며, 요소의 크기에 관계없이 clip-path가 동일한 크기를 유지합니다. 반응형 디자인에는 퍼센트를 사용하고(권장), 정확한 고정 크기 클리핑 영역이 필요할 때는 픽셀을 사용하세요.
clip-path 도형 간에 애니메이션을 적용할 수 있나요?
네, CSS clip-path 도형은 CSS 트랜지션과 애니메이션을 사용하여 애니메이션할 수 있습니다. 핵심 요구사항은 시작 도형과 끝 도형이 동일한 도형 함수(예: 둘 다 polygon())를 사용하고 동일한 수의 점을 가져야 한다는 것입니다. 예를 들어, 삼각형에서 다른 삼각형으로 부드럽게 전환하거나, 사각형에서 다이아몬드로 변형할 수 있습니다. 요소에 'transition: clip-path 0.3s ease'를 적용하면 됩니다.
어떤 프리셋 도형이 제공되나요?
삼각형, 다이아몬드, 오각형, 육각형, 팔각형, 별, 오른쪽 화살표, 십자, 사다리꼴, 베벨 등의 프리셋 다각형 도형을 제공합니다. 각 프리셋은 한 번의 클릭으로 적용할 수 있으며, 이후 제어점을 드래그하여 원하는 모양으로 추가 수정할 수 있습니다.
어떤 브라우저에서 CSS clip-path를 지원하나요?
기본 도형(polygon(), circle(), ellipse(), inset())을 사용하는 CSS clip-path는 2020년 1월부터 지원되었으며 모든 최신 브라우저에서 작동합니다: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+. 이전 WebKit 브라우저의 경우 -webkit-clip-path 벤더 접두사가 필요할 수 있습니다. 이 기능은 기본 기능으로 간주되며 프로덕션에서 안전하게 사용할 수 있습니다.
코드 예제
// CSS Clip-Path Generator - JavaScript Implementation
// Generate polygon clip-path from an array of [x, y] coordinate pairs
function generatePolygonClipPath(points) {
const coords = points
.map(([x, y]) => `${x}% ${y}%`)
.join(', ');
return `clip-path: polygon(${coords});`;
}
// Generate circle clip-path
function generateCircleClipPath(radius, centerX = 50, centerY = 50) {
return `clip-path: circle(${radius}% at ${centerX}% ${centerY}%);`;
}
// Generate ellipse clip-path
function generateEllipseClipPath(radiusX, radiusY, centerX = 50, centerY = 50) {
return `clip-path: ellipse(${radiusX}% ${radiusY}% at ${centerX}% ${centerY}%);`;
}
// Generate inset clip-path with optional border-radius
function generateInsetClipPath(top, right, bottom, left, borderRadius = 0) {
const inset = `${top}% ${right}% ${bottom}% ${left}%`;
if (borderRadius > 0) {
return `clip-path: inset(${inset} round ${borderRadius}%);`;
}
return `clip-path: inset(${inset});`;
}
// Common preset shapes
const PRESETS = {
triangle: [[50, 0], [100, 100], [0, 100]],
diamond: [[50, 0], [100, 50], [50, 100], [0, 50]],
hexagon: [[25, 0], [75, 0], [100, 50], [75, 100], [25, 100], [0, 50]],
star: [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
};
// Usage
console.log(generatePolygonClipPath(PRESETS.triangle));
// clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
console.log(generateCircleClipPath(40, 50, 50));
// clip-path: circle(40% at 50% 50%);
console.log(generateInsetClipPath(5, 10, 5, 10, 15));
// clip-path: inset(5% 10% 5% 10% round 15%);