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

타이포그래피

Blockquote

rx.blockquote

공식 문서

공방 주문서

쇼핑몰 첫 화면에 고객 후기 한 줄을 인용으로 크게 보이고, 버튼으로 다음 후기를 넘겨 볼 수 있게 해 주세요.

rx.blockquote는 다른 사람의 말이나 글을 따로 떼어 보여 주는 인용 단락입니다. HTML <blockquote>가 되고, 왼쪽에 세로 막대가 붙어 본문과 구분됩니다. 후기, 명언, 문서 발췌처럼 한 덩어리로 인용할 때 씁니다.

Perfect typography is certainly the most elusive of all arts.

rx.blockquote("Perfect typography is certainly the most elusive of all arts.")

속성 바꿔 보기

크기, 굵기, 색을 바꿀 수 있습니다. 색은 글자와 왼쪽 막대에 함께 들어갑니다.

속성 바꿔 보기

Perfect typography is certainly the most elusive of all arts.

label

size

weight

color

high_contrast

rx.blockquote("Perfect typography is certainly the most elusive of all arts.", size="3", weight="regular", color_scheme="indigo", high_contrast=False)

size를 키우면 줄 간격과 자간도 함께 맞춰집니다. high_contrast는 글자를 더 진하게 만듭니다.

속성	값	기본값	쓰임
`size`	`"1"` ~ `"9"`	물려받음	글자 크기와 줄 간격, 자간
`weight`	`"light"` `"regular"` `"medium"` `"bold"`	물려받음	굵기
`color_scheme`	Radix 색 이름	테마 색	글자와 막대 색
`high_contrast`	`True` / `False`	`False`	글자를 더 진하게
`cite`	주소 문자열	없음	인용한 출처의 주소(화면에는 보이지 않음)

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

크기와 굵기

size는 "1"~"9"입니다. 커질수록 상대적인 줄 간격과 자간이 줄어, 큰 인용문도 단단하게 보입니다.

Perfect typography is an elusive art.

rx.flex(
    rx.blockquote("Perfect typography is an elusive art.", size="1"),
    rx.blockquote("Perfect typography is an elusive art.", size="3"),
    rx.blockquote("Perfect typography is an elusive art.", size="5"),
    rx.blockquote("Perfect typography is an elusive art.", size="7"),
    rx.separator(),
    rx.blockquote("Perfect typography is an elusive art.", weight="light"),
    rx.blockquote("Perfect typography is an elusive art.", weight="regular"),
    rx.blockquote("Perfect typography is an elusive art.", weight="medium"),
    rx.blockquote("Perfect typography is an elusive art.", weight="bold"),
    direction="column",
    spacing="3",
)

색과 대비

color_scheme으로 테마와 다른 색을, high_contrast=True로 더 진한 글자를 씁니다. 왼쪽이 기본, 오른쪽이 높은 대비입니다.

Good design is honest.

rx.grid(
    rx.blockquote("Good design is honest.", color_scheme="indigo"),
    rx.blockquote("Good design is honest.", color_scheme="indigo", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="cyan"),
    rx.blockquote("Good design is honest.", color_scheme="cyan", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="crimson"),
    rx.blockquote("Good design is honest.", color_scheme="crimson", high_contrast=True),
    rx.blockquote("Good design is honest.", color_scheme="orange"),
    rx.blockquote("Good design is honest.", color_scheme="orange", high_contrast=True),
    columns="2",
    spacing="3",
)

출처 남기기: cite

cite에는 인용한 글의 주소를 적습니다. 브라우저 화면에는 나타나지 않고 HTML 속성으로만 남아, 검색 엔진과 보조 기술이 출처를 알 수 있습니다. 사람에게 출처를 보여 주려면 아래처럼 rx.text를 따로 붙입니다.

Less, but better.

Dieter Rams

rx.box(
    rx.blockquote(
        "Less, but better.",
        cite="https://en.wikipedia.org/wiki/Dieter_Rams",
        size="5",
    ),
    rx.text("Dieter Rams", size="2", color_scheme="gray", margin_top="6px", margin_left="16px"),
)

Blockquote와 Quote

rx.blockquote는 독립된 단락이고, rx.text.quote는 문장 안에 들어가는 짧은 인용입니다. 문장을 끊고 따로 보여 줄 때는 Blockquote, 문장 속에 넣을 때는 Quote를 씁니다.

A blockquote is its own block, set apart from the paragraph.

A quote stays inside the sentence: short and inline, then the sentence goes on.

rx.flex(
    rx.blockquote("A blockquote is its own block, set apart from the paragraph."),
    rx.text(
        "A quote stays inside the sentence: ",
        rx.text.quote("short and inline"),
        ", then the sentence goes on.",
    ),
    direction="column",
    spacing="4",
)

주문서 완성

후기 목록을 State에 두고, 지금 보여 줄 번호(index)만 바꿉니다. 인용문과 이름이 모두 State 값이므로 버튼을 누를 때마다 함께 바뀝니다.

Arrived in two days and fits perfectly.

Mina, Seoul

class BlockquoteReviewState(rx.State):
    reviews: list[dict[str, str]] = [
        {"text": "Arrived in two days and fits perfectly.", "name": "Mina, Seoul"},
        {"text": "The fabric feels even better than the photos.", "name": "Jun, Busan"},
        {"text": "Third order this year. Still happy.", "name": "Sora, Daegu"},
    ]
    index: int = 0

    @rx.event
    def next_review(self):
        self.index = (self.index + 1) % len(self.reviews)


rx.card(
    rx.blockquote(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["text"], size="4", color_scheme="indigo"),
    rx.flex(
        rx.text(BlockquoteReviewState.reviews[BlockquoteReviewState.index]["name"], size="2", color_scheme="gray"),
        rx.spacer(),
        rx.button("Next review", rx.icon("arrow-right"), on_click=BlockquoteReviewState.next_review, size="1", variant="soft"),
        align="center",
        margin_top="12px",
        padding_left="16px",
    ),
    max_width="420px",
)

공방 노트

rx.blockquote("…")는 따로 떼어 보여 주는 인용 단락(<blockquote>).
size "1"~"9", weight, color_scheme, high_contrast로 모양을 정한다.
cite는 출처 주소를 HTML에만 남긴다. 보이는 출처는 rx.text로 따로.
문장 속 짧은 인용은 rx.text.quote.

← 이전

타이포그래피 · Markdown

타이포그래피 · Quote

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex