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() 값은 원형의 잘린 영역을 만듭니다.
첫 번째 값은 길이 또는 백분율이며 원의 반경입니다.
두 번째 선택적 값을 사용하면 원의 중심을 설정할 수 있습니다.
아래 예에서는 키워드 값을 사용하여 오른쪽 상단의 잘린 원을 설정합니다.
길이나 백분율을 사용할 수도 있습니다.
평평한 가장자리를 확인하세요.
이 모든 값에서 도형은 요소의 여백 상자에 의해 잘립니다. 이미지에 원을 만들 때 도형이 이미지의 자연스러운 크기를 벗어나 확장되면 가장자리가 평평하게 됩니다.
circle(50%)가 적용되었습니다. 이미지가 정사각형이 아니기 때문에 상단과 하단의 여백 상자를 누르면 원이 잘립니다.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 제공)