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

레이아웃

Separator

rx.separatorrx.divider

공식 문서

공방 주문서

프로필 카드에서 이름 부분과 연락처 부분 사이에 얇은 구분선을 넣어 주세요.

rx.separator는 내용 사이에 얇은 선을 그어 덩어리를 나눕니다. 눈으로 보이는 구분이자, 필요하면 화면 읽기 프로그램에게도 "여기서 나뉜다"는 뜻을 전합니다. rx.divider는 같은 컴포넌트의 다른 이름이라 어느 것을 써도 됩니다.

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.separator(),
    rx.card("Section 2"),
    spacing="4",
    direction="column",
    align="center",
)

속성 바꿔 보기

세로 선을 보려면 orientation을 vertical로, 바깥 direction을 row로 바꾸세요. 세로 선은 부모의 높이(여기서는 10rem)를 기준으로 길이가 정해집니다.

속성 바꿔 보기

Section 1

Section 2

size

orientation

direction

color

rx.flex(
    rx.card("Section 1"),
    rx.separator(size="4", orientation="horizontal", color_scheme="gray"),
    rx.card("Section 2"),
    direction="column",
    spacing="4",
    align="center",
    width="100%",
    height="10rem",
)

size는 선의 길이, orientation은 방향, color_scheme은 색입니다. direction은 바깥 Flex의 방향입니다.

속성	값	기본값	쓰임
`size`	`"1"`(16px) `"2"`(32px) `"3"`(64px) `"4"`(100%)	`"4"`	선의 길이
`orientation`	`"horizontal"` `"vertical"`	`"horizontal"`	가로선·세로선
`color_scheme`	Radix 색 이름	`"gray"`	선의 색
`decorative`	`True` / `False`	`True`	True면 꾸밈일 뿐이라 접근성 트리에서 빠진다. 뜻이 있는 구분이면 False

size와 orientation은 rx.breakpoints(...)로 화면 폭마다 다르게 줄 수 있습니다. Radix Themes의 기본 크기는 "1"이지만, 설치된 0.10의 rx.separator는 기본값을 "4"로 정해 두어 아무것도 주지 않으면 부모를 꽉 채웁니다.

길이: size

size="4"는 부모의 너비(세로선이면 높이)를 꽉 채웁니다. CSS width나 height를 "100%"로 줘도 같지만, size는 방향과 상관없이 똑같이 동작합니다. "1"~"3"은 고정 길이입니다.

rx.flex(
    rx.separator(size="1"),
    rx.separator(size="2"),
    rx.separator(size="3"),
    rx.separator(size="4"),
    direction="column",
    spacing="4",
    width="100%",
)

방향: orientation

orientation="vertical"이면 세로선이 됩니다. 세로선은 부모에 높이가 있어야 size="4"로 늘어날 수 있습니다. 공식 문서처럼 rx.divider 이름으로 썼습니다.

Section 1

Section 2

rx.flex(
    rx.card("Section 1"),
    rx.divider(orientation="vertical", size="4"),
    rx.card("Section 2"),
    spacing="4",
    width="100%",
    height="10vh",
)

글자 사이의 짧은 세로선

메뉴 링크 사이처럼 한 줄 안에서는 size="1"인 짧은 세로선이 알맞습니다. 바깥 Flex에 align="center"를 주면 선이 글자의 가운데 높이에 옵니다.

HomeBlogAbout

rx.flex(
    rx.link("Home", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("Blog", href="#"),
    rx.separator(orientation="vertical", size="1"),
    rx.link("About", href="#"),
    spacing="3",
    align="center",
)

주문서 완성

이름 부분과 연락처 부분 사이에 가로선을 두고, margin_y로 위아래에 숨 쉴 틈을 줍니다.

Jamie Kim

Potter

jamie@example.com

555-0100

rx.card(
    rx.flex(
        rx.avatar(fallback="JK"),
        rx.box(rx.text("Jamie Kim", weight="bold"), rx.text("Potter", size="2", color="var(--gray-11)")),
        spacing="3",
        align="center",
    ),
    rx.separator(margin_y="12px"),
    rx.vstack(
        rx.hstack(rx.icon("mail", size=16), rx.text("jamie@example.com", size="2"), align="center"),
        rx.hstack(rx.icon("phone", size=16), rx.text("555-0100", size="2"), align="center"),
        spacing="2",
    ),
    width="260px",
)

공방 노트

rx.separator(= rx.divider)는 내용 사이에 선을 긋는다.
size "1"~"4" = 16·32·64px·100%. 0.10의 기본은 "4"(꽉 채움).
orientation="vertical"이면 세로선. 부모에 높이가 있어야 늘어난다.
color_scheme으로 색을, decorative=False로 뜻이 있는 구분임을 알린다.

← 이전

레이아웃 · Spacer

레이아웃 · Card

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex