탐색
컴포넌트

미디어

학습용 색조의 원본 그림과 고유 크기를 가진 실제 이미지입니다.

색조가 있는 이미지

tone="neutral"
tone="blue"
tone="violet"

실제 이미지

Sun above layered mountains

Reset the float when the image should return to normal document flow. The image keeps its intrinsic ratio at every width.

Text wraps around the floated image and continues in the remaining inline space.

사용 위치: 반응형 디자인 가이드.

사용법과 인터페이스

src가 없는 DemoMedia는 시트 위에 사이트의 산 그림을 인라인 SVG로 그리며 tone의 currentColor로 색을 지정합니다. src와 alt가 있으면 고유 width와 height를 지정한 사이트의 Image를 렌더링합니다.

<DemoMedia tone="blue" className="w-full h-auto" aria-label="Blue mountain illustration" /><DemoMedia src="/demo/landscape.svg" alt="Sun above layered mountains" width={320} height={200} />

컴포넌트는 레이아웃을 추가하지 않습니다. 크기, 모서리 반경, float는 예제에서 지정합니다.