ReflexKR

컴포넌트 공방: 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

HTML 요소

HTML Text

rx.el.abbrrx.el.brx.el.bdirx.el.bdorx.el.brrx.el.citerx.el.coderx.el.datarx.el.dfnrx.el.emrx.el.irx.el.kbdrx.el.markrx.el.qrx.el.rprx.el.rtrx.el.rubyrx.el.srx.el.samprx.el.smallrx.el.strongrx.el.subrx.el.suprx.el.timerx.el.urx.el.wbr

공식 문서

공방 주문서

릴리스 노트 한 줄에 버전, 날짜, 새 단축키, 없어진 기능을 각각 알맞은 HTML 글자 요소로 표시해 주세요.

문장 안에서 특정 낱말에 의미를 붙이는 HTML 요소 26개입니다. 강조, 코드, 키보드 키, 인용, 위첨자, 날짜 같은 것입니다. 대부분 글줄 안에 머무는 인라인 요소라서 rx.el.p나 rx.text 안에 섞어 씁니다. 브라우저가 기본 모양(굵게, 기울임, 고정폭)을 주고, 검색 엔진과 화면 읽기 프로그램은 그 의미를 읽습니다.

Press Ctrl + S to save your work.

rx.el.p(
    "Press ",
    rx.el.kbd("Ctrl"),
    " + ",
    rx.el.kbd("S"),
    " to ",
    rx.el.strong("save"),
    " your work.",
)

속성 바꿔 보기

글자 요소는 고유 속성이 거의 없고, 공통 속성과 스타일로 다룹니다. mark의 바탕색, bdo의 dir(글 방향)을 바꿔 봅니다.

속성 바꿔 보기

Reflex | Reflex | Reflex

word

mark_color

direction

size

rx.el.p(
    rx.el.mark("Reflex", background="yellow"),
    " | ",
    rx.el.bdo("Reflex", dir="rtl"),
    " | ",
    rx.el.small("Reflex"),
    font_size="18px",
)

bdo에 dir="rtl"을 주면 글자 순서가 그대로 뒤집힙니다. mark·small은 스타일로 모양을 바꿉니다.

속성	값	기본값	쓰임
`value` (data)	문자열·숫자	없음	사람이 읽는 글 뒤에 기계가 읽을 값
`date_time` (time)	`"2026-05-01"`, `"09:00"` …	없음	날짜·시각의 표준 형식
`cite` (q)	URL	없음	인용한 출처 주소(화면에는 보이지 않는다)
`title` (abbr, dfn)	문자열	없음	줄임말의 원래 말. 마우스를 올리면 보인다
`dir` (bdo, bdi)	`"ltr"` `"rtl"`	부모를 따름	글 방향
공통 속성·스타일	`id` `class_name` `color` …	없음	모든 글자 요소에 쓸 수 있다

강조와 의미

생김새가 같아도 뜻이 다른 짝이 있습니다. strong은 중요함, b는 그냥 굵게. em은 말의 강세, i는 다른 목소리(용어, 외국어). u는 밑줄로 표시해야 할 주석, s는 더는 맞지 않는 내용, mark는 형광펜, small은 덧붙이는 작은 글입니다.

strong important · b just bold

em stressed · i different voice

u annotated · s no longer true

mark highlighted · small side note

rx.el.div(
    rx.el.p(rx.el.strong("strong"), " important  ·  ", rx.el.b("b"), " just bold"),
    rx.el.p(rx.el.em("em"), " stressed  ·  ", rx.el.i("i"), " different voice"),
    rx.el.p(rx.el.u("u"), " annotated  ·  ", rx.el.s("s"), " no longer true"),
    rx.el.p(rx.el.mark("mark"), " highlighted  ·  ", rx.el.small("small"), " side note"),
    display="flex",
    flex_direction="column",
    gap="4px",
)

코드와 키보드

code는 코드 조각, kbd는 사용자가 누를 키, samp는 프로그램이 내놓은 출력입니다. 셋 다 고정폭 글꼴로 나옵니다.

Run reflex run in the terminal.

Then press Ctrl + C to stop.

The terminal prints: App running at http://localhost:3000

rx.el.div(
    rx.el.p("Run ", rx.el.code("reflex run"), " in the terminal."),
    rx.el.p("Then press ", rx.el.kbd("Ctrl"), " + ", rx.el.kbd("C"), " to stop."),
    rx.el.p("The terminal prints: ", rx.el.samp("App running at http://localhost:3000")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

인용, 출처, 정의

q는 짧은 인용으로 브라우저가 따옴표를 붙여 줍니다. cite 속성에는 출처 주소를, cite 요소에는 작품 제목을 씁니다. dfn은 그 자리에서 정의하는 용어, abbr은 줄임말이고 title에 원래 말을 적습니다.

As The Zen of Python says: Simple is better than complex.

A component is a reusable piece of UI.

rx.el.div(
    rx.el.p(
        "As ",
        rx.el.cite("The Zen of Python"),
        " says: ",
        rx.el.q("Simple is better than complex.", cite="https://peps.python.org/pep-0020/"),
    ),
    rx.el.p(
        "A ",
        rx.el.dfn("component"),
        " is a reusable piece of ",
        rx.el.abbr("UI", title="User Interface"),
        ".",
    ),
    display="flex",
    flex_direction="column",
    gap="4px",
)

위첨자, 아래첨자, 줄바꿈

sub·sup은 화학식과 지수에 씁니다. br은 그 자리에서 줄을 바꾸고, wbr은 "여기서는 줄을 바꿔도 된다"는 표시입니다. 아래 상자는 폭이 좁아서, 긴 낱말이 wbr 자리에서 나뉩니다.

Water is H₂O. Energy is mc².

Line one
Line two after br

Supercalifragilisticexpialidocious

rx.el.div(
    rx.el.p("Water is H", rx.el.sub("2"), "O. Energy is mc", rx.el.sup("2"), "."),
    rx.el.p("Line one", rx.el.br(), "Line two after br"),
    rx.el.p(
        "Super",
        rx.el.wbr(),
        "califragilistic",
        rx.el.wbr(),
        "expialidocious",
        width="120px",
        padding="6px",
        border="1px dashed gray",
    ),
    display="flex",
    flex_direction="column",
    gap="8px",
)

기계가 읽는 값

data와 time은 화면에는 사람이 읽는 글을 보이고, 속성에는 프로그램이 읽을 표준 값을 숨겨 둡니다. 겉모습은 보통 글자와 같습니다.

Price: $12

Opens on May 1st

Starts at 9 am

rx.el.div(
    rx.el.p("Price: ", rx.el.data("$12", value=12)),
    rx.el.p("Opens on ", rx.el.time("May 1st", date_time="2026-05-01")),
    rx.el.p("Starts at ", rx.el.time("9 am", date_time="09:00")),
    display="flex",
    flex_direction="column",
    gap="4px",
)

글 방향과 루비

bdi는 방향을 모르는 글(사용자 이름 등)을 주변과 떼어 놓아, 오른쪽에서 왼쪽으로 쓰는 글이 섞여도 순서가 꼬이지 않게 합니다. bdo는 방향을 강제로 정합니다. ruby·rt는 한자 위에 읽는 법을 다는 것이고, rp는 루비를 지원하지 않는 브라우저에서만 보이는 괄호입니다.

Winner: إيان - 3 points

bdo rtl: Hello

漢(kan)字(ji)

rx.el.div(
    rx.el.p("Winner: ", rx.el.bdi("إيان"), " - 3 points"),
    rx.el.p("bdo rtl: ", rx.el.bdo("Hello", dir="rtl")),
    rx.el.p(
        rx.el.ruby("漢", rx.el.rp("("), rx.el.rt("kan"), rx.el.rp(")"), "字", rx.el.rp("("), rx.el.rt("ji"), rx.el.rp(")")),
        font_size="24px",
    ),
    display="flex",
    flex_direction="column",
    gap="6px",
)

주문서 완성

버전은 strong, 날짜는 time, 단축키는 kbd, 없어진 것은 s, 새것은 mark, 부가 설명은 small과 abbr로 나눴습니다.

v2.1 · released Oct 24, 2026

Search now opens with Ctrl + K. ~~Slash key~~ New shortcut.

Requires API v3.

rx.el.div(
    rx.el.p(
        rx.el.strong("v2.1"),
        " · released ",
        rx.el.time("Oct 24, 2026", date_time="2026-10-24"),
    ),
    rx.el.p(
        "Search now opens with ",
        rx.el.kbd("Ctrl"),
        " + ",
        rx.el.kbd("K"),
        ". ",
        rx.el.s("Slash key"),
        " ",
        rx.el.mark("New shortcut"),
        ".",
    ),
    rx.el.p(rx.el.small("Requires ", rx.el.abbr("API", title="Application Programming Interface"), " v3.")),
    padding="12px 16px",
    border_left=f"4px solid {rx.color('indigo', 9)}",
    background=rx.color("gray", 2),
    display="flex",
    flex_direction="column",
    gap="4px",
)

공방 노트

글자 요소는 문장 안의 낱말에 뜻을 붙인다. rx.el.p 안에 글자와 섞어 쓴다.
strong/b, em/i처럼 모양이 같아도 뜻이 다르다. 의미가 있으면 strong·em.
code는 코드, kbd는 누를 키, samp는 프로그램 출력.
고유 속성은 data의 value, time의 date_time, q의 cite 셋뿐. 나머지는 공통 속성과 스타일.
bdi·bdo는 글 방향, ruby·rt·rp는 읽는 법, wbr은 줄을 바꿔도 되는 자리.

← 이전

HTML 요소 · HTML

HTML 요소 · HTML Layout

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex