CSS clip-path 생성기

CSS clip-path 생성기란?

CSS clip-path 생성기는 CSS clip-path 속성을 시각적으로 편집하는 무료 도구로, 요소를 직사각형이 아닌 모양으로 자르고 싶은 프런트엔드 개발자와 디자이너를 위해 만들어졌습니다. 드롭다운에서 프리셋을 고르세요 — 반경과 중심점을 갖는 circle()과 ellipse(), 원하는 만큼 꼭짓점을 추가하는 polygon(), 네 변의 안쪽 여백을 갖는 inset(), 그리고 모서리 반경을 갖는 둥근 inset() 변형입니다. 각 값은 숫자 입력으로 넣는 백분율이며, 바둑판 배경의 미리보기 박스가 결과 모양을 실시간으로 보여 줍니다. 완성된 clip-path CSS가 생성되어 복사할 수 있습니다. 좌표를 일일이 세지 않고도 이미지 마스킹, 대각선 섹션 구분, 육각형 아바타, 말풍선 모양 등을 만들 수 있습니다.

CSS clip-path 생성기 사용법

1. 프리셋 드롭다운에서 모양을 고릅니다: 원, 타원, 다각형, inset, 둥근.
2. 원이나 타원은 반경(또는 X/Y 반경)과 중심 X/Y 위치를 백분율로 설정합니다.
3. 다각형은 각 꼭짓점의 X·Y 백분율을 편집합니다. ‘꼭짓점 추가’로 꼭짓점을 늘리고 값을 편집해 순서를 조정합니다.
4. inset이나 둥근은 위·오른쪽·아래·왼쪽 여백을 설정합니다. 둥근은 모서리 반경도 함께 지정합니다.
5. 입력하는 대로 미리보기가 박스를 자르는 모습을 확인합니다.
6. 생성된 clip-path CSS를 복사해 스타일시트에 붙여넣습니다.

예시

프리셋 원, 반경 50%, 중심 50% 50%

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

프리셋 다각형, 꼭짓점 (50,0) (100,100) (0,100)

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

프리셋 둥근, 네 변 inset 10%, 모서리 반경 20%

clip-path: inset(10% 10% 10% 10% round 20%);

자주 묻는 질문

clip-path는 어디에 쓰나요?

CSS clip-path 속성은 요소를 기본 도형으로 잘라 도형 안쪽 영역만 보이게 합니다. 원형 아바타, 대각선 섹션 자르기, 육각형 그리드, 이미지 마스크, 말풍선 등에 좋으며 추가 이미지나 SVG 파일이 필요 없습니다.

다각형 프리셋은 어떻게 동작하나요?

polygon()은 X/Y 꼭짓점 목록을 순서대로 이어 모양을 그립니다. 각 점의 백분율 값을 편집하고 ‘꼭짓점 추가’로 꼭짓점을 더 넣을 수 있으며, 마지막 점은 자동으로 첫 점과 이어집니다. 모양이 유효하도록 최소 3개의 점이 유지됩니다.

왜 값이 백분율인가요?

백분율은 자르기가 요소 크기에 맞춰 스케일되게 해, 같은 clip-path가 어떤 크기에서도 동작합니다. 0%는 요소 박스의 왼쪽 또는 위 가장자리이고 100%는 오른쪽 또는 아래 가장자리입니다.

둥근 프리셋은 무엇을 더해 주나요?

둥근 프리셋은 round 모서리 반경을 붙인 inset()을 사용해, 각 변이 안쪽으로 잘리고 모서리가 둥근 사각형을 만듭니다. 일반 border-radius로는 inset 자르기와 결합할 수 없는 부드러운 프레임 자르기에 유용합니다.

제 데이터가 어딘가로 전송되나요?

아니요. 이 생성기는 전부 JavaScript로 브라우저 안에서 실행됩니다 — 모양 값이 기기를 벗어나지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.