ReflexKR

컴포넌트 공방: 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

레이아웃

Section

rx.section

공식 문서

공방 주문서

소개 페이지를 '기능', '가격' 같은 덩어리로 나누고, 덩어리마다 위아래 여백을 넉넉히 주세요.

rx.section은 페이지 내용의 한 구획을 나타냅니다. HTML <section> 요소로 그려지고, 기본으로 위아래 안쪽 여백이 들어갑니다. 무엇보다 의미를 나타내는 컴포넌트라서, 제목 하나와 그에 딸린 글처럼 서로 관련된 내용을 한 덩어리로 묶을 때 씁니다.

First

This is the first content section

Second

This is the second content section

rx.box(
    rx.section(
        rx.heading("First", as_="h2", size="4"),
        rx.text("This is the first content section"),
        padding_x="12px",
        background_color="var(--gray-2)",
    ),
    rx.section(
        rx.heading("Second", as_="h2", size="4"),
        rx.text("This is the second content section"),
        padding_x="12px",
        background_color="var(--gray-3)",
    ),
    width="100%",
)

속성 바꿔 보기

Section의 속성은 size 하나이고, 위아래 여백의 크기를 정합니다. 점선 사이의 빈 공간이 바뀌는 것을 보세요.

속성 바꿔 보기

Features

Vertical padding comes from the size prop.

size

rx.box(
    rx.section(
        rx.heading("Features", as_="h2", size="4"),
        rx.text("Vertical padding comes from the size prop."),
        size="2",
        padding_x="12px",
        background_color="var(--accent-2)",
        border_top="1px dashed var(--accent-8)",
        border_bottom="1px dashed var(--accent-8)",
    ),
    width="100%",
)

size 1은 24px, 2는 40px, 3은 64px의 위아래 여백입니다. 좌우 여백은 없으니 padding_x로 따로 줍니다.

속성	값	기본값	쓰임
`size`	`"1"`(24px) `"2"`(40px) `"3"`(64px)	`"2"`	위아래 안쪽 여백
`padding_x` 등 CSS	CSS 길이	없음	좌우 여백은 기본으로 없다

size는 rx.breakpoints(...)로 화면 폭마다 다르게 줄 수 있습니다. Radix Themes에는 size="4"(80px)도 있지만 설치된 0.10의 rx.section은 "1"~"3"만 받습니다.

세 가지 크기

크기만 다른 Section 세 개를 나란히 놓았습니다. 글자는 같고 위아래 여백만 달라집니다.

size 1

size 2

size 3

rx.flex(
    rx.section(rx.text("size 1"), size="1", padding_x="12px", background_color="var(--gray-3)"),
    rx.section(rx.text("size 2"), size="2", padding_x="12px", background_color="var(--gray-4)"),
    rx.section(rx.text("size 3"), size="3", padding_x="12px", background_color="var(--gray-5)"),
    spacing="3",
    align="start",
    width="100%",
)

화면 폭마다 다른 여백

휴대폰에서는 여백을 줄이고 넓은 화면에서는 늘릴 때 size에 rx.breakpoints를 넘깁니다.

Small padding on phones, more on wide screens

rx.section(
    rx.text("Small padding on phones, more on wide screens"),
    size=rx.breakpoints(initial="1", md="3"),
    padding_x="12px",
    background_color="var(--gray-3)",
    width="100%",
)

Box와 무엇이 다른가

rx.box는 뜻이 없는 <div>이고, rx.section은 "여기부터 한 구획"이라는 뜻을 가진 <section>입니다. 화면 읽기 프로그램과 검색 엔진은 이 구분을 문서의 구조로 읽습니다. 구획마다 rx.heading으로 제목을 붙이면 구조가 더 분명해집니다. 페이지 전체 폭은 rx.container로 묶고, 그 안을 Section으로 나누는 것이 흔한 짜임새입니다.

주문서 완성

Container로 본문 폭을 묶고, '기능'과 '가격'을 각각 Section으로 나눴습니다. 사이의 rx.separator()가 구획의 경계를 보여 줍니다.

Features

Pure Python, from the front end to the back end.

Pricing

Free to start. Pay when your app grows.

rx.container(
    rx.section(
        rx.heading("Features", as_="h2", size="5"),
        rx.text("Pure Python, from the front end to the back end."),
        size="2",
    ),
    rx.separator(),
    rx.section(
        rx.heading("Pricing", as_="h2", size="5"),
        rx.text("Free to start. Pay when your app grows."),
        size="2",
    ),
    size="2",
    width="100%",
)

공방 노트

rx.section은 <section> 요소. 관련된 내용을 한 구획으로 묶는 의미 컴포넌트다.
size "1"~"3"은 위아래 여백 24·40·64px. 기본은 "2".
좌우 여백은 없으니 padding_x로 따로 준다.
구획마다 rx.heading으로 제목을 단다.
rx.container로 폭을 묶고 그 안을 rx.section으로 나눈다.

← 이전

레이아웃 · Container

레이아웃 · Center

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex