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

HTML 요소

HTML Media

rx.el.arearx.el.audiorx.el.canvasrx.el.embedrx.el.iframerx.el.imgrx.el.mathrx.el.metarx.el.objectrx.el.picturerx.el.sourcerx.el.trackrx.el.video

공식 문서

공방 주문서

상품 상세 화면: 큰 사진(좁은 화면에서는 정사각형 사진), 사용 영상, 미리 듣기 소리를 HTML 미디어 요소로만 넣어 주세요.

그림, 영상, 소리, 다른 문서를 페이지에 넣는 HTML 요소들입니다. img·video·audio가 가장 흔하고, picture·source로 화면에 맞는 파일을 고르며, iframe·embed·object로 다른 문서를 끼워 넣습니다. Reflex의 rx.image, rx.video, rx.audio보다 단순하며, 브라우저 기본 기능을 그대로 씁니다.

rx.el.img(src="https://picsum.photos/id/1025/300/200", alt="A dog in a blanket", width="300px", height="200px")

속성 바꿔 보기

img는 크기를 상자에 맞추는 방법(object_fit)과 CSS 필터를, video는 조작 막대(controls)와 반복·음소거를 바꿔 봅니다.

A city street — object_fit: cover는 잘라서 채우고, contain은 전체가 보이게 줄이며, fill은 비율을 무시하고 늘립니다.

속성 바꿔 보기

controls

loop

muted

width

rx.el.video(
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
    poster="https://picsum.photos/id/152/320/180",
    controls=True,
    loop=False,
    muted=True,
    plays_inline=True,
    width="280px",
)

controls를 끄면 재생 막대가 사라집니다. poster는 재생 전에 보이는 그림입니다.

속성	값	기본값	쓰임
`src` `alt` (img)	URL / 문자열	없음	그림 주소와 대체 글. `alt`는 꼭 쓴다
`src_set` `sizes` (img, source)	후보 목록	없음	화면 밀도·폭에 맞는 파일 고르기
`loading` (img, iframe)	`"lazy"` `"eager"`	`"eager"`	화면에 가까워질 때 불러오기
`decoding` (img)	`"async"` `"sync"` `"auto"`	`"auto"`	그림을 푸는 시점
`controls` `loop` `muted` `auto_play` (video, audio)	`True` / `False`	`False`	조작 막대, 반복, 음소거, 자동 재생
`poster` `plays_inline` (video)	URL / bool	없음	재생 전 그림, 모바일에서 전체 화면 없이 재생
`preload` (video, audio)	`"none"` `"metadata"` `"auto"`	브라우저마다	미리 받아 둘 양
`media` `type` (source)	미디어 쿼리 / MIME	없음	조건과 파일 형식
`kind` `src_lang` `label` `default` (track)	문자열·bool	없음	자막 파일
`src_doc` `sandbox` `allow` (iframe)	HTML / 권한 목록	없음	끼워 넣을 문서와 제한
`shape` `coords` `href` (area)	`"rect"` `"circle"` `"poly"` …	없음	그림 지도의 누르는 영역

img: 대체 글과 해상도 후보

alt는 그림을 못 불러올 때 대신 보이고, 화면 읽기 프로그램이 읽는 글입니다. 오른쪽 그림은 일부러 이 사이트에 없는 주소라 alt가 보입니다. src_set에 1x·2x 후보를 주면 고해상도 화면에서 더 큰 파일을 고릅니다. loading="lazy"는 화면 가까이 올 때까지 불러오기를 미룹니다.

rx.el.div(
    rx.el.img(
        src="https://picsum.photos/id/1025/150/100",
        src_set="https://picsum.photos/id/1025/150/100 1x, https://picsum.photos/id/1025/300/200 2x",
        alt="Sharp on high density screens",
        loading="lazy",
        decoding="async",
    ),
    rx.el.img(src="/no-such-image.png", alt="Broken image: the alt text shows"),
    display="flex",
    gap="12px",
    align_items="center",
)

picture와 source: 화면에 맞는 그림

picture 안의 source를 위에서부터 보고, media 조건이 맞는 첫 파일을 씁니다. 맞는 것이 없으면 마지막 img를 씁니다. 창 폭을 640px보다 좁히면 정사각형 사진으로 바뀝니다.

rx.el.picture(
    rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/1015/300/300"),
    rx.el.img(src="https://picsum.photos/id/1016/480/200", alt="A landscape", max_width="100%"),
)

video, audio, source, track

src를 바로 줘도 되고, 형식이 다른 파일 여러 개를 source 자식으로 줘도 됩니다. 브라우저는 재생할 수 있는 첫 source를 고릅니다. source 뒤의 글은 영상을 재생하지 못하는 브라우저에서만 보입니다. 자동 재생(auto_play)은 대부분의 브라우저에서 muted일 때만 허용됩니다.

rx.el.div(
    rx.el.video(
        rx.el.source(src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", type="video/mp4"),
        "Your browser cannot play this video.",
        controls=True,
        muted=True,
        preload="metadata",
        width="280px",
    ),
    rx.el.audio(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
        controls=True,
        preload="none",
    ),
    display="flex",
    flex_direction="column",
    gap="12px",
)

track은 WebVTT(.vtt) 자막 파일을 붙입니다. 같은 사이트의 자막 파일이 있어야 해서 여기서는 코드로만 보입니다. 파일은 assets 폴더에 둡니다.

rx.el.video(
    rx.el.source(src="/flower.mp4", type="video/mp4"),
    rx.el.track(src="/flower.en.vtt", kind="subtitles", src_lang="en", label="English", default=True),
    controls=True,
)

iframe: 페이지 안의 페이지

src에 다른 페이지 주소를 주거나, src_doc에 HTML을 직접 줍니다. sandbox=""는 끼운 문서의 스크립트·폼·팝업을 모두 막고, 필요한 것만 "allow-scripts"처럼 풀어 줍니다. title은 화면 읽기 프로그램에게 무엇이 들어 있는지 알려 줍니다. 다른 사이트는 끼워 넣기를 막아 둔 곳이 많습니다.

rx.el.iframe(
    src_doc="<h3 style='font-family:sans-serif'>Hello from an iframe</h3><p style='font-family:sans-serif'>This page lives in src_doc.</p>",
    sandbox="",
    loading="lazy",
    title="Inline document",
    width="320px",
    height="130px",
    border="1px solid gray",
    border_radius="6px",
)

embed와 object

둘 다 외부 자원을 넣는 오래된 방법입니다. embed는 src와 type만 받고, object는 data로 받으며 불러오지 못하면 자식을 대신 보입니다. 지금은 그림은 img, 영상은 video, 문서는 iframe을 쓰는 편이 낫습니다.

rx.el.div(
    rx.el.embed(src="https://picsum.photos/id/237/160/110", type="image/jpeg", width="160px", height="110px"),
    rx.el.object(
        "Fallback text if the data cannot load",
        data="https://picsum.photos/id/40/160/110",
        type="image/jpeg",
        width="160px",
        height="110px",
    ),
    display="flex",
    gap="12px",
)

canvas: 그림판

canvas는 빈 그림판이고, 그리는 일은 자바스크립트가 합니다. 아래는 on_mount에서 rx.call_script로 사각형과 원을 그립니다. canvas의 width·height는 CSS 크기가 아니라 그림판의 픽셀 수라서, Reflex에서는 custom_attrs로 넘깁니다(키워드로 주면 CSS가 됩니다).

rx.el.canvas(
    id="htmlmedia_canvas",
    custom_attrs={"width": "260", "height": "100"},
    border="1px solid gray",
    border_radius="6px",
    on_mount=rx.call_script(
        "const g = document.getElementById('htmlmedia_canvas').getContext('2d');"
        " g.fillStyle = '#6e56cf'; g.fillRect(20, 20, 120, 60);"
        " g.fillStyle = '#e54d2e'; g.beginPath(); g.arc(200, 50, 30, 0, Math.PI * 2); g.fill();"
    ),
)

area: 그림 지도

map 안의 area가 그림 위의 누르는 영역입니다. img의 use_map에 "#지도이름"을 적어 연결합니다. 사진의 왼쪽 절반과 오른쪽 원이 각각 다른 문서로 이어집니다.

rx.el.div(
    rx.el.map(
        rx.el.area(shape="rect", coords="0,0,150,200", href="https://reflex.dev/docs/library/", target="_blank", alt="Library docs"),
        rx.el.area(shape="circle", coords="225,100,60", href="https://reflex.dev/docs/library/html/media/", target="_blank", alt="Media docs"),
        name="htmlmedia-map",
    ),
    rx.el.img(src="https://picsum.photos/id/1060/300/200", alt="Image map", use_map="#htmlmedia-map", width="300px", height="200px"),
)

math와 meta

rx.el.math는 수식(MathML)을 담는 상자인데, 안에 넣을 mi·mo·msup 같은 태그는 rx.el에 없습니다. 수식은 rx.html로 MathML을 통째로 넣는 편이 쉽습니다. meta는 문서 머리의 정보입니다. React 19가 본문의 meta를 머리로 끌어올리므로 페이지에 그리지 않고, 보통은 @rx.page의 meta 인자로 줍니다.

a^{2} + b^{2} = c^{2}

rx.html("<math display='block'><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></math>")

rx.el.math(...)   # MathML box; rx.el has no mi/mo/mn tags to put inside it
rx.el.meta(name="description", content="A page about media")   # for the document head

@rx.page(title="Media", description="A page about media", meta=[{"name": "theme-color", "content": "#6e56cf"}])
def media_page(): ...

주문서 완성

사진은 picture로 화면에 맞추고, 영상은 poster와 preload="none"으로 누를 때까지 받지 않으며, 소리는 audio의 기본 막대를 씁니다.

See it in action

Sound preview

rx.el.div(
    rx.el.picture(
        rx.el.source(media="(max-width: 640px)", src_set="https://picsum.photos/id/26/320/320"),
        rx.el.img(src="https://picsum.photos/id/26/440/240", alt="Travel kit on a table", border_radius="8px", max_width="100%"),
    ),
    rx.el.p("See it in action", font_weight="600", margin_top="8px"),
    rx.el.video(
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
        poster="https://picsum.photos/id/26/440/248",
        controls=True,
        muted=True,
        plays_inline=True,
        preload="none",
        width="100%",
    ),
    rx.el.p("Sound preview", font_weight="600", margin_top="8px"),
    rx.el.audio(src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", controls=True, preload="none"),
    max_width="440px",
)

공방 노트

img에는 alt를 꼭. src_set·loading="lazy"로 알맞은 파일을 늦게 받는다.
picture + source(media)로 화면에 따라 다른 그림, 마지막에 img.
video·audio는 controls로 막대를, 자동 재생은 muted와 함께. 자막은 track.
iframe은 src나 src_doc, sandbox로 제한. embed·object는 오래된 방법.
canvas 크기는 custom_attrs로, 그리기는 자바스크립트. meta는 @rx.page(meta=...)로.

← 이전

HTML 요소 · HTML Forms

HTML 요소 · HTML Tables

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex