컴포넌트 공방: Reflex 라이브러리 100
·
강의 개요
레이아웃
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
타이포그래피
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
rx.text.kbd공식 문서
공방 주문서
메모 앱의 도움말 창에 기능 이름과 단축키를 나란히 적은 단축키 표를 만들어 주세요.
rx.text.kbd는 키보드 키나 단축키를 키캡 모양으로 보여 줍니다. HTML <kbd> 태그가 됩니다. 도움말, 단축키 안내, 튜토리얼의 "이 키를 누르세요" 같은 자리에 씁니다.
rx.text.kbd("Shift + Tab")Kbd의 모양 속성은 size 하나입니다. 글자를 바꿔 다른 키도 적어 보세요.
속성 바꿔 보기
label
size
rx.text.kbd("Ctrl + K", size="3")| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
| 자식 | 문자열, State 값 | 필수 | 키 이름 |
size | "1" ~ "9" | 물려받음 | 키캡과 글자 크기 |
Text나 Heading과 달리 size에 화면 폭별 값(dict)을 넣는 형식은 0.10의 Kbd 타입에 없습니다. 이벤트는 기본 이벤트만 있습니다.
size는 "1"~"9"입니다. 커질수록 상대적인 줄 간격과 자간이 줄어듭니다. 주지 않으면 둘러싼 글자의 크기를 따릅니다.
rx.flex(
rx.text.kbd("Shift + Tab", size="1"),
rx.text.kbd("Shift + Tab", size="3"),
rx.text.kbd("Shift + Tab", size="5"),
rx.text.kbd("Shift + Tab", size="7"),
rx.text.kbd("Shift + Tab", size="9"),
direction="column",
align="start",
spacing="3",
)rx.text 안에 자식으로 넣으면 문장 속에 키캡이 들어갑니다. 키 하나씩 따로 감싸도 되고, 조합 전체를 한 번에 감싸도 됩니다.
Press Ctrl + S to save.
Undo with Ctrl + Z, redo with Ctrl + Y.
rx.flex(
rx.text("Press ", rx.text.kbd("Ctrl"), " + ", rx.text.kbd("S"), " to save.", size="3"),
rx.text("Undo with ", rx.text.kbd("Ctrl + Z"), ", redo with ", rx.text.kbd("Ctrl + Y"), ".", size="2", color_scheme="gray"),
direction="column",
spacing="3",
)입력 칸의 on_key_down은 누른 키 이름과, Ctrl·Alt·Shift·Meta가 함께 눌렸는지를 넘겨 줍니다. 그 값을 State에 담아 rx.text.kbd로 보여 줍니다. 입력 칸을 누른 뒤 Shift+K나 Alt+1처럼 눌러 보세요.
class KbdKeyState(rx.State):
key: str = "?"
mods: list[str] = []
@rx.event
def press(self, key: str, info: rx.event.KeyInputInfo):
names = {"ctrl_key": "Control", "alt_key": "Alt", "shift_key": "Shift", "meta_key": "Meta"}
self.mods = [name for flag, name in names.items() if info.get(flag) and name != key]
self.key = "Space" if key == " " else key
rx.flex(
rx.input(placeholder="Click here and press any keys", on_key_down=KbdKeyState.press, width="260px"),
rx.flex(
rx.foreach(KbdKeyState.mods, lambda m: rx.fragment(rx.text.kbd(m, size="4"), rx.text("+", size="4"))),
rx.text.kbd(KbdKeyState.key, size="4"),
spacing="2",
align="center",
),
direction="column",
align="start",
spacing="3",
)기능 이름과 단축키를 rx.table의 두 칸에 나눠 넣고, 단축키 칸만 rx.text.kbd로 감쌉니다.
rx.table.root(
rx.table.body(
rx.table.row(rx.table.cell("Save"), rx.table.cell(rx.text.kbd("Ctrl + S"))),
rx.table.row(rx.table.cell("Search"), rx.table.cell(rx.text.kbd("Ctrl + K"))),
rx.table.row(rx.table.cell("New note"), rx.table.cell(rx.text.kbd("Ctrl + N"))),
rx.table.row(rx.table.cell("Close"), rx.table.cell(rx.text.kbd("Esc"))),
),
size="1",
max_width="320px",
)공방 노트
rx.text.kbd("…")는 키캡 모양의 키 이름(<kbd>).
모양 속성은 size "1"~"9" 하나. 주지 않으면 바깥 글자 크기를 따른다.
문장 속에 자식으로 넣는다. 키마다 따로, 또는 조합 전체를 한 번에.
on_key_down(key, info)으로 누른 키를 받아 State로 보여 줄 수 있다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.