CSS에서 클리핑을 사용하면 상자처럼 보이는 디자인에서 모든 것을 벗어날 수 있습니다. 다양한 기본 도형 또는 SVG를 사용하여 클립 경로를 만들 수 있습니다. 그런 다음 표시하고 싶지 않은 요소 부분을 잘라냅니다.
웹페이지의 요소는 모두 직사각형 상자 안에 정의되어 있습니다.
그렇다고 해서 모든 것을 상자처럼 만들어야 하는 것은 아닙니다.
CSS clip-path
속성을 사용하여 이미지 또는 다른 요소의 일부를 잘라내어 흥미로운 효과를 만들 수 있습니다.
위의 예에서 풍선 이미지는 정사각형입니다 (출처).
clip-path
및 기본 도형 값 circle()
를 사용하면 풍선 주위의 추가 하늘이 잘리면서 페이지에 원형 이미지가 남습니다.
이미지가 링크이므로 clip-path
속성에 관한 다른 내용을 확인할 수 있습니다.
이미지의 숨겨진 부분에서는 이벤트가 실행되지 않으므로 이미지의 보이는 영역만 클릭할 수 있습니다.
클리핑은 이미지뿐만 아니라 모든 HTML 요소에 적용할 수 있습니다.
clip-path
를 만드는 방법에는 여러 가지가 있으며 이 게시물에서는 몇 가지 방법을 살펴보겠습니다.
브라우저 호환성
기존 브라우저의 경우 대체로 브라우저에서 clip-path
속성을 무시하고 잘리지 않은 이미지를 표시하도록 할 수 있습니다.
문제가 발생하면 기능 쿼리에서 clip-path
를 테스트하고 지원되지 않는 브라우저에 대체 레이아웃을 제공할 수 있습니다.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
기본 도형
clip-path
속성은 여러 값을 사용할 수 있습니다.
첫 번째 예시에서 사용된 값은 circle()
입니다.
이는 CSS 도형 사양에 정의된 기본 도형 값 중 하나입니다.
즉, 영역을 클리핑할 수 있고 shape-outside
에 동일한 값을 사용하여 텍스트가 도형 주위에 줄바꿈되도록 할 수 있습니다.
기본 도형의 전체 목록은 다음과 같습니다.
inset()
inset()
값은 요소의 가장자리에서 잘린 영역을 인셋하며 상단, 오른쪽, 하단, 왼쪽 가장자리의 값을 전달할 수 있습니다.
또한 round
키워드를 사용하여 잘린 영역의 모서리를 굽히기 위해 border-radius
를 추가할 수도 있습니다.
이 예에서는 모두 .box
클래스를 가진 두 개의 상자가 있습니다.
첫 번째 상자는 클리핑이 없고, 두 번째 상자는 inset()
값을 사용하여 잘립니다.
circle()
보시다시피 circle()
값은 원형의 잘린 영역을 만듭니다.
첫 번째 값은 길이 또는 백분율이며 원의 반경입니다.
두 번째 선택적 값을 사용하면 원의 중심을 설정할 수 있습니다.
아래 예에서는 키워드 값을 사용하여 오른쪽 상단의 잘린 원을 설정합니다.
길이나 백분율을 사용할 수도 있습니다.
평평한 가장자리를 확인하세요.
이 모든 값에서 도형은 요소의 여백 상자에 의해 잘립니다. 이미지에 원을 만들 때 도형이 이미지의 자연스러운 크기를 벗어나 확장되면 가장자리가 평평하게 됩니다.
ellipse()
타원은 기본적으로 찌그러진 원이며 circle()
와 매우 유사하게 작동하지만 x의 반경과 y의 반지름, 그리고 타원의 중심 값을 허용합니다.
polygon()
polygon()
값을 사용하면 각 점의 좌표를 설정하여 상당히 복잡한 도형을 만들고 필요한 만큼 많은 점을 정의할 수 있습니다.
다각형을 만들고 가능한 작업을 알아보려면 clip-path
생성기인 Clippy를 확인한 다음 코드를 복사하여 자체 프로젝트에 붙여넣으세요.
상자의 도형 값
CSS 도형에도 정의되는 것은 상자 값의 도형입니다.
이는 CSS 상자 모델과 관련이 있습니다. 콘텐츠 상자, 패딩 상자, 테두리 상자, 그리고 키워드 값이 content-box
, border-box
, padding-box
, margin-box
인 여백 상자입니다.
이러한 값은 단독으로 사용하거나 기본 도형과 함께 사용하여 도형에서 사용하는 참조 상자를 정의할 수 있습니다. 예를 들어 다음 코드는 도형을 콘텐츠의 가장자리로 자릅니다.
.box {
clip-path: content-box;
}
이 예에서 원은 기본값인 margin-box
대신 content-box
를 참조 상자로 사용합니다.
.box {
clip-path: circle(45%) content-box;
}
현재 브라우저는 clip-path
속성에 상자 값 사용을 지원하지 않습니다.
하지만 shape-outside
에서는 지원됩니다.
SVG 요소 사용
잘린 영역을 기본 도형보다 더 세밀하게 제어하려면 SVG clipPath
요소를 사용하세요.
그런 다음 url()
를 clip-path
의 값으로 사용하여 이 ID를 참조합니다.
잘린 영역에 애니메이션 적용
CSS 전환 및 애니메이션을 clip-path
에 적용하여 흥미로운 효과를 만들 수 있습니다.
다음 예에서는 마우스 오버 시 반경 값이 다른 두 원 사이를 전환하여 원을 애니메이션 처리합니다.
애니메이션을 클리핑과 함께 사용할 수 있는 창의적인 방법은 다양합니다. CSS 도움말에서 clip-path로 애니메이션 만들기에서 몇 가지 아이디어를 제공합니다.
사진: 매튜 헨리(Burst 제공)