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

레이아웃

Card

rx.card

공식 문서

공방 주문서

블로그 첫 화면에 글마다 제목과 요약이 담긴 카드를 만들고, 카드를 누르면 그 글로 가게 해 주세요.

rx.card는 서로 관련된 내용을 한 덩어리로 묶는 상자입니다. Box와 비슷하지만 테두리가 있고, 테마의 색과 모서리 둥글기를 따르며, size로 안쪽 여백을 Radix 단계("1"~"5")에 맞춰 정합니다. 그래서 Box보다 적은 스타일로 테마와 어울리는 모양이 나옵니다.

Basic Card

rx.card("Basic Card")

속성 바꿔 보기

size가 커지면 안쪽 여백과 모서리 둥글기가 함께 커집니다. variant로 테두리와 배경의 느낌을 바꿉니다.

속성 바꿔 보기

Post title

A short summary of the post.

title

size

variant

width

rx.card(
    rx.heading("Post title", size="3"),
    rx.text("A short summary of the post.", size="2"),
    size="2",
    variant="surface",
    width="280px",
)

surface는 은은한 테두리, classic은 그림자가 있는 입체감, ghost는 테두리 없이 여백만 남깁니다.

속성	값	기본값	쓰임
`size`	`"1"` ~ `"5"`	`"1"`	안쪽 여백과 모서리 둥글기
`variant`	`"surface"` `"classic"` `"ghost"`	`"surface"`	테두리·배경의 느낌
`as_child`	`True` / `False`	`False`	카드 대신 자식 요소(링크, 버튼)를 카드 모양으로 그린다

size는 rx.breakpoints(...)로 화면 폭마다 다르게 줄 수 있습니다. 그 밖의 크기·여백은 Box처럼 CSS 속성으로 줍니다.

다섯 가지 크기

공식 문서의 예제입니다. 같은 글자라도 size가 커질수록 카드가 넉넉해집니다.

Card 1

Card 2

Card 3

Card 4

Card 5

rx.flex(
    rx.card("Card 1", size="1"),
    rx.card("Card 2", size="2"),
    rx.card("Card 3", size="3"),
    rx.card("Card 4", size="4"),
    rx.card("Card 5", size="5"),
    spacing="2",
    align_items="flex-start",
    flex_wrap="wrap",
)

세 가지 variant

공식 문서 본문에는 예제가 없지만 속성 표에 있는 variant입니다. 기본 surface, 입체감 있는 classic, 테두리 없는 ghost가 있습니다. ghost는 카드의 여백 규칙만 빌리고 싶을 때 씁니다.

surface

classic

ghost

rx.flex(
    rx.card("surface", variant="surface"),
    rx.card("classic", variant="classic"),
    rx.card("ghost", variant="ghost"),
    spacing="4",
    wrap="wrap",
)

다른 요소로 그리기: as_child

as_child=True를 주면 카드 자체를 그리지 않고, 바로 아래 자식 요소를 카드 모양으로 그립니다. 자식이 링크면 카드 전체를 누를 수 있는 링크가 됩니다. 링크나 버튼에 흔히 씁니다. 아래 카드는 누르면 새 탭에서 Reflex 문서가 열립니다.

Quick Start

Get started with Reflex in 5 minutes.

rx.card(
    rx.link(
        rx.flex(
            rx.avatar(src="https://picsum.photos/id/64/100/100", fallback="RX"),
            rx.box(
                rx.heading("Quick Start", as_="h2", size="3"),
                rx.text("Get started with Reflex in 5 minutes."),
            ),
            spacing="2",
        ),
        href="https://reflex.dev/docs/getting-started/introduction/",
        is_external=True,
    ),
    as_child=True,
)

Inset으로 가장자리까지

카드 안의 그림을 테두리까지 꽉 채우려면 rx.inset으로 감쌉니다. 안쪽 여백만큼 바깥으로 끌어내 가장자리에 붙입니다. 자세한 쓰임은 Inset 페이지에서 다룹니다.

Fresh strawberries, picked this morning.

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/1080/600/300", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.text("Fresh strawberries, picked this morning."),
    width="260px",
)

주문서 완성

글마다 카드 하나를 두고, as_child=True로 카드 전체를 링크로 만들었습니다. 위쪽 그림은 rx.inset으로 가장자리까지 채웁니다. 링크는 underline="none"으로 밑줄을 없앴습니다.

Glazing basics

How to mix your first glaze.

Kiln care

Keep your kiln clean and safe.

rx.flex(
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1043/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Glazing basics", size="3"),
                rx.text("How to mix your first glaze.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    rx.card(
        rx.link(
            rx.box(
                rx.inset(
                    rx.image(src="https://picsum.photos/id/1060/600/300", width="100%", height="auto", display="block"),
                    side="top",
                    pb="current",
                ),
                rx.heading("Kiln care", size="3"),
                rx.text("Keep your kiln clean and safe.", size="2", color="var(--gray-11)"),
            ),
            href="#",
            underline="none",
        ),
        as_child=True,
        width="240px",
    ),
    spacing="4",
    wrap="wrap",
)

공방 노트

rx.card는 테두리와 테마 모양을 갖춘 묶음 상자다.
size "1"~"5"로 여백과 둥글기를, variant surface·classic·ghost로 느낌을 정한다.
as_child=True면 자식(링크·버튼)이 카드 모양이 되어 카드 전체를 누를 수 있다.
그림을 가장자리까지 채우려면 rx.inset으로 감싼다.

← 이전

레이아웃 · Separator

레이아웃 · Inset

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex