강력한 CSS border-shape 속성을 준비하세요

새 CSS shape 관련 기능의 위치
- 최근 shape 함수가 Baseline이 되었고 corner-shape 속성도 등장함
- 여기에 추가로 필요한 CSS 도형 기능으로 border-shape 속성 제시

shape? corner-shape? border-shape?! 이게 다 어디서 나온 것임?

`shape`와 `corner-shape`

shape의 역할
- shape 함수는 clip-path와 offset-path의 새 값으로, path보다 SVG 문법 기반 CSS 도형 생성을 쉽게 만드는 기능
- 관련 사용법은 shape 4부작과 복잡한 도형 생성 글에서 별도 설명

Three rectangular shapes with jagged, non-creating edges. the first is blue, then orange, then green.

SVG 도형과 shape 변환
- 모든 SVG 도형을 shape로 표현 가능함
- SVG 도형을 CSS 도형으로 바꾸는 변환기도 제공됨
corner-shape의 역할
- corner-shape는 border-radius와 함께 동작하는 속성
- 미리 정의된 키워드로 요소 모서리 형태를 제어함

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

corner-shape로 만드는 CSS 도형
- 일반적인 CSS 도형 생성에도 활용 가능함
- 관련 예시는 corner-shape로 CSS Shapes 만들기추가 링크에서 다룸

corner-shape의 실질적 장점
- squircle 값을 제외하면 대부분 도형은 이미 clip-path나 mask로 만들 수 있음
- 차별점은 도형에 border와 다른 장식을 쉽게 붙일 수 있다는 점임

도형을 따르는 장식 지원
- corner-shape는 모서리만 바꾸는 것이 아니라 border, box-shadow 같은 속성도 도형을 따라가게 함
- CSS 도형에 border를 추가하는 어려움을 줄이는 변화임
- 지원 범위는 아직 제한적임
  - 작성 시점 기준 Chromium 전용
  - 가능성을 살펴보기 좋은 단계임

`border-shape` 등장

border-shape의 기본 역할
- corner-shape가 모서리 shaping에 머문다면, border-shape는 요소 전체를 shaping하는 속성
- clip-path와 같은 값을 받으며 새 shape 함수도 포함함

그러면 clip-path와 같은 일을 하는 것임? 새로울 게 무엇임?

clip-path와의 차이
- corner-shape처럼 border, box-shadow, outline 등 장식 속성이 도형을 따라감

Showing the difference between clip-path and border-shape

기존 clipping 방식의 한계
- clip-path와 mask는 장식까지 포함해 요소 전체를 자르거나 가림
- border를 함께 쓰기 어렵기 때문에 CSS 도형 제작에서 큰 제약이 됨
- border-shape는 요소를 잘라내는 대신 형태를 바꾸어 장식이 도형을 따라가도록 함
- 사용법은 clip-path에 익숙하면 거의 동일함
  - 속성만 바꾸면 되는 구조
  - shape와 함께 쓸 때 강력함

.shape {
  /* Old code */
  clip-path: shape() | polygon() |...;

/* New code */
  border-shape: shape() | polygon() |...;
}

지원 범위 주의
- 현재 지원은 Chrome으로 제한됨
- 이후 데모 확인은 Chrome 사용 필요함

Border-Only Shapes

border만 있는 도형 생성
- 첫 번째 장점은 실제 도형을 따라가는 border 추가 가능성이 큼
- border-only 도형은 다음 코드로 작성 가능함

.shape {
  border: 8px solid red;
  border-shape: /* your shape code */;
}

우회 기법 감소
- 복잡한 우회 기법 없이 border-only 도형 작성 가능함

Four shapes with borders and no fill, including a red heart, yellow starburst, green flower, and blue jagged rectangle.

기존 도형 자산 활용
- 대부분 도형은 CSS Shapes 컬렉션에 이미 있음
- 온라인 생성기 일부도 복잡한 도형의 border-only 버전을 제공하도록 구성됨
  - blobs
  - wavy lines
  - fancy frames
  - 그 외 여러 도형

border-only shapes using the CSS border-shape property, including a jagged red circle, a squiggly blue line, and a jagged blue rectangle.

Cutout Shapes

두 shape 값을 이용한 cutout
- 앞선 코드에 inset(0)을 앞에 추가함
- border-shape 안에 두 개의 shape 값을 넣을 수 있음

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* you shape code */;
}

Four shapes cut out from squares with filled colors, including a heart with red background, a stardust against yellow, a flower against green, and a jagged square against blue.

명세상 두 가지 모드
- CSS border-shape 명세는 단일 <basic-shape> 또는 두 개의 <basic-shape> 허용을 설명함

border-shape 속성은 하나의 <basic-shape> 또는 두 개의 <basic-shape>를 받음: 단일 <basic-shape>(Stroke mode): border가 shape path를 따라 stroke로 렌더링되며, stroke 폭은 관련 side의 계산된 border width로 결정됨. outline 형태 도형 생성에 유용함 두 개의 <basic-shape>(Fill mode): border가 두 path 사이 영역으로 렌더링됨. 첫 번째 shape는 outer boundary, 두 번째 shape는 inner boundary를 정의함. border 영역의 geometry를 정밀하게 제어 가능함

rectangle과 circle 조합
- inset(0)을 outer shape로 쓰면 border-only 버전을 cutout 버전으로 쉽게 변환 가능함
- 원 안에 shape를 넣으려면 inset(0) 대신 circle 사용함

Four shapes cut out from circles with filled colors, including a heart with red background, a stardust against yellow, a flower against green, and a jagged square against blue.

하지만 이건 단순히 border-radius: 50%로 할 수 있는 것 아닌가?

border-radius와의 관계
- border-shape 사용 시 border-radius는 무시됨
- 요소가 더 이상 둥글릴 모서리를 가진 사각형이 아니라 shaped element가 되기 때문임
- border-radius를 대체할 모든 형태의 shape 생성 가능함
- 인수 없는 circle 사용 이유는 인수 없이 동작하는 CSS 함수 글문장부호 링크추가 링크에서 다룸
두 shape 값의 추가 예시
- 다양한 조합으로 복잡해 보이는 도형을 적은 노력으로 생성 가능함

Four shapes cut out from polygons with filled colors, including a heart with red background, a stardust against yellow, a flower against green, and a jagged square against blue.

Breakout Decorations

텍스트 블록과 두 shape 값
- 텍스트 블록에 앞선 두 shape 값 코드를 적용함

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

콘텐츠와 border의 겹침
- 두 shape 사이 영역에 border가 그려짐
- 이번 예시는 콘텐츠가 border 위로 겹치는 점이 새로움
- border-shape는 요소 전체와 장식을 shaping하지만 내부 콘텐츠는 원래 사각형 흐름을 유지함
  - 고전적 border-radius에서도 같은 동작
  - overflow: hidden을 쓰지 않으면 콘텐츠가 넘침
  - 여기서는 콘텐츠가 border 장식 위로 올라오도록 overflow를 고려하지 않음

breakout background 효과
- circle을 작게 만들고 rectangle을 크게 만들면 배경이 요소 경계 밖으로 확장되는 효과 생성 가능함
- circle radius를 0으로 만들고 rectangle을 더 크게 만드는 방식임

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

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

A paragraph of black text against a full-width pink rectangle.

한 shape 값에서도 가능한 breakout 장식
- 요소는 중앙에 남고, border로 흉내 낸 배경은 화면 가장자리까지 확장됨
- 두 shape 값에만 제한되지 않음
- 요소 경계 밖으로 나가는 값을 쓰면 한 shape 값으로도 일반적으로 어려운 breakout 장식 구현 가능함

Three examples of border text decorations, including an orange line through a main heading, heading against a blue caret-shaped background, and black text against a full-width pink background.

Partial Decorations

요소 내부 partial decoration
- 앞선 데모를 바탕으로 다른 장식을 시도함
- 이번에는 요소 경계 밖으로 확장하지 않고 내부에 머물러 부분 장식을 만듦

Three examples of border text decorations, including a short orange underline for a mina heading, a heading with a partial blue background with a diagonal right edge, and a corner border in the top-left of a paragraph.

shape 기반 장식 제작
- 장식 생성은 주로 shape 함수에 의존함
- shape를 익히면 border-shape로 복잡한 장식을 쉽게 만들 수 있음
- 학습 자료로 shape 4부작 제시

Shape Animation

border-shape 애니메이션
- border-shape는 애니메이션 가능함
- 두 값 문법에서는 border-width 값을 애니메이션해 reveal 효과 생성 가능함
- 이미지 요소에도 같은 방식 적용 가능함

shape 값 애니메이션
- shape 값 자체를 애니메이션해 더 복잡한 효과 생성 가능함
- blob shape에 bouncing hover 효과를 적용한 데모는 shape로 복잡한 CSS 도형 만들기의 코드 기반임
- 같은 코드에서 clip-path를 border-shape로 교체해 적용함

장식 애니메이션 확장
- 이전 장식에도 미묘한 애니메이션 추가 가능함
- title과 text hover로 동작 확인 가능함

Conclusion

border-shape로 확장 중
- CSS 도형 생성을 쉽게 만드는 것 외에도 화려한 장식과 애니메이션을 추가할 수 있음
- 데모별 세부 설명보다 border-shape의 가능성 소개에 초점을 둔 글

^source^{https://css-tricks.com/get-ready-for-the-powerful-css-border-shape-property/}

shape와 corner-shape

border-shape 등장

Border-Only Shapes

Cutout Shapes

Breakout Decorations

Partial Decorations

Shape Animation

Conclusion

`shape`와 `corner-shape`

`border-shape` 등장