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

타이포그래피

Code

rx.code

공식 문서

공방 주문서

설치 안내 문장 속의 명령어와 파일 이름을 고정폭 글꼴로 구분해 주세요.

rx.code는 문장 속의 짧은 코드, 명령어, 파일 이름을 고정폭 글꼴과 옅은 배경으로 표시합니다. HTML <code> 태그가 됩니다. 여러 줄짜리 코드와 문법 강조가 필요하면 rx.code_block을 씁니다.

console.log()

rx.code("console.log()")

속성 바꿔 보기

variant로 배경과 테두리 모양을, size와 weight로 글자를, color_scheme으로 색을 바꿉니다.

속성 바꿔 보기

reflex run

label

variant

size

weight

color

high_contrast

rx.code("reflex run", variant="soft", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

ghost는 배경 없이 글꼴과 색만 바뀝니다. high_contrast는 글자를 더 진하게 만듭니다.

속성	값	기본값	쓰임
`variant`	`"solid"` `"soft"` `"outline"` `"ghost"`	`"soft"`	배경·테두리 모양
`size`	`"1"` ~ `"9"`	물려받음	글자 크기
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	물려받음	굵기
`color_scheme`	Radix 색 이름	테마 색	색
`high_contrast`	`True` / `False`	`False`	글자를 더 진하게

Reflex 0.10의 variant 타입에는 "classic"과 "surface"도 들어 있지만, Radix의 Code가 모양을 정해 둔 것은 위의 네 가지입니다. 이벤트는 기본 이벤트만 있습니다.

네 가지 variant와 대비

왼쪽 열은 기본, 오른쪽 열은 high_contrast=True입니다. 본문 속에서는 soft가 가장 무난하고, 눈에 띄어야 하면 solid, 배경을 깔기 싫으면 ghost를 씁니다.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.flex(
        rx.code("console.log()", variant="solid"),
        rx.code("console.log()", variant="soft"),
        rx.code("console.log()", variant="outline"),
        rx.code("console.log()", variant="ghost"),
        direction="column",
        align="start",
        spacing="2",
    ),
    rx.flex(
        rx.code("console.log()", variant="solid", high_contrast=True),
        rx.code("console.log()", variant="soft", high_contrast=True),
        rx.code("console.log()", variant="outline", high_contrast=True),
        rx.code("console.log()", variant="ghost", high_contrast=True),
        direction="column",
        align="start",
        spacing="2",
    ),
    spacing="5",
)

크기와 굵기

size는 "1"~"9"이고, 커질수록 상대적인 줄 간격과 자간이 줄어듭니다. 문장 안에 넣을 때는 size를 주지 않으면 둘러싼 글자의 크기를 따릅니다.

size 1size 3size 5size 7size 9lightregularmediumbold

rx.flex(
    rx.code("size 1", size="1"),
    rx.code("size 3", size="3"),
    rx.code("size 5", size="5"),
    rx.code("size 7", size="7"),
    rx.code("size 9", size="9"),
    rx.separator(),
    rx.code("light", weight="light"),
    rx.code("regular", weight="regular"),
    rx.code("medium", weight="medium"),
    rx.code("bold", weight="bold"),
    direction="column",
    spacing="3",
    align="start",
)

색

color_scheme으로 테마 색 대신 다른 색을 씁니다. 오류 메시지 속 코드는 red, 중립적인 파일 이름은 gray처럼 의미에 맞춥니다.

console.log()console.log()console.log()console.log()

rx.flex(
    rx.code("console.log()", color_scheme="indigo"),
    rx.code("console.log()", color_scheme="crimson"),
    rx.code("console.log()", color_scheme="orange"),
    rx.code("console.log()", color_scheme="cyan"),
    direction="column",
    spacing="2",
    align="start",
)

문장 속에 넣기

rx.text의 자식으로 문자열과 rx.code를 섞으면 문장 중간에 코드가 들어갑니다. 크기는 바깥 rx.text의 size를 따릅니다.

Run reflex run and open localhost:3000 in your browser. Stop the server with Ctrl+C.

rx.text(
    "Run ",
    rx.code("reflex run"),
    " and open ",
    rx.code("localhost:3000", variant="ghost"),
    " in your browser. Stop the server with ",
    rx.code("Ctrl+C", color_scheme="gray"),
    ".",
    size="3",
)

주문서 완성

명령어는 기본 soft로, 파일 이름은 회색 outline으로 구분합니다. 안내 상자는 rx.callout입니다.

Install the package with pip install reflex, then create an app with reflex init. Settings live in rxconfig.py.

rx.callout.root(
    rx.callout.icon(rx.icon("terminal")),
    rx.callout.text(
        "Install the package with ",
        rx.code("pip install reflex"),
        ", then create an app with ",
        rx.code("reflex init"),
        ". Settings live in ",
        rx.code("rxconfig.py", variant="outline", color_scheme="gray"),
        ".",
    ),
)

공방 노트

rx.code("…")는 문장 속 짧은 코드. 여러 줄·문법 강조는 rx.code_block.
variant: solid · soft(기본) · outline · ghost. high_contrast로 더 진하게.
size를 주지 않으면 둘러싼 rx.text의 크기를 따른다.
color_scheme은 의미에 맞게(오류 red, 중립 gray).

← 이전

타이포그래피 · Link

타이포그래피 · Markdown

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex