모서리 반경 (Radius)
v1의 r-0부터 r-6, r-full까지 전체 반경 스케일을 유지해요. 카드, 입력 필드, 배지처럼 반복되는 형태에 같은 반경을 적용할 때 사용합니다.
전체 반경
숫자가 커질수록 모서리가 부드러워지고, r-full은 원형 또는 pill 형태를 만듭니다.
.r-00.r-12px.r-24px.r-36px.r-48px.r-512px.r-620px.r-full9999px| Class | CSS | Value |
|---|---|---|
.r-0 | border-radius: 0 | 0 |
.r-1 | border-radius: 2px | 2px |
.r-2 | border-radius: 4px | 4px |
.r-3 | border-radius: 6px | 6px |
.r-4 | border-radius: 8px | 8px |
.r-5 | border-radius: 12px | 12px |
.r-6 | border-radius: 20px | 20px |
.r-full | border-radius: 9999px | 9999px |
사용 예제
Radius utility
<link rel="stylesheet" href="/assets/podo-ui/styles.css" />
<div class="r-full utility-pill">Radius utility</div>