컴포넌트 공방: 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.aspect_ratio공식 문서
공방 주문서
영상 썸네일 자리를 16:9 비율로 잡아, 화면 폭이 바뀌어도 그 비율이 유지되게 해 주세요.
rx.aspect_ratio는 안의 내용을 정해진 가로세로 비율로 보여 줍니다. ratio에 너비 ÷ 높이 값을 주면, 주어진 너비에 맞춰 높이를 알아서 정합니다. 썸네일, 영상 자리, 지도처럼 화면 폭이 바뀌어도 모양이 찌그러지면 안 되는 곳에 씁니다.
rx.box(
rx.aspect_ratio(
rx.center("16:9", background_color="var(--accent-4)", width="100%", height="100%"),
ratio=16 / 9,
),
width="240px",
)속성 바꿔 보기
바깥 상자의 너비만 정하면 높이는 ratio가 정합니다. 그림의 원래 비율(4:3)과 다른 비율을 고르면 object_fit에 따라 그림을 자르거나 남깁니다.
속성 바꿔 보기
ratio
1.75
width
fit
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/1025/400/300",
width="100%",
height="100%",
object_fit="cover",
background_color="var(--gray-4)",
),
ratio=1.75,
),
width="200px",
)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
ratio | 숫자(16 / 9, 4 / 3, 1) | 1 | 너비 ÷ 높이. 이 비율로 높이를 정한다 |
안쪽 내용의 width height | "100%" | 없음 | 비율 상자를 꽉 채우게 |
그림의 object_fit | "cover" "contain" "fill" | "fill" | 비율이 다른 그림을 자를지, 남길지, 늘일지 |
ratio에는 파이썬 식 16 / 9를 그대로 써도 됩니다(값은 1.777…).
여러 가지 비율
공식 문서의 예제입니다. 같은 너비 안에서 비율에 따라 높이만 달라집니다. 안쪽 상자에 width="100%", height="100%"를 줘서 비율 상자를 꽉 채웁니다.
rx.grid(
rx.aspect_ratio(
rx.box("Widescreen 16:9", background_color="papayawhip", width="100%", height="100%"),
ratio=16 / 9,
),
rx.aspect_ratio(
rx.box("Letterbox 4:3", background_color="orange", width="100%", height="100%"),
ratio=4 / 3,
),
rx.aspect_ratio(
rx.box("Square 1:1", background_color="green", width="100%", height="100%"),
ratio=1,
),
rx.aspect_ratio(
rx.box("Portrait 5:7", background_color="lime", width="100%", height="100%"),
ratio=5 / 7,
),
spacing="2",
width="160px",
)크기는 바깥에서 정한다
aspect_ratio 자체나 그 내용에 width·height를 픽셀로 직접 주면 비율이 깨집니다. 대신 aspect_ratio를 rx.box로 감싸 그 상자의 너비(또는 높이)를 정하고, 내용의 너비와 높이는 "100%"로 둡니다. 아래는 너비 20%짜리 상자 네 개에 같은 그림을 서로 다른 비율로 넣은 것입니다. 그림이 찌그러지지 않도록 object_fit="cover"를 주었습니다.
rx.flex(
*[
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/237/400/400",
alt="Dog",
width="100%",
height="100%",
object_fit="cover",
),
ratio=ratio,
),
width="20%",
)
for ratio in [16 / 9, 3 / 2, 2 / 3, 1]
],
justify="between",
align="start",
width="100%",
)주문서 완성
바깥 상자는 max_width까지 화면 폭을 따라가고, 높이는 16:9 비율이 정합니다. 썸네일 위의 재생 단추는 position="absolute"로 한가운데에 겹쳐 놓았습니다.
rx.box(
rx.aspect_ratio(
rx.box(
rx.image(
src="https://picsum.photos/id/1039/800/450",
alt="Waterfall",
width="100%",
height="100%",
object_fit="cover",
),
rx.center(
rx.icon("play", size=28, color="white"),
width="56px",
height="56px",
border_radius="9999px",
background_color="rgba(0, 0, 0, 0.55)",
position="absolute",
top="50%",
left="50%",
transform="translate(-50%, -50%)",
),
position="relative",
width="100%",
height="100%",
border_radius="8px",
overflow="hidden",
),
ratio=16 / 9,
),
width="100%",
max_width="420px",
)공방 노트
rx.aspect_ratio(내용, ratio=16 / 9)로 너비 ÷ 높이 비율을 고정한다.
크기는 바깥 rx.box에서 정하고, 내용은 width·height "100%".
aspect_ratio나 내용에 직접 픽셀 크기를 주지 않는다.
그림은 object_fit="cover"로 찌그러지지 않게 채운다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.