최근 우리는 새로운 shape() 함수(이제 Baseline 포함!)와 corner-shape 속성을 접하게 되었습니다. CSS로 도형을 만드는 데 있어 그 외에 무엇이 더 필요할까요? 바로 border-shape 속성입니다!

shape()? corner-shape? border-shape?! 이 모든 게 어디서 갑자기 나타난 거죠?

만약 여러분이 저처럼 CSS 도형 광팬이 아니라면, 이 기능들이 출시되었을 때 아마 놓쳤을 수도 있습니다. 그러니 짧고 공식적인 소개를 해보겠습니다. 우선...

shape() 및 corner-shape

shape() 함수는 clip-path 및 offset-path를 위한 새로운 값으로, path()보다 훨씬 더 쉽게 CSS 도형을 생성할 수 있도록 SVG 구문을 사용합니다. 저는 이 기능을 탐구하는 4부작 시리즈와 복잡한 도형 생성에 대해 다룬 또 다른 글을 작성했습니다.

SVG에 대해 말하자면, shape()를 사용하여 어떤 SVG 도형이든 표현할 수 있습니다. 달리 말하면, 어떤 SVG 도형이든 CSS 도형으로 변환할 수 있다는 뜻이며, 놀랍게도 정확히 그 역할을 하는 변환기를 제가 만들었습니다!

corner-shape의 경우, border-radius와 함께 작동하는 속성입니다. 이름에서 알 수 있듯이, 미리 정의된 키워드를 사용하여 요소의 모서리(corner) 모양을 제어할 수 있게 해줍니다.

.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
...

또한 제가 다른 글인 [

하지만 이 corner-shape 속성이 정말 유용하거나 심지어 필요하기까지 할까요? squircle 값을 제외하면, 대부분의 모양은 이미 clip-path나 mask를 사용하여 생성할 수 있습니다. 하지만 corner-shape가 다른 속성들이 할 수 없는 일은, 해당 모양에 테두리(border)와 기타 장식들을 쉽게 추가할 수 있다는 점입니다!

corner-shape는 모서리 모양만 바꾸는 것이 아니라, border 및 box-shadow와 같은 다른 속성들도 지원하여, 이들이 요소의 박스(box)가 아닌 모양을 따르도록 해줍니다. 모양에 테두리를 추가하는 것이 악몽 같다는 점은 우리 모두가 알고 있기에, 이는 게임 체인저(game-changer)가 될 것입니다.

지원 현황은 아직 그리 좋지 않지만 (이 글을 쓰는 시점에서는 Chromium 전용), 이를 탐색하고 잠재력을 개괄적으로 살펴보기에 좋은 시기입니다.

border-shape의 등장!

모서리를 모양 잡는 것도 좋지만, 우리가 할 수 있는 일에는 여전히 상당히 제한이 있습니다. 예를 들어, 요소 전체의 모양을 잡는다면 어떨까요? 그것이 바로 border-shape가 할 일입니다. 이 속성은 새로운 shape() 함수를 포함하여 clip-path와 동일한 값들을 허용합니다.

그럼 clip-path와 하는 일이 똑같다는 건가요? 무엇이 새로운 거죠?

corner-shape와 마찬가지로, border, box-shadow, outline과 같은 대부분의 장식적 속성들이 모양을 따르게 됩니다.

clip-path (mask 포함)는 장식들을 포함한 요소 전체를 클리핑/마스킹(clip/mask)하기 때문에, 테두리를 갖는 것은 절대 불가능합니다. 이는 CSS 모양(shape)을 만드는 데 있어 큰 문제입니다.

border-shape 속성은 이 문제를 해결하기 위해 등장했습니다. 요소를 클리핑하는 대신 요소를 "모양화(shapes)"하여, 장식들이 그 모양을 따를 수 있게 합니다. 다시 말해, CSS 모양에 테두리를 입히는 것이 식은 죽 먹기가 될 것입니다!

border-shape가 사용하기 매우 쉽다는 점은 말할 것도 없습니다. 만약 clip-path에 익숙하다면, 사실상 새로 배울 것이 거의 없습니다. 단순히 하나의 속성을 다른 속성으로 교체하기만 하면 끝납니다.

.shape {
  /* 이전 코드 */
  clip-path: shape() | polygon() | ...;
...

shape() 함수에 대해 더 자세히 알아볼 것을 다시 한번 권합니다. 왜냐하면 이 함수가 바로 border-shape를 진정으로 강력하게 만드는 값이기 때문입니다. 이 둘은 실로 뗄 수 없는 관계입니다.

이제 이 속성의 기본적인 사용법을 알았으니, 재미있는 부분을 시작해 볼까요? 저는 한계를 밀어붙이고 border-shape를 사용하여 무엇이 가능한지 여러분에게 보여드리기 위해 여기 있습니다.

참고: 현재 지원은 Chrome에서만 제한적으로 가능하므로, 다음 데모들은 Chrome을 사용하여 확인해 보세요.

테두리 전용 도형 (Border-Only Shapes)

앞서 말씀드렸듯이, 여기서 얻을 수 있는 첫 번째 주요 장점은 실제 모양을 따르는 테두리를 추가할 수 있다는 것이며, 이는 곧 테두리만 있는 도형(border-only shapes)을 만들 수 있는 능력을 의미합니다. 여러분은 그저 다음과 같은 코드를 작성하기만 하면 됩니다:

.shape {
  border: 8px solid red;
  border-shape: /* 여러분의 shape 코드 */;
...

더 이상의 편법(hacks)도, 더 이상의 골칫거리도 없습니다!

CodePen Embed Fallback

대부분의 도형은 이미 저의 CSS Shapes collection에서 사용할 수 있으므로, 사실 테두리 전용 도형을 만드는 것은 간단한 복사/붙여넣기만으로 가능합니다. 심지어 저의 온라인 생성기(online generators) 중 일부는 blob, 물결선, 화려한 프레임 등 수많은 복잡한 도형들에 대해 테두리 전용 버전을 제공하도록 이미 설정되어 있습니다.

컷아웃 도형 (Cutout Shapes)

이전 코드를 가져와 다음과 같이 업데이트해 보겠습니다:

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* 여러분의 shape 코드 */;
...

기존에 가지고 있던 shape 코드를 유지하면서, 맨 앞에 inset(0)을 추가하면 됩니다. 네, border-shape 안에 두 개의 shape 값을 가질 수 있으며, 그 결과는 다음과 같습니다:

CodePen Embed Fallback

명세서(the specification)에 따르면:

border-shape 속성은 단일 <basic-shape> 또는 두 개의 <basic-shape>를 허용합니다:

단일 <basic-shape> (Stroke mode): 테두리(border)가 도형의 경로(path)를 따라 스트로크(stroke)로 렌더링되며, 스트로크 너비는 해당 측면의 계산된 테두리 너비(computed border width)에 의해 결정됩니다. 이 모드는 외곽선이 있는 도형을 만드는 데 유용합니다.

두 개의 <basic-shape> (Fill mode): 테두리가 두 경로 사이의 영역으로 렌더링됩니다. 첫 번째 도형은 외부 경계(outer boundary)를 정의하고, 두 번째 도형은 내부 경계(inner boundary)를 정의합니다. 이 모드는 테두리 영역의 기하학적 구조(geometry)를 정밀하게 제어할 수 있게 해줍니다.

기본 사각형을 외부 도형(inset(0))으로 사용하여, 테두리만 있는 버전을 쉽게 컷아웃(cutout) 버전으로 변환할 수 있었습니다!

도형을 원형으로 만들고 싶으신가요? 간단합니다!

CodePen Embed Fallback

제가 한 일은 inset(0)(사각형)을 circle()(원)로 교체한 것뿐입니다.

하지만 이건 간단한 border-radius: 50%로도 할 수 있지 않나요?

아니요! border-shape를 사용할 때는 border-radius가 무시됩니다. 이는 더 이상 둥글게 만들 모서리가 없기 때문에 논리적으로 당연한 결과입니다. 요소 자체가 이제 특정 모양을 갖게 되었으니까요. 이전 예시에서 보여드린 것처럼 border-radius의 용도를 대체할 수 있는 어떤 종류의 도형이든 말 그대로 생성할 수 있기 때문에 이는 큰 문제가 아닙니다.

참고: 왜 제가 인자(argument) 없이 circle()을 사용하는지 궁금하다면, 제 기사인 “CSS Functions that work without arguments.””를 확인해 보세요.

다음 단계로 넘어가기 전에 두 개의 도형 값을 사용한 몇 가지 예시를 더 살펴보겠습니다:

CodePen Embed Fallback

많은 노력 없이도 어떤 조합이든 사용하여 복잡해 보이는 도형을 말 그대로 만들어낼 수 있습니다!

Breakout Decorations

이제 텍스트 블록을 가져와서 앞서 살펴본 두 개의 도형 값을 가진 코드를 적용해 보겠습니다:

.box {
  border-shape: inset(0) circle();
  border-color: pink;
...

CodePen Embed Fallback

지금까지 배운 내용을 고려하면 아마 놀라운 일은 아닐 것입니다. 우리는 두 개의 도형을 정의했고, 테두리 (border)는 그 사이의 영역 안에 그려집니다. 여기서 새로운 점은 우리가 콘텐츠 (content)를 다루고 있으며, 보시다시피 콘텐츠가 테두리 위로 겹쳐진다는 것입니다.

border-shape는 요소의 장식 (decoration)을 포함하여 요소의 전체를 성형하지만, 내부의 어떤 콘텐츠도 변하지 않고 초기 직사각형 모양을 따릅니다. 이는 클래식한 border-radius에서도 동일하게 발생하는 현상이므로 새로운 동작은 아닙니다. 그리고 우리가 overflow: hidden을 사용하여 콘텐츠를 숨기기로 결정하지 않는 한, 콘텐츠는 넘치게 (overflow) 됩니다.

CodePen Embed Fallback

이 경우에는 콘텐츠가 넘쳐서 테두리 장식 위에 놓이기를 원하므로 overflow 속성은 고려하지 않겠습니다.

이제 도형의 코드를 다음과 같이 업데이트해 보겠습니다:

.box {
  border-shape: inset(0 -100px) circle(50px);
  border-color: pink;
...

CodePen Embed Fallback

저는 원을 더 작게 만들고 직사각형을 더 크게 만들었습니다. 제가 무엇을 의도하는지 보이시나요? 원의 반지름 (radius)을 0으로 만들고 직사각형을 더 크게 만듦으로써, 브레이크아웃 배경 효과 (breakout background effect)를 만들어냅니다!

.box {
  border-shape: inset(0 -100vw) circle(0);
  border-color: pink;
...

CodePen Embed Fallback

요소는 중앙에 유지되지만, 그 배경 (우리가 테두리를 사용하여 시뮬레이션하고 있는 것!)은 화면의 가장자리까지 확장됩니다.

그리고 이것은 두 개의 도형 값을 사용하는 것에 국한되지 않습니다. 요소의 경계를 벗어나게 하는 어떤 값이든 고려한다면, 하나의 도형 값만으로도 브레이크아웃 장식 (일반적으로 어려운)을 구현할 수 있습니다.

여러분이 탐색해 볼 수 있도록 많은 예시가 담긴 데모를 준비했습니다: