clip-path, radius, shadow

이번에는 사각형 박스를 조금 더 도형답게 꾸며봅니다.

CSS box는 기본적으로 사각형입니다. 그런데 디자인 툴에는 둥근 사각형, 잘린 도형, 그림자, 말풍선 같은 것들이 필요합니다. 이때 border-radius, clip-path, box-shadow가 등장합니다.

박스 하나가 갑자기 재주를 부리기 시작하는 순간입니다.

border-radius는 corner를 곡선으로 바꾼다

border-radius는 사각형의 모서리를 둥글게 만듭니다. 단순해 보이지만 편집기에서는 꽤 중요한 속성입니다.

border-radius: 12px;

모델로 보면 각 corner마다 반지름을 가진다고 볼 수 있습니다.

topLeftRadius
topRightRadius
bottomRightRadius
bottomLeftRadius

나중에 사용자가 corner handle을 드래그하게 만들고 싶다면, 이 반지름 값도 편집 가능한 모델이어야 합니다. 단순히 CSS 문자열로만 저장하면 조작이 불편해집니다.

clip-path는 박스를 잘라낸다

clip-path는 원래 박스였던 것을 다른 형태로 보이게 만듭니다.

rounded rect는 corner마다 quarter circle distance test를 사용한다.
clip path polygon hit test는 point-in-polygon 문제다.
shadow blur는 시각 overflow를 만든다.

예를 들어 polygon clip은 점 목록으로 도형을 정의합니다.

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

여기서 중요한 점은 layout box가 바뀌지 않는다는 것입니다. 보이는 모양은 사다리꼴이어도 DOMRect는 여전히 원래 박스 기준입니다. 그러면 hit testing을 어떻게 할지 정책을 정해야 합니다. 박스 기준으로 잡을지, 실제 clip shape 기준으로 잡을지 말입니다.

shadow는 bounds 밖으로 나간다

box-shadow는 시각적으로 박스 밖에 픽셀을 만듭니다.

box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);

이 그림자는 getBoundingClientRect()에 포함되지 않습니다. DOMRect는 요소의 border box를 말하지, 그림자까지 친절하게 챙겨주지 않습니다. 그래서 selection outline을 그릴 때 shadow까지 포함할지, 오브젝트의 geometry만 표시할지 결정해야 합니다.

대부분의 편집기에서는 geometry bounds와 visual bounds를 구분합니다.

geometry bounds = 실제 오브젝트 크기
visual bounds = shadow, filter 등을 포함한 시각 범위

데모에서 볼 것

데모에서는 radius, clip-path, shadow를 바꾸면서 “모델의 박스”와 “눈에 보이는 모양”이 어떻게 달라지는지 확인합니다.

오늘의 핵심은 이겁니다. CSS는 박스를 다양한 도형처럼 보이게 만들 수 있습니다. 하지만 보이는 모양과 계산되는 bounds가 항상 같지는 않습니다. 편집기는 이 차이를 모른 척하면 안 됩니다. 모른 척하면 선택 도구가 삐집니다.