ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

컴포넌트 공방: Reflex 라이브러리 100

레이아웃

Box

rx.box

공식 문서

공방 주문서

공지 문구 하나를 연한 배경과 둥근 모서리로 감싸, 본문과 한눈에 구분되게 해 주세요.

rx.box는 가장 기본이 되는 상자입니다. HTML의 div를 바탕으로 한 블록 요소라서, 다른 컴포넌트를 묶고 그 묶음에 스타일을 입히는 데 씁니다. Box 자체에는 고유한 속성이 없고, 배경·여백·테두리 같은 CSS 속성을 키워드 인자로 넘겨 모양을 만듭니다.

Hello

rx.box("Hello", background_color="var(--accent-3)", padding="12px", border_radius="8px")

속성 바꿔 보기

Box의 모양은 모두 CSS 스타일 속성으로 정합니다. 파이썬에서는 CSS 이름의 -를 _로 바꿔 씁니다(background-color → background_color).

속성 바꿔 보기

Box

label

background

padding

border

radius

width

align

rx.box(
    "Box",
    background_color="var(--accent-3)",
    padding="12px",
    border="none",
    border_radius="4px",
    width="50%",
    text_align="left",
)

배경, 안쪽 여백, 테두리, 모서리, 너비를 바꿔 보세요. 모두 CSS 속성이라 값도 CSS 그대로 씁니다.

속성	값	기본값	쓰임
`width` `height`	CSS 길이(`"200px"`, `"50%"`)	내용에 맞춤	상자의 크기
`padding` `margin`	CSS 길이, `padding_x`·`margin_top`처럼 나눠서도	`0`	안쪽·바깥 여백
`background_color` `background`	색 이름, `var(--tomato-3)`, 그러데이션, `url(…)`	없음	배경색·배경 그림
`border` `border_radius`	`"1px solid var(--gray-7)"`, `"8px"`	없음	테두리와 모서리 둥글기
`title`	글자	없음	마우스를 올리면 뜨는 도움말
`hidden` `role` `tab_index`	HTML 속성	없음	숨기기, 접근성 역할, 탭 순서
`on_click` `on_mouse_enter` …	이벤트 핸들러	없음	모든 컴포넌트에 있는 기본 이벤트

색 지정: CSS 이름과 Radix 색

색은 세 가지 방식으로 줄 수 있습니다. "orange" 같은 CSS 색 이름, var(--tomato-3) 같은 Radix 색 변수(또는 같은 뜻의 rx.color("plum", 3)), 그리고 사이트 테마의 강조색을 따르는 var(--accent-2)입니다. Radix 색은 1~12단계가 있고, 숫자가 작을수록 배경용으로 연합니다.

공식 문서 예제는 마지막 상자에 radius="full"을 넘기지만, Box에는 radius 속성이 없어 아무 효과가 없습니다. 둥근 모서리는 border_radius로 줍니다.

CSS color

Radix color

Theme color

rx.box(
    rx.box("CSS color", background_color="yellow", border_radius="2px", width="20%", margin="4px", padding="4px"),
    rx.box("CSS color", background_color="orange", border_radius="5px", width="40%", margin="8px", padding="8px"),
    rx.box("Radix color", background_color="var(--tomato-3)", border_radius="5px", width="60%", margin="12px", padding="12px"),
    rx.box("Radix color", background_color=rx.color("plum", 3), border_radius="10px", width="80%", margin="16px", padding="16px"),
    rx.box("Theme color", background_color="var(--accent-2)", border_radius="9999px", width="100%", padding="24px"),
    text_align="center",
    width="100%",
)

배경: 그러데이션과 그림

CSS background 속성 하나로 그러데이션이나 그림을 깔 수 있습니다. linear-gradient는 선을 따라, radial-gradient는 한 점에서 퍼지며 색이 바뀝니다. 그림은 url(…)로 넣고, center/cover로 가운데를 기준으로 상자를 꽉 채웁니다.

rx.flex(
    rx.box(background="linear-gradient(45deg, var(--tomato-9), var(--plum-9))", width="25%", height="100%"),
    rx.box(background="linear-gradient(red, yellow, blue, orange)", width="25%", height="100%"),
    rx.box(background="radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%)", width="25%", height="100%"),
    rx.box(background="center/cover url('https://picsum.photos/id/1015/300/200')", width="25%", height="100%"),
    spacing="2",
    width="100%",
    height="100px",
)

이벤트와 HTML 속성

Box에는 모든 컴포넌트가 갖는 기본 이벤트(on_click, on_mouse_enter, on_mouse_leave 등)가 있습니다. 아래 상자에 마우스를 올리고 눌러 보세요. title을 주면 마우스를 잠시 멈췄을 때 도움말이 뜹니다.

Move the pointer here

Clicks: 0

class BoxHoverState(rx.State):
    inside: bool = False
    clicks: int = 0

    @rx.event
    def enter(self):
        self.inside = True

    @rx.event
    def leave(self):
        self.inside = False

    @rx.event
    def click(self):
        self.clicks += 1


rx.box(
    rx.text(rx.cond(BoxHoverState.inside, "Pointer inside", "Move the pointer here")),
    rx.text("Clicks: ", BoxHoverState.clicks, size="1"),
    on_mouse_enter=BoxHoverState.enter,
    on_mouse_leave=BoxHoverState.leave,
    on_click=BoxHoverState.click,
    title="I am a box",
    background_color=rx.cond(BoxHoverState.inside, "var(--grass-4)", "var(--gray-3)"),
    padding="16px",
    border_radius="8px",
    cursor="pointer",
)

주문서 완성

연한 배경과 진한 왼쪽 테두리로 공지임을 알리고, 안쪽 여백으로 글자가 테두리에 붙지 않게 합니다.

Notice

The shop is closed on Monday.

rx.box(
    rx.hstack(
        rx.icon("megaphone", size=18, color="var(--amber-11)"),
        rx.text("Notice", weight="bold"),
        align="center",
    ),
    rx.text("The shop is closed on Monday.", size="2", margin_top="4px"),
    background_color="var(--amber-2)",
    border="1px solid var(--amber-6)",
    border_left="4px solid var(--amber-9)",
    border_radius="8px",
    padding="12px 16px",
    width="100%",
)

공방 노트

rx.box는 div 바탕의 블록 상자. 묶고 스타일을 입히는 데 쓴다.
고유 속성은 없다. width·padding·background_color·border_radius 같은 CSS 속성을 _ 이름으로 넘긴다.
색은 CSS 이름, var(--tomato-3) 또는 rx.color("tomato", 3), 테마 강조색 var(--accent-N).
background 하나로 그러데이션(linear·radial)과 url(…) 그림을 깐다.
on_click·on_mouse_enter 같은 기본 이벤트와 title·hidden 같은 HTML 속성도 쓸 수 있다.

← 이전

강의 개요

레이아웃 · Flex

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex