컴포넌트 공방: 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.avatar공식 문서
공방 주문서
프로필 카드 위쪽에 사용자 사진을 동그랗게 넣어 주세요. 사진이 없는 사람은 이름 첫 글자로 대신합니다.
rx.avatar는 사용자를 나타내는 작은 사진입니다. 이미지 주소를 src로 넘기면 사진이, src 없이 fallback만 주면 이니셜 같은 글자가 보입니다. 댓글, 프로필, 참여자 목록처럼 "누구인지"를 보여 주는 자리에 씁니다.
rx.flex(
rx.avatar(src="https://picsum.photos/id/64/200/200"),
rx.avatar(fallback="RX"),
spacing="3",
)src를 지우면 fallback 글자가 보입니다. variant, color_scheme, high_contrast는 그 대체 글자의 모양에 적용됩니다.
속성 바꿔 보기
src
fallback
size
variant
color
radius
high_contrast
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4", variant="soft", color_scheme="indigo", radius="full", high_contrast=False)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
src | 이미지 주소 | 없음 | 보여 줄 사진 |
fallback | 글자 | 없음 | 사진이 없거나 불러오지 못할 때 보일 것 |
size | "1" ~ "9" | "3" | 크기 |
variant | "solid" "soft" | "soft" | 대체 글자의 배경 채우기 |
color_scheme | Radix 색 이름 | 테마 색 | 대체 글자의 색 |
high_contrast | True / False | False | 대체 글자와 배경의 대비를 크게 |
radius | "none" "small" "medium" "large" "full" | 테마 값 | 모서리 둥글기 |
size는 "1"부터 "9"까지이고, 주지 않으면 "3"입니다. 목록의 작은 얼굴은 "1"~"2", 프로필 머리는 "6" 이상이 어울립니다.
rx.flex(
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="1"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="2"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="3"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="4"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="5"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="6"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="7"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="8"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", size="9"),
spacing="2",
align="center",
wrap="wrap",
)variant는 대체 글자의 배경을 정합니다. "solid"는 색을 꽉 채우고, 기본값 "soft"는 옅게 채웁니다. color_scheme은 테마와 상관없이 그 색을 씁니다.
rx.flex(
rx.avatar(fallback="RX", variant="solid"),
rx.avatar(fallback="RX", variant="soft"),
rx.avatar(fallback="RX", color_scheme="indigo"),
rx.avatar(fallback="RX", color_scheme="cyan"),
rx.avatar(fallback="RX", color_scheme="orange"),
rx.avatar(fallback="RX", color_scheme="crimson"),
spacing="2",
wrap="wrap",
)high_contrast=True는 대체 글자와 배경의 대비를 키웁니다. 왼쪽 열이 기본, 오른쪽 열이 높은 대비입니다.
rx.grid(
rx.avatar(fallback="RX", variant="solid"),
rx.avatar(fallback="RX", variant="solid", high_contrast=True),
rx.avatar(fallback="RX", variant="soft"),
rx.avatar(fallback="RX", variant="soft", high_contrast=True),
rows="2",
flow="column",
spacing="2",
width="max-content",
)radius는 테마의 모서리 값을 무시하고 이 아바타만 따로 둥글기를 정합니다. 사진과 대체 글자 모두에 적용됩니다.
rx.flex(
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="none"),
rx.avatar(fallback="RX", radius="small"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="medium"),
rx.avatar(fallback="RX", radius="large"),
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RX", radius="full"),
spacing="2",
)fallback은 src를 불러오지 못했을 때 대신 보이는 내용입니다. 아래 두 아바타는 없는 파일을 가리키므로 대체 글자가 보입니다. Reflex 0.10에서 fallback은 글자(str)만 받습니다.
rx.flex(
rx.avatar(src="/no-such-photo.png", fallback="PC"),
rx.avatar(src="/no-such-photo.png", fallback="?", color_scheme="gray"),
spacing="2",
)카드 안에 큰 아바타, 이름과 아이디, 편집 버튼을 한 줄로 둡니다. 사진을 못 불러오면 "RU"가 대신 보입니다.
Reflex User
@reflexuser
rx.card(
rx.flex(
rx.avatar(src="https://picsum.photos/id/64/200/200", fallback="RU", size="6", radius="full"),
rx.flex(
rx.text("Reflex User", weight="bold", size="4"),
rx.text("@reflexuser", color_scheme="gray", size="2"),
direction="column",
),
rx.spacer(),
rx.button("Edit Profile", variant="soft", size="2"),
spacing="4",
align="center",
width="100%",
),
max_width="420px",
)공방 노트
rx.avatar(src=…)로 사진을, fallback=…으로 대체 글자를 준다. 둘 다 주는 것이 안전하다.
size "1"~"9"(기본 "3"), radius="full"이면 동그라미.
variant(solid · soft), color_scheme, high_contrast는 대체 글자의 모양을 바꾼다.
src를 불러오지 못하면 자동으로 fallback이 보인다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.