CSS clip-path 모양을 생성하는 방법

모양, 크기, 위치를 입력하면 요소를 해당 형태로 마스킹하는 CSS clip-path 스니펫을 만들 수 있습니다. 입력을 생략하면 모양은 원, 크기는 50, 위치는 center를 기준으로 생성됩니다.

CSS clip-path 모양 생성의 기본 이해

CSS clip-path는 요소가 보이는 영역을 특정한 윤곽으로 제한하는 CSS 속성입니다. 이 도구는 이름으로 선택한 모양을 바탕으로 clip-path 선언이 들어 있는 CSS 스니펫을 생성합니다. 이미지, 카드, 배너처럼 사각형이 아닌 표시 영역이 필요한 요소에 적용할 CSS 초안을 빠르게 준비할 때 사용할 수 있습니다.

먼저 원하는 결과가 원이나 타원인지, 고정된 다각형인지 구분해 두면 입력과 결과를 이해하기 쉽습니다. 원과 타원은 크기와 위치를 입력해 형태와 배치 기준을 지정할 수 있습니다. 삼각형, 육각형, 오각형, 별, 다이아몬드는 각 모양에 마련된 polygon 기반 템플릿을 사용합니다. 이 다각형 템플릿은 고정된 백분율 좌표를 가지므로 원과 타원과 같은 방식으로 입력값을 조정하지 않습니다.

도구에서 생성하는 것은 요소에 적용할 CSS 스니펫입니다. 도구가 선택한 모양의 시각적 결과를 대신 판단하는 것이 아니라, 입력에 대응하는 clip-path 선언의 구조를 확인하고 필요한 위치에 옮겨 사용할 수 있도록 제공합니다. 따라서 입력을 시작하기 전에 적용할 요소와 원하는 윤곽을 정해 두면 생성된 내용을 검토하기 편합니다.

입력값을 정하고 CSS 스니펫 받기

1. 모양 입력란을 확인합니다. 전용 템플릿을 사용할 수 있는 이름은 circle, ellipse, triangle, hexagon, pentagon, star, diamond입니다. 원을 기본 모양으로 사용하려면 이 입력을 비워 둘 수도 있습니다. 지원 목록에 없는 이름을 임의의 새로운 기하 도형으로 기대하지 말고, 목록에 있는 이름을 선택하거나 입력합니다.

2. 원 또는 타원을 만들 때 크기 입력을 정합니다. 이 입력을 비워 두면 기본값 50이 사용됩니다. 원에서는 입력한 값이 백분율 크기로 들어갑니다. 타원에서는 입력한 값이 첫 번째 백분율에 사용되고, 두 번째 백분율에는 입력값에 0.6을 곱한 값이 사용됩니다. 따라서 같은 크기 입력을 사용해도 타원은 두 방향의 백분율이 서로 다르게 구성됩니다.

3. 원 또는 타원의 위치를 입력합니다. 위치를 비워 두면 center가 기본값으로 사용됩니다. 입력한 위치는 생성되는 선언에서 at 뒤에 배치됩니다. 예를 들어 위치에 top right를 입력하면 원이나 타원의 배치 기준이 해당 위치로 표현됩니다. 위치를 정할 때는 결과에 들어갈 CSS 값의 의도를 먼저 생각하고, 입력한 표현이 원하는 기준점인지 확인합니다.

4. 다각형을 사용할 경우에는 모양 이름을 먼저 확인한 뒤 생성 동작을 실행합니다. 삼각형, 육각형, 오각형, 별, 다이아몬드는 고정된 좌표 템플릿을 사용하므로 크기와 위치 입력을 바꿔 좌표가 다시 계산되는 결과를 기대하지 않습니다. 원이나 타원과 다각형을 같은 조정 방식으로 다루지 않는 것이 중요합니다.

5. 생성된 결과에서 clip-path 선언이 포함된 CSS 스니펫을 확인하고 복사합니다. 적용할 요소의 스타일에 선언을 옮긴 다음, 원하는 형태와 배치가 입력 의도에 맞는지 살펴봅니다. 원이나 타원의 결과가 기대와 다르면 크기와 위치 입력을 다시 검토합니다. 다각형 결과가 기대와 다르면 크기나 위치를 반복해서 바꾸기보다 선택한 모양 이름과 고정 템플릿이라는 특성을 먼저 확인합니다.

6. 입력을 생략한 경우에는 기본값을 결과 해석에 반영합니다. 모양을 비워 둔 결과는 circle, 크기를 비워 둔 결과는 50, 위치를 비워 둔 결과는 center를 기준으로 합니다. 이 기본값은 입력하지 않았다는 사실을 결과가 어떻게 표현하는지 설명해 주므로, 스니펫을 다른 스타일과 함께 사용할 때도 먼저 확인할 부분입니다.

생성된 결과의 의미와 조정 범위

생성 결과의 핵심은 요소 마스킹에 쓰이는 clip-path 선언입니다. 결과를 읽을 때는 먼저 모양이 원, 타원, 다각형 중 어느 유형인지 확인하고, 그다음 입력값이 해당 유형에서 어떤 방식으로 반영되는지 살펴봅니다. 모양 이름만 보고 원과 타원의 결과를 같은 구조로 해석하면 두 번째 백분율의 의미를 놓칠 수 있습니다.

원에서는 입력한 크기가 백분율 크기로 사용됩니다. 입력한 위치는 at 뒤에 배치되므로, 결과 선언에서 크기와 배치 기준을 각각 확인할 수 있습니다. 타원에서는 첫 번째 백분율이 입력한 크기이고 두 번째 백분율은 입력한 크기의 0.6배입니다. 예를 들어 입력값이 40이라면 타원 결과의 두 백분율은 40과 24를 기준으로 구성됩니다. 이 값은 타원 결과의 두 방향이 서로 다르게 나타나는 이유를 설명합니다.

다각형 결과는 polygon 기반 선언으로 읽습니다. 삼각형, 육각형, 오각형, 별, 다이아몬드는 고정된 백분율 좌표를 가진 템플릿을 사용합니다. 그러므로 이 모양에서 크기나 위치 입력을 바꿔 원과 타원처럼 좌표가 조정된다고 해석하면 안 됩니다. 다각형의 윤곽이 기대와 다를 때는 입력값의 미세 조정보다 모양 이름과 결과에 포함된 템플릿 유형을 먼저 확인하는 편이 적절합니다.

지원 목록에 없는 이름은 사용자 정의 기하 도형으로 변환되지 않습니다. 인식되지 않은 값은 원 기하를 사용하므로, 원하는 다각형이 생성되지 않았다면 이름이 triangle, hexagon, pentagon, star, diamond 중 하나인지 확인합니다. 이 확인은 입력 오타와 다각형 템플릿의 특성을 구분하는 데 도움이 됩니다.

마지막으로 결과를 적용할 때는 스니펫 안의 선언이 의도한 요소의 스타일에 들어갔는지 확인합니다. 도구가 제공하는 결과의 범위는 clip-path 선언이 포함된 CSS 스니펫을 만드는 데 있습니다. 원, 타원, 다각형의 차이를 결과 안에서 확인한 뒤 적용하면 입력을 다시 바꿔야 하는 이유를 더 쉽게 찾을 수 있습니다.

사용 예시

카드 이미지의 오른쪽 위에 크기 입력 40이 반영된 원형 마스크를 적용하려는 상황입니다.

모양에 circle, 크기에 40, 위치에 top right를 입력한 뒤 CSS 스니펫을 생성합니다.

결과 CSS에는 clip-path: circle(40% at top right)와 같은 원형 선언이 포함됩니다.

제한 사항

• 다각형 템플릿은 고정된 백분율 좌표를 사용하므로 원과 타원처럼 크기와 위치 입력으로 좌표를 조정할 수 없습니다. 인식되지 않는 이름은 원 기하를 사용합니다.

자주 발생하는 오류

• 지원 목록에 없는 이름을 입력하고 사용자 정의 모양이 나올 것으로 기대하는 경우가 있습니다. 인식되지 않은 값은 원 기하를 사용하므로, triangle, hexagon, pentagon, star, diamond처럼 지원되는 이름을 다시 입력하거나 원과 타원 중 하나를 선택하세요.

자주 묻는 질문

모양을 비워 두면 어떻게 되나요?

모양 입력을 비워 두면 circle이 기본값으로 사용됩니다. 크기와 위치도 입력하지 않으면 각각 50과 center가 사용되므로, 세 입력을 생략한 결과는 기본 원형 설정을 기준으로 해석합니다.

원과 타원의 크기 입력은 어떻게 반영되나요?

원에서는 입력한 크기가 백분율 크기로 사용되고 위치가 at 뒤에 배치됩니다. 타원에서는 입력한 크기가 첫 번째 백분율에 사용되며, 두 번째 백분율은 입력값에 0.6을 곱한 값으로 구성됩니다.

원하는 모양 이름이 목록에 없으면 사용자 정의 도형이 만들어지나요?

지원 목록에 없는 이름은 사용자 정의 도형으로 변환되지 않고 원 기하를 사용합니다. 원하는 다각형이 필요하다면 triangle, hexagon, pentagon, star, diamond 가운데 해당하는 이름을 사용하세요.