컴포넌트 공방: Reflex 라이브러리 100
·
강의 개요
레이아웃
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
타이포그래피
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
폼
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
데이터 표시
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
펼침과 전환
·
Tabs
·
Accordion
·
Segmented Control
오버레이
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
동적 렌더링
·
Cond
·
Match
·
Foreach
·
Auto Scroll
미디어
·
Image
·
Audio
·
Video
표와 데이터 그리드
·
Table
·
Data Table
·
Data Editor
차트
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
차트 부품
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
다른 차트 라이브러리
·
Plotly
·
Pyplot
HTML 요소
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
그 밖의 도구
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.el.svgrx.el.svg.circlerx.el.svg.defsrx.el.svg.linear_gradientrx.el.svg.polygonrx.el.svg.pathrx.el.svg.rectrx.el.svg.stop공식 문서
공방 주문서
인증 배지 그림 하나: 그라데이션 원 위에 별, 그 위에 체크 표시를 그림 파일 없이 코드로 그려 주세요.
SVG는 좌표로 그리는 벡터 그림입니다. 아무리 키워도 깨지지 않고, 코드로 모양과 색을 바꿀 수 있습니다.
rx.el.svg가 그림판이고, 그 안의 도형은 rx.el.svg.circle, rx.el.svg.rect처럼 rx.el.svg 이름공간에 들어 있습니다.
rx.el.svg(
rx.el.svg.circle(cx=50, cy=50, r=40, fill=rx.color("indigo", 9)),
view_box="0 0 100 100",
width="100",
height="100",
)도형은 위치·크기 속성으로 모양을, fill(채우기)·stroke(선)로 색을 정합니다. 값은 view_box 좌표계의 숫자입니다.
속성 바꿔 보기
rect_width
corner
radius
fill
stroke
stroke_width
rx.el.svg(
rx.el.svg.rect(
x="10",
y="10",
width="100",
height="80",
rx="10",
fill="#6e56cf",
stroke="none",
stroke_width="4",
),
rx.el.svg.circle(cx="160", cy="50", r="35", fill="#6e56cf", fill_opacity="0.6", stroke="none", stroke_width="4"),
view_box="0 0 220 100",
width="264",
height="120",
)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
view_box width height (svg) | "0 0 100 100" / 길이 | 없음 | 그림의 좌표계와 화면 크기 |
preserve_aspect_ratio (svg) | "xMidYMid meet" "none" … | "xMidYMid meet" | 비율이 다를 때 맞추는 법 |
cx cy r (circle) | 숫자 | 0 | 중심과 반지름 |
x y width height rx ry (rect) | 숫자 | 0 | 위치, 크기, 모서리. rx만 주면 ry도 같다 |
points (polygon) | "x,y x,y …" | 없음 | 꼭짓점 목록. 끝점은 자동으로 닫힌다 |
d (path) | 경로 명령 | 없음 | M 이동, L 직선, Q·C 곡선, Z 닫기 |
path_length (도형 공통) | 숫자 | 실제 길이 | 선 길이를 이 값으로 간주(점선 계산용) |
id x1 y1 x2 y2 (linear_gradient) | 문자열·숫자 | 왼쪽→오른쪽 | 그라데이션 이름과 방향 |
gradient_units gradient_transform spread_method href (linear_gradient) | 문자열 | 없음 | 좌표 기준, 변형, 끝 처리, 다른 그라데이션 물려받기 |
offset stop_color stop_opacity (stop) | "0%""100%" / 색 / 0 | 없음 | 색이 놓일 자리와 색 |
fill stroke stroke_width … | 색·숫자 | 검정 채우기 | 도형의 고유 속성이 아니라 CSS로 들어간다(아래) |
view_box="0 0 100 100"은 "안쪽 좌표는 가로세로 100"이라는 뜻이고, width·height는 화면에서의 크기입니다. 같은 그림을 크기만 바꿔 그려도 선명합니다.
비율이 다르면 기본으로 가운데에 맞춰 줄이고, preserve_aspect_ratio="none"이면 늘려서 채웁니다(셋째 그림).
rx.el.div(
rx.el.svg(
rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
view_box="0 0 100 100",
width="60",
height="60",
),
rx.el.svg(
rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
view_box="0 0 100 100",
width="120",
height="120",
),
rx.el.svg(
rx.el.svg.rect(x=0, y=0, width=100, height=100, fill=rx.color("gray", 4)),
rx.el.svg.circle(cx=50, cy=50, r=30, fill=rx.color("tomato", 9)),
view_box="0 0 100 100",
preserve_aspect_ratio="none",
width="200",
height="80",
),
display="flex",
gap="16px",
align_items="end",
)rect, circle, polygon이 공식 문서에 나오는 도형이고, Reflex 0.10에는 ellipse, line, polyline, g, text 같은 요소도 더 들어 있습니다.
0.10에서 fill·stroke·stroke_width는 도형의 속성 목록에 없어서 CSS로 들어갑니다. SVG의 색 속성은 CSS로도 똑같이 동작하므로 결과는 같고, rx.color(...) 같은 테마 색도 쓸 수 있습니다.
rx.el.svg(
rx.el.svg.rect(x=10, y=20, width=60, height=60, rx=12, fill=rx.color("teal", 9)),
rx.el.svg.circle(cx=120, cy=50, r=30, fill=rx.color("amber", 9)),
rx.el.svg.polygon(points="200,20 230,80 170,80", fill=rx.color("crimson", 9)),
rx.el.svg.ellipse(cx=290, cy=50, rx=40, ry=22, fill=rx.color("blue", 9)),
rx.el.svg.line(x1=10, y1=95, x2=330, y2=95, stroke="gray", stroke_width=2),
view_box="0 0 340 100",
width="340",
height="100",
)d에 명령을 이어 씁니다. M10 80으로 펜을 옮기고, Q는 2차 곡선, T는 앞 곡선을 매끄럽게 잇습니다. 선만 그리려면 fill="none"입니다.
path_length=100은 길이를 100으로 간주하게 해서, stroke_dasharray="10 5" 같은 점선을 비율로 계산하기 쉽게 합니다.
rx.el.svg(
rx.el.svg.path(
d="M10 80 Q 55 10, 100 80 T 190 80",
fill="none",
stroke=rx.color("indigo", 9),
stroke_width=4,
),
rx.el.svg.path(
d="M10 95 L 190 95",
path_length=100,
stroke="gray",
stroke_width=3,
stroke_dasharray="10 5",
),
view_box="0 0 200 100",
width="300",
height="150",
)defs 안에 둔 것은 바로 그려지지 않고, 이름(id)으로 불러 쓰는 재료가 됩니다. linear_gradient의 x1·y1→x2·y2가 방향이고, stop이 색이 놓일 자리입니다.
도형의 fill에 "url(#id)"를 주면 그라데이션으로 칠해집니다. id는 페이지 안에서 겹치지 않게 짓습니다.
rx.el.svg(
rx.el.svg.defs(
rx.el.svg.linear_gradient(
rx.el.svg.stop(offset="0%", stop_color="#6e56cf"),
rx.el.svg.stop(offset="100%", stop_color="#e54d2e", stop_opacity="0.8"),
id="htmlsvg_sunset",
x1="0",
y1="0",
x2="1",
y2="1",
),
),
rx.el.svg.rect(x=0, y=0, width=200, height=100, rx=16, fill="url(#htmlsvg_sunset)"),
view_box="0 0 200 100",
width="240",
height="120",
)도형의 속성에 State 값을 넣으면 그림이 데이터를 따라갑니다. rx.foreach의 두 번째 인자(순서)로 막대의 x를 계산했습니다.
import random
class HtmlSvgBarState(rx.State):
values: list[int] = [40, 75, 55, 90, 30]
@rx.event
def shuffle(self):
self.values = [random.randint(10, 95) for _ in self.values]
rx.el.div(
rx.el.svg(
rx.foreach(
HtmlSvgBarState.values,
lambda v, i: rx.el.svg.rect(x=i * 40 + 10, y=100 - v, width=28, height=v, rx=4, fill=rx.color("grass", 9)),
),
view_box="0 0 210 100",
width="210",
height="100",
),
rx.el.button("Shuffle", on_click=HtmlSvgBarState.shuffle, padding="4px 12px", border="1px solid gray", border_radius="6px", margin_top="8px"),
)defs의 그라데이션으로 원을 칠하고, 꼭짓점 10개의 polygon으로 별을, 끝을 둥글린 path로 체크를 얹었습니다.
rx.el.svg(
rx.el.svg.defs(
rx.el.svg.linear_gradient(
rx.el.svg.stop(offset="0%", stop_color="#3e63dd"),
rx.el.svg.stop(offset="100%", stop_color="#12a594"),
id="htmlsvg_badge",
x1="0",
y1="0",
x2="0",
y2="1",
),
),
rx.el.svg.circle(cx=60, cy=60, r=56, fill="url(#htmlsvg_badge)"),
rx.el.svg.polygon(points="60,18 70,44 98,46 76,63 84,90 60,75 36,90 44,63 22,46 50,44", fill="#ffd60a"),
rx.el.svg.path(d="M44 62 L56 74 L78 50", fill="none", stroke="white", stroke_width=6, stroke_linecap="round", stroke_linejoin="round"),
view_box="0 0 120 120",
width="120",
height="120",
)공방 노트
rx.el.svg가 그림판: view_box는 안쪽 좌표, width·height는 화면 크기.
도형은 rx.el.svg.rect·circle·polygon·path, 0.10에는 ellipse·line·g·text도.
fill·stroke는 0.10에서 CSS로 들어가지만 결과는 같다. 테마 색 rx.color도 된다.
그라데이션은 defs > linear_gradient(id) > stop, 쓰는 곳은 fill="url(#id)".
속성에 State 값을 넣고 rx.foreach로 도형을 만들면 데이터 그림이 된다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.