CSS sahpe()

CSS sahpe()

shape()는 CSS에서 클리핑(Clipping) 또는 플로팅(Floating)과 관련된 컨텍스트에서 등장하는 기능으로, 주로 shape-outside 속성과 함께 사용됩니다. 이 기능은 HTML 요소 주변에 비정형 텍스트 흐름을 만들기 위해 사용됩니다.

---

shape() 함수 개요

shape()는 CSS의 기본 함수는 아니며, 사실은 circle(), ellipse(), inset(), polygon() 같은 shape functions(모양 함수)을 총칭하는 표현입니다. 이를 이용해 clip-path나 shape-outside 속성에 다양한 형태를 지정할 수 있습니다.

사용 예시

1. shape-outside를 이용한 텍스트 흐름

.float-img {
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  width: 200px;
  height: 200px;
  background: url('example.jpg');
}

• shape-outside: 요소 외부의 텍스트가 흐를 모양을 정의.
• clip-path: 요소 자체의 보이는 모양을 자름.

2. clip-path로 모양 자르기

.clip-example {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

• 삼각형 모양으로 요소를 자릅니다.

주요 shape functions 종류

함수명	설명
inset()	사각형 모양을 지정합니다 (안쪽 여백).
circle()	원 형태를 만듭니다.
ellipse()	타원 형태를 만듭니다.
polygon()	다각형 형태를 지정할 수 있습니다.
path()	SVG path 문법으로 정밀한 모양 지정 가능 (더 고급).

1. circle(): 원형

예시 코드:

.element {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: url('your-image.jpg') no-repeat center/cover;
  margin: 20px;
}

설명:

• circle(50%)는 요소의 너비와 높이의 50%를 반지름으로 하는 원형을 생성합니다.
• shape-outside는 텍스트가 원형을 따라 흐르도록 설정합니다.
• clip-path는 요소 자체를 원형으로 클리핑하여 시각적으로도 원형으로 보이게 합니다.

데모: MDN shape-outside 예제

---

2. ellipse(): 타원형

예시 코드:

.element {
  float: left;
  width: 300px;
  height: 200px;
  shape-outside: ellipse(150px 100px at 50% 50%);
  clip-path: ellipse(150px 100px at 50% 50%);
  background: url('your-image.jpg') no-repeat center/cover;
  margin: 20px;
}

설명:

• ellipse(150px 100px at 50% 50%)는 중심이 요소의 중앙에 위치한 가로 150px, 세로 100px의 타원을 생성합니다.
• 텍스트는 타원의 외곽을 따라 흐르게 됩니다.

데모: CSS-Tricks shape-outside 예제

---

3. inset(): 사각형 (내부 여백 포함)

예시 코드:

.element {
  float: left;
  width: 300px;
  height: 200px;
  shape-outside: inset(20px 30px 40px 50px);
  clip-path: inset(20px 30px 40px 50px);
  background: url('your-image.jpg') no-repeat center/cover;
  margin: 20px;
}

설명:

• inset(20px 30px 40px 50px)는 상단 20px, 우측 30px, 하단 40px, 좌측 50px의 여백을 가진 사각형을 생성합니다.
• 이 형태에 따라 텍스트가 흐르게 됩니다.

데모: W3Schools clip-path 예제

---

4. polygon(): 다각형

예시 코드:

.element {
  float: left;
  width: 300px;
  height: 300px;
  shape-outside: polygon(50% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: url('your-image.jpg') no-repeat center/cover;
  margin: 20px;
}

설명:

• polygon(50% 0%, 100% 100%, 0% 100%)는 위쪽 중앙과 좌우 하단을 연결하는 삼각형을 생성합니다.
• 텍스트는 이 삼각형의 외곽을 따라 흐르게 됩니다.

데모: MDN clip-path 예제

---

5. path(): 복잡한 경로 (SVG Path 사용)

예시 코드:

.element {
  float: left;
  width: 300px;
  height: 300px;
  shape-outside: path('M150 0 L75 200 L225 200 Z');
  clip-path: path('M150 0 L75 200 L225 200 Z');
  background: url('your-image.jpg') no-repeat center/cover;
  margin: 20px;
}

설명:

• path()는 SVG의 경로 데이터를 사용하여 복잡한 형태를 정의할 수 있습니다.
• 위 예시는 삼각형을 생성하는 SVG 경로입니다.
• 이 방법을 사용하면 곡선이나 복잡한 도형도 구현할 수 있습니다.

데모: CSS-Tricks clip-path 예제

https://css-tricks.com/almanac/properties/c/clip-path/

clip-path | CSS-Tricks

 

참고 사항

• shape-outside를 사용하려면 float 속성 필수입니다.
• 모든 브라우저가 shape-outside나 clip-path의 모든 기능을 동일하게 지원하지 않을 수 있으니 Can I use에서 확인 필요.

실시간 시각화 도구

• Clippy: 다양한 clip-path 형태를 시각적으로 생성하고, 해당 CSS 코드를 바로 확인할 수 있는 도구입니다.

https://bennettfeely.com/clippy/

Clippy — CSS clip-path maker

 

추가 학습 자료 (영상)

• Everything you need to know about CSS shape-outside: shape-outside에 대한 심층적인 설명과 예제를 제공하는 영상입니다.
• Creating unique shapes & animations using CSS clip-path: clip-path를 활용한 독특한 형태와 애니메이션을 만드는 방법을 소개합니다.