# CSS의 새로운 shape() 함수 활용법 요약

> Clean Markdown view of GeekNews topic #20719. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=20719](https://news.hada.io/topic?id=20719)
- GeekNews Markdown: [https://news.hada.io/topic/20719.md](https://news.hada.io/topic/20719.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-05-06T10:01:01+09:00
- Updated: 2025-05-06T10:01:01+09:00
- Original source: [css-tricks.com](https://css-tricks.com/css-shape-commands/)
- Points: 3
- Comments: 0

## Topic Body

- **CSS `shape()` 함수**가 **Chromium**과 **WebKit** 브라우저에서 지원되기 시작함  
- 기존 `path()`와 달리, **더 읽기 쉬운 CSS 문법과 단위**로 **복잡한 도형을 정의**할 수 있게 됨  
- `clip-path`에서 복잡한 형태를 만들 때 **SVG 좌표 대신 영어 명령어 기반**의 방식으로 구현 가능함  
- `line`, `arc`, `curve` 등의 **새로운 명령어**로 선, 곡선, 아크 등을 간결하게 작성 가능함  
- `shape()`는 아직 **애니메이션 지원은 제한적**이나, **hover/focus에 반응하는 동적 변화는 가능**함  
  
---  
  
### 개요  
  
- **CSS `shape()` 함수**는 `clip-path`와 함께 사용되어, 브라우저에서 **복잡한 도형 클리핑**을 가능하게 하는 기능임  
- 기존에는 `circle`, `ellipse`, `polygon` 등의 기본형이 가능했지만 **자유로운 도형은 `path()`로만 가능**했음  
- `path()`는 **SVG 좌표와 명령어를 그대로 입력**해야 하므로 가독성과 학습 곡선이 높았음  
  
### shape() 함수의 특징  
  
- **CSS스러운 방식으로 벡터 도형을 구성**할 수 있음  
- **방향 키워드 (`from top left`)** 또는 **좌표값 (`from 0 0`)** 으로 시작점을 지정함  
- 도형은 **일련의 명령어로 구성**됨. 예: `line`, `vline`, `arc`, `curve`, `smooth`  
  
### 주요 명령어 설명  
  
- **line**  
  - 의미: 시작점으로부터 선을 그림  
  - 사용법: `by` 키워드로 상대 위치 지정  
  - 예시: `line by -2px 3px`  
- **vline**  
  - 의미: 수직선을 그림  
  - 사용법: `to`로 절대 위치, `by`로 상대 위치 지정  
  - 예시: `vline to 50px`  
- **hline**  
  - 의미: 수평선을 그림  
  - 사용법: `to`로 절대 위치, `by`로 상대 위치 지정  
  - 예시: `hline to 95%`  
- **arc**  
  - 의미: 타원 형태의 곡선을 그림  
  - 사용법:  
    - `to`: 아크의 끝점  
    - `with`: 아크의 기울기 방향 (수평/수직)  
    - `of`: 아크가 속한 타원의 반지름 (수평/수직)  
  - 예시: `arc to 10% 50% of 1%`  
- **curve**  
  - 의미: 베지어 곡선을 그림  
  - 사용법:  
    - `to`: 곡선의 끝점  
    - `with`: 곡선의 컨트롤 포인트 (곡률 조절)  
  - 예시: `curve to 0% 100% with 50% 0%`  
- **smooth**  
  - 의미: 부드러운 곡선(연결된 베지어 곡선)을 그림  
  - 사용법:  
    - `to`: 끝점  
    - `by`: 상대 좌표  
    - `with`: 컨트롤 포인트  
  
### 기타 사항  
  
- `shape()`는 **hover/focus 상태에서 동적 변경 가능**함  
- 현재 브라우저에서는 **`transition` 애니메이션은 동작하지 않음**  
- `calc()` 계산 함수도 사용 가능함  
  
### 참고 링크  
  
- [공식 스펙](https://drafts.csswg.org/css-shapes-2/#funcdef-shape)

## Comments



_No public comments on this page._