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

레이아웃

Inset

rx.inset

공식 문서

공방 주문서

상품 카드 위쪽에 사진을 카드 가장자리까지 꽉 차게 넣어 주세요.

rx.inset은 안쪽 내용에 음수 바깥 여백을 줘서, 둘러싼 상자의 안쪽 여백을 넘어 가장자리까지 내용을 펼칩니다. Card 안에 넣으면 그림이 카드의 테두리 끝에서 끝까지 채워집니다. 카드 위쪽 사진, 아래쪽 지도처럼 내용이 가장자리에 붙어야 할 때 씁니다.

A river between the hills, seen from above.

rx.card(
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="top",
        pb="current",
    ),
    rx.text("A river between the hills, seen from above."),
    width="280px",
)

속성 바꿔 보기

카드 안에 그림 하나만 넣고 side를 바꿔 봅니다. side는 내용이 붙을 가장자리를 고릅니다. top이면 위쪽과 양옆이, left면 왼쪽과 위아래가 펼쳐지고 반대쪽(아래, 오른쪽)만 카드 여백이 남습니다. x는 좌우만, y는 위아래만 펼칩니다. 카드 size가 클수록 안쪽 여백이 커서 차이가 잘 보입니다.

side는 가장자리로 펼칠 쪽, clip은 잘라 낼 경계입니다. classic 카드에서 clip을 바꾸면 테두리를 덮는지가 달라집니다.

속성	값	기본값	쓰임
`side`	`"top"` `"bottom"` `"left"` `"right"` `"x"` `"y"`	네 쪽 모두	내용이 붙을 가장자리. top은 위와 양옆, x는 좌우만, y는 위아래만
`clip`	`"border-box"` `"padding-box"`	`"border-box"`	테두리 바깥선까지 채울지, 테두리 안쪽까지만 채울지
`p` `px` `py` `pt` `pr` `pb` `pl`	`"current"` `"0"`	없음	Inset 안쪽 여백. current는 부모의 안쪽 여백과 같게

모든 속성은 rx.breakpoints(...)로 화면 폭마다 다르게 줄 수 있습니다. Radix Themes는 side="all"도 받지만, 설치된 0.10은 "all"을 넘기면 오류를 냅니다. 네 쪽 모두 펼치려면 side를 빼면 됩니다.

아래쪽으로: side="bottom"

side="bottom"은 아래쪽과 양옆을 펼칩니다. 한쪽 가장자리에 붙일 때는 반대쪽 안쪽 여백을 "current"로 두는 것이 좋습니다. 그러면 가장자리까지 가지 않은 쪽은 원래 카드 여백만큼 떨어집니다. 아래는 글 다음에 그림을 두고 아래쪽을 펼친 뒤, 위쪽에 pt="current"를 주었습니다.

The inset below uses a bottom side.

rx.card(
    rx.text("The inset below uses a bottom side."),
    rx.inset(
        rx.image(
            src="https://picsum.photos/id/1015/600/300",
            alt="River",
            width="100%",
            height="auto",
            display="block",
        ),
        side="bottom",
        pt="current",
    ),
    width="280px",
)

왼쪽·오른쪽으로

side="right"나 "left"는 내용과 그림을 가로로 나란히 둘 때 씁니다. 그러려면 카드 안을 direction="row"인 Flex로 짜야 합니다. 그림 쪽에는 반대편 여백(pl 또는 pr)을 "current"로 줍니다.

This inset uses a right side.

This inset uses a left side.

rx.flex(
    rx.card(
        rx.flex(
            rx.text("This inset uses a right side."),
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="right",
                pl="current",
            ),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    rx.card(
        rx.flex(
            rx.inset(
                rx.box(background="center/cover url('https://picsum.photos/id/1015/300/300')", height="100%"),
                width="100%",
                side="left",
                pr="current",
            ),
            rx.text("This inset uses a left side."),
            direction="row",
            width="100%",
        ),
        width="260px",
    ),
    spacing="4",
    wrap="wrap",
)

current 여백의 쓰임

위쪽을 펼친 Inset 바로 아래에 글을 두면, 기본으로는 글이 그림에 바짝 붙습니다. pb="current"를 주면 그 사이에 카드 안쪽 여백과 같은 틈이 생깁니다. 값은 "current"와 "0" 두 가지입니다.

No pb: text touches the box.

pb=current: same gap as the card padding.

rx.flex(
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top"),
        rx.text("No pb: text touches the box."),
        width="200px",
    ),
    rx.card(
        rx.inset(rx.box(height="60px", background_color="var(--accent-5)"), side="top", pb="current"),
        rx.text("pb=current: same gap as the card padding."),
        width="200px",
    ),
    spacing="4",
    wrap="wrap",
)

주문서 완성

사진은 위쪽 가장자리까지 펼치고, pb="current"로 상품 이름과 적당히 띄웠습니다. 나머지 내용은 카드의 여백 안에 그대로 남습니다.

Blue mug

$18

rx.card(
    rx.inset(
        rx.image(src="https://picsum.photos/id/30/600/400", alt="Mug", width="100%", height="auto", display="block"),
        side="top",
        pb="current",
    ),
    rx.heading("Blue mug", size="3"),
    rx.text("$18", color="var(--gray-11)", margin_bottom="8px"),
    rx.button("Add to cart", width="100%"),
    width="240px",
)

공방 노트

rx.inset은 음수 여백으로 내용을 부모(주로 Card) 가장자리까지 펼친다.
side는 붙을 가장자리: top(위+양옆)·bottom·left·right·x(좌우)·y(위아래). 빼면 네 쪽 모두(0.10에서 "all"은 오류).
한쪽만 펼칠 때 반대쪽 여백(pb·pt·pl·pr)을 "current"로 두어 카드 여백을 지킨다.
left·right는 카드 안을 direction="row" Flex로 짜야 한다.
clip은 border-box(테두리까지)·padding-box(테두리 안쪽).

← 이전

레이아웃 · Card

레이아웃 · Aspect Ratio

새 교시·새 강의 소식 받기

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