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

타이포그래피

Text

rx.textrx.text.em

공식 문서

공방 주문서

상품 카드에 굵은 상품 이름, 작은 회색 설명, 크게 강조한 가격을 넣어 주세요.

rx.text는 화면에 글자를 놓는 가장 기본 부품입니다. 기본으로 <span> 태그가 되고, 크기·굵기·정렬·색을 속성으로 정합니다. 설명 문장, 라벨, 숫자처럼 제목이 아닌 모든 글자에 씁니다.

The quick brown fox jumps over the lazy dog.

rx.text("The quick brown fox jumps over the lazy dog.")

속성 바꿔 보기

글자의 생김새는 아래 속성으로 정합니다. align은 글자가 한 줄 전체를 차지하는 블록(p, div)일 때만 눈에 보입니다.

속성 바꿔 보기

The quick brown fox jumps over the lazy dog.

label

as_

size

weight

align

trim

color

high_contrast

rx.text("The quick brown fox jumps over the lazy dog.", as_="p", size="3", weight="regular", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_를 span으로 바꾸면 align이 더 이상 보이지 않습니다. span은 글자 폭만큼만 차지하기 때문입니다.

속성	값	기본값	쓰임
`as_`	`"p"` `"label"` `"div"` `"span"` `"b"` `"i"` `"u"` `"abbr"` `"cite"` `"del"` `"em"` `"ins"` `"kbd"` `"mark"` `"s"` `"samp"` `"sub"` `"sup"`	`"span"`	실제로 만들어질 HTML 태그. 생김새는 그대로
`size`	`"1"` ~ `"9"`	물려받음	글자 크기와 줄 간격, 자간
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	물려받음	굵기
`align`	`"left"` `"center"` `"right"`	물려받음	블록 안에서의 정렬
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	글자 위아래의 줄 간격 여백 잘라내기
`color_scheme`	Radix 색 이름	테마 색	글자 색
`high_contrast`	`True` / `False`	`False`	배경과의 대비를 더 크게
`as_child`	`True` / `False`	`False`	자식 요소를 그대로 쓰고 글자 스타일만 입힘

size·weight·align·trim에는 화면 폭별 값({"initial": "2", "md": "4"})도 넣을 수 있습니다. 이벤트는 on_click 같은 기본 이벤트만 있습니다.

as_: 의미만 바꾼다

as_는 만들어질 태그만 바꿉니다. 아래 네 줄은 p, label, div, span으로 서로 다르지만 생김새는 같습니다. 문단이면 p, 입력 칸의 이름이면 label처럼 뜻에 맞는 태그를 고르면 화면 읽기 프로그램과 검색 엔진이 내용을 더 잘 이해합니다.

This is a paragraph element.

This is a label element.

This is a div element.

This is a span element.

rx.flex(
    rx.text("This is a ", rx.text.strong("paragraph"), " element.", as_="p"),
    rx.text("This is a ", rx.text.strong("label"), " element.", as_="label"),
    rx.text("This is a ", rx.text.strong("div"), " element.", as_="div"),
    rx.text("This is a ", rx.text.strong("span"), " element.", as_="span"),
    direction="column",
    spacing="3",
)

크기, 굵기, 정렬

size는 글자 크기만이 아니라 줄 간격과 자간도 함께 맞춥니다. 글자가 커질수록 상대적인 줄 간격과 자간은 줄어듭니다. 긴 본문에는 2~~4, 버튼 옆 라벨 같은 UI 글자에는 1~~3이 잘 맞습니다.

Size 1: captions and hints

Size 2: UI labels

Size 3: body text

Size 5: lead paragraph

Size 7: big numbers

Size 9: hero

rx.flex(
    rx.text("Size 1: captions and hints", size="1"),
    rx.text("Size 2: UI labels", size="2"),
    rx.text("Size 3: body text", size="3"),
    rx.text("Size 5: lead paragraph", size="5"),
    rx.text("Size 7: big numbers", size="7"),
    rx.text("Size 9: hero", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

rx.flex(
    rx.text("Light", weight="light", as_="div"),
    rx.text("Regular", weight="regular", as_="div"),
    rx.text("Medium", weight="medium", as_="div"),
    rx.text("Bold", weight="bold", as_="div"),
    rx.separator(),
    rx.text("Left-aligned", align="left", as_="div"),
    rx.text("Center-aligned", align="center", as_="div"),
    rx.text("Right-aligned", align="right", as_="div"),
    direction="column",
    spacing="3",
    width="100%",
)

trim: 상자 안 여백 맞추기

글자에는 줄 간격만큼의 보이지 않는 여백이 위아래에 붙습니다. 그래서 같은 padding을 줘도 위아래가 양옆보다 넓어 보입니다. trim은 그 여백을 잘라 냅니다. "start"는 위쪽, "end"는 아래쪽, "both"는 양쪽입니다. 카드처럼 테두리가 있는 상자에서 차이가 잘 보입니다.

Without trim

Typography relates font size, line height and line width.

With trim

Typography relates font size, line height and line width.

rx.flex(
    rx.box(
        rx.heading("Without trim", as_="h2", size="3", margin_bottom="4px"),
        rx.text("Typography relates font size, line height and line width."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h2", size="3", margin_bottom="4px", trim="start"),
        rx.text("Typography relates font size, line height and line width.", trim="end"),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

색과 대비

color_scheme은 테마의 기본 색 대신 지정한 색을 씁니다. high_contrast=True를 더하면 같은 색 계열에서 더 진한 글자가 되어 배경과 잘 구분됩니다. 왼쪽이 기본, 오른쪽이 높은 대비입니다.

indigo

crimson

orange

rx.grid(
    rx.text("indigo", color_scheme="indigo"),
    rx.text("indigo", color_scheme="indigo", high_contrast=True),
    rx.text("crimson", color_scheme="crimson"),
    rx.text("crimson", color_scheme="crimson", high_contrast=True),
    rx.text("orange", color_scheme="orange"),
    rx.text("orange", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="2",
)

다른 글자 부품과 섞기

rx.text의 자식으로 문자열과 rx.link, rx.text.em, rx.code, rx.text.kbd를 섞어 넣으면 한 문장 안에서 일부만 다르게 보입니다.

브라우저는 연속된 공백을 하나로 합칩니다. 공백을 그대로 보여야 하면 CSS 속성 white_space="pre"를 줍니다. 아래 두 번째와 세 번째 줄을 비교해 보세요.

Look, such a helpful link, an italic emphasis, a piece of computer code, and a hotkey Shift + A within the text.

This is not pre formatted

This is pre formatted

rx.flex(
    rx.text(
        "Look, such a helpful ",
        rx.link("link", href="#"),
        ", an ",
        rx.text.em("italic emphasis"),
        ", a piece of computer ",
        rx.code("code"),
        ", and a hotkey ",
        rx.text.kbd("Shift + A"),
        " within the text.",
        size="4",
    ),
    rx.text("This is not pre     formatted"),
    rx.text("This is pre     formatted", white_space="pre"),
    direction="column",
    spacing="3",
)

체크박스와 한 줄로

as_="label"인 rx.text 안에 체크박스·라디오·스위치를 넣으면, 컨트롤이 글자의 첫 줄 높이에 맞춰 정렬됩니다. 글이 여러 줄이어도 마찬가지입니다. 라벨이므로 글자를 눌러도 체크박스가 바뀝니다.

I understand that these documents are confidential and cannot be shared with a third party.

rx.box(
    rx.text(
        rx.flex(
            rx.checkbox(default_checked=True),
            "I understand that these documents are confidential and cannot be shared with a third party.",
            spacing="2",
        ),
        as_="label",
        size="3",
    ),
    max_width="300px",
)

주문서 완성

이름은 굵게, 설명은 작고 회색으로, 가격은 크고 색을 넣어 세 단계로 나눕니다. 카드 위아래 끝의 글자에는 trim을 줘서 여백을 고르게 맞춥니다.

Linen Shirt

Breathable linen, relaxed fit. Machine washable.

$49.00

rx.card(
    rx.flex(
        rx.text("Linen Shirt", size="4", weight="bold", trim="start"),
        rx.text("Breathable linen, relaxed fit. Machine washable.", size="2", color_scheme="gray"),
        rx.text("$49.00", size="6", weight="bold", color_scheme="indigo", trim="end"),
        direction="column",
        spacing="2",
    ),
    max_width="320px",
)

공방 노트

rx.text는 기본 span. as_로 p·label·div 등 뜻에 맞는 태그를 고른다(생김새는 그대로).
size "1"~"9"는 줄 간격·자간까지 맞춘다. 본문 2~4, UI 라벨 1~3.
align은 p·div 같은 블록일 때만 보인다. trim으로 상자 안 위아래 여백을 맞춘다.
color_scheme으로 색을, high_contrast로 대비를. 공백 보존은 white_space="pre".
자식으로 rx.link·rx.code·rx.text.em·rx.text.kbd를 섞어 한 문장을 꾸민다.

← 이전

레이아웃 · Fragment

타이포그래피 · Heading

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex