도구 실행
CSS 클립 패스 생성기는 웹 디자인에서 요소를 다양한 기하학적 형태로 마스킹할 때 사용하는 clip-path 속성 코드를 생성하는 도구입니다. 원형(circle)과 타원형(ellipse)은 물론 삼각형, 육각형, 오각형, 별 모양, 다이아몬드 같은 다각형(polygon) 템플릿을 지원합니다. 원형과 타원형을 선택하면 크기 비율과 기준 위치를 지정하여 세부적인 마스크 형태를 조정할 수 있습니다. 다각형 형태는 사전에 정의된 고정 좌표를 바탕으로 생성되므로 별도의 복잡한 계산 없이 즉시 복사하여 CSS 스타일에 적용할 수 있습니다. 웹 퍼블리싱 및 UI 스타일 작업 시 필요한 마스킹 코드를 빠르고 정확하게 작성해 보세요.
사용 방법
- 원하는 마스크 도형(원, 타원, 삼각형, 육각형, 오각형, 별, 다이아몬드 등)을 입력하거나 기본값을 유지합니다.
- 원형 또는 타원형인 경우 필요한 크기 수치와 기준 위치(예: center, top left 등)를 입력합니다.
- 실행 버튼을 클릭하여 생성된 CSS clip-path 코드 결과를 확인합니다.
- 출력된 CSS 코드를 복사하여 웹페이지의 스타일시트 또는 인라인 스타일에 붙여넣어 적용합니다.
예시
- 도형에 circle, 크기에 40, 위치에 center를 입력하면 원형 마스킹용 CSS 코드가 생성됩니다.
- 도형에 star를 입력하면 별 모양 다각형 좌표가 포함된 clip-path 코드가 즉시 출력됩니다.
자주 묻는 질문
지원하지 않는 도형 이름을 입력하면 어떻게 처리되나요?
지원 목록에 없는 도형 이름을 입력하면 기본 원형(circle) 기준으로 코드가 생성됩니다.
다각형 모양에서도 크기와 위치 설정이 반영되나요?
삼각형, 육각형, 별 등 다각형 형태는 사전에 정의된 고정 좌표 템플릿을 사용하므로 크기 및 위치 값은 원형과 타원형에만 적용됩니다.
타원형(ellipse) 마스크의 가로세로 비율은 어떻게 결정되나요?
입력한 크기 값이 가로 비율로 사용되며, 세로 비율은 가로 크기의 60%로 자동 계산되어 지정된 위치에 배치됩니다.