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

타이포그래피

Heading

rx.heading

공식 문서

공방 주문서

쇼핑몰 기획전 페이지에 큰 페이지 제목 하나와, 그 아래 같은 크기의 분류 제목 두 개를 놓아 주세요.

rx.heading은 페이지와 절의 제목입니다. rx.text와 같은 글자 속성(size, weight, align, trim, 색)을 쓰지만 기본이 굵고 크며, as_로 h1~h6 제목 단계를 정합니다. 제목 단계는 문서의 목차 구조가 되므로, 생김새와 따로 생각합니다.

The quick brown fox jumps over the lazy dog.

rx.heading("The quick brown fox jumps over the lazy dog.", as_="h2")

속성 바꿔 보기

as_를 바꿔도 화면은 그대로이고, size를 바꿔야 크기가 바뀝니다. 둘을 따로 바꿔 보며 차이를 확인해 보세요.

속성 바꿔 보기

Spring Collection

label

as_

size

weight

align

trim

color

high_contrast

rx.heading("Spring Collection", as_="h2", size="6", weight="bold", align="left", trim="normal", color_scheme="gray", high_contrast=False)

as_는 문서 구조(h1~h6)를, size는 보이는 크기를 정합니다. 두 속성은 서로 영향을 주지 않습니다.

속성	값	기본값	쓰임
`as_`	`"h1"` ~ `"h6"`	`"h1"`	제목 단계(문서 구조). 생김새는 그대로
`size`	`"1"` ~ `"9"`	`"6"`	보이는 크기와 줄 간격, 자간
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	`"bold"`	굵기
`align`	`"left"` `"center"` `"right"`	물려받음	정렬
`trim`	`"normal"` `"start"` `"end"` `"both"`	`"normal"`	위아래 줄 간격 여백 잘라내기
`color_scheme`	Radix 색 이름	테마 색	글자 색
`high_contrast`	`True` / `False`	`False`	배경과의 대비를 더 크게
`as_child`	`True` / `False`	`False`	자식 요소에 제목 스타일만 입힘

이벤트는 on_click 같은 기본 이벤트만 있습니다.

as_는 구조, size는 생김새

위의 세 줄은 h2, h3, h4로 단계가 다르지만 크기가 같습니다. as_는 의미만 바꾸기 때문입니다. 아래 세 줄처럼 단계가 깊어질수록 size를 직접 줄여 주면 구조와 생김새가 맞습니다. 한 페이지에 h1은 하나만 두는 것이 보통입니다.

Level 2

Level 3

Level 4

Page title

Section

Subsection

rx.flex(
    rx.heading("Level 2", as_="h2"),
    rx.heading("Level 3", as_="h3"),
    rx.heading("Level 4", as_="h4"),
    rx.separator(),
    rx.heading("Page title", as_="h1", size="8"),
    rx.heading("Section", as_="h2", size="6"),
    rx.heading("Subsection", as_="h3", size="4"),
    direction="column",
    spacing="3",
)

크기, 굵기, 정렬

size는 "1"부터 "9"까지입니다. 글자가 커질수록 상대적인 줄 간격과 자간이 줄어들어, 큰 제목도 성기지 않게 보입니다.

Size 1

Size 3

Size 5

Size 7

Size 9

rx.flex(
    rx.heading("Size 1", size="1"),
    rx.heading("Size 3", size="3"),
    rx.heading("Size 5", size="5"),
    rx.heading("Size 7", size="7"),
    rx.heading("Size 9", size="9"),
    direction="column",
    spacing="3",
)

Light

Regular

Medium

Bold

Left-aligned

Center-aligned

Right-aligned

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

trim: 제목 위 여백 맞추기

제목은 글자가 커서 줄 간격 여백도 큽니다. trim="start"로 위쪽 여백을 잘라 내면, 카드나 상자의 위쪽 안쪽 여백이 양옆과 같아 보입니다. "both"는 위아래를 모두 자릅니다.

Without Trim

With Trim

With trim

The heading now sits as close to the top edge as the text does to the sides.

rx.flex(
    rx.heading(
        "Without Trim",
        as_="h2",
        trim="normal",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.heading(
        "With Trim",
        as_="h2",
        trim="both",
        style={"background": "var(--gray-a2)", "border_top": "1px dashed var(--gray-a7)", "border_bottom": "1px dashed var(--gray-a7)"},
    ),
    rx.box(
        rx.heading("With trim", as_="h3", size="3", margin_bottom="4px", trim="start"),
        rx.text("The heading now sits as close to the top edge as the text does to the sides."),
        padding="16px",
        style={"background": "var(--gray-a2)", "border": "1px dashed var(--gray-a7)"},
    ),
    direction="column",
    spacing="3",
)

색과 대비

color_scheme으로 테마와 다른 색을 쓰고, high_contrast=True로 같은 계열에서 더 진하게 만듭니다. 왼쪽이 기본, 오른쪽이 높은 대비입니다.

Indigo

Cyan

Crimson

rx.grid(
    rx.heading("Indigo", as_="h3", color_scheme="indigo"),
    rx.heading("Indigo", as_="h3", color_scheme="indigo", high_contrast=True),
    rx.heading("Cyan", as_="h3", color_scheme="cyan"),
    rx.heading("Cyan", as_="h3", color_scheme="cyan", high_contrast=True),
    rx.heading("Crimson", as_="h3", color_scheme="crimson"),
    rx.heading("Crimson", as_="h3", color_scheme="crimson", high_contrast=True),
    columns="2",
    spacing="2",
)

화면 폭에 따라 크기 바꾸기

size, weight, align, trim에는 문자열 대신 화면 폭별 값을 dict로 줄 수 있습니다. 아래 제목은 좁은 화면에서 "4", sm 이상에서 "6", md 이상에서 "8"이 됩니다. 창 폭을 줄여 보세요.

Resize the window

rx.heading("Resize the window", as_="h2", size={"initial": "4", "sm": "6", "md": "8"})

주문서 완성

페이지 제목은 h1로 크게, 분류 제목 두 개는 h2로 같은 크기를 줍니다. 맨 위 제목은 trim="start"로 위쪽 여백을 줄입니다.

Spring Collection

New arrivals for warmer days.

Shirts

Linen and cotton, six colors.

Shoes

Light sneakers and sandals.

rx.box(
    rx.heading("Spring Collection", as_="h1", size="8", trim="start"),
    rx.text("New arrivals for warmer days.", size="3", color_scheme="gray"),
    rx.heading("Shirts", as_="h2", size="5", margin_top="20px"),
    rx.text("Linen and cotton, six colors.", size="2"),
    rx.heading("Shoes", as_="h2", size="5", margin_top="20px"),
    rx.text("Light sneakers and sandals.", size="2"),
)

공방 노트

rx.heading은 기본 h1, size "6", 굵게. as_로 h1~h6 단계를 정한다.
as_는 문서 구조만, size는 생김새만 바꾼다. 단계가 깊으면 size를 직접 줄인다.
weight·align·color_scheme·high_contrast는 rx.text와 같다.
trim="start"로 상자 안 제목 위쪽 여백을 맞춘다.
size={"initial": "4", "md": "8"}처럼 화면 폭별 값을 줄 수 있다.

← 이전

타이포그래피 · Text

타이포그래피 · Link

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex