Shadows

Shadows (그림자)

테마에서 사용되는 그림자 스타일을 이해하는 문서예요.

출처: 문서

본문

컴포넌트에 사용되는 그림자는 6단계 스케일에서 파생돼요. 실제 그림자를 만드는 데 사용되는 값은 소스 코드를 참고해요.

1

2

3

4

5

6

Shadow tokens

그림자 토큰은 CSS 변수로 접근할 수 있어요. 이 토큰들을 사용해 커스텀 컴포넌트를 스타일링하면 테마의 나머지 부분과 일관된 모습을 유지할 수 있어요.

/* Inset shadow */

var(--shadow-1);



/* Shadows for variant="classic" panels, like Card */

var(--shadow-2);

var(--shadow-3);



/* Shadows for smaller overlay panels, like Hover Card and Popover */

var(--shadow-4);

var(--shadow-5);



/* Shadows for larger overlay panels, like Dialog */

var(--shadow-6);

더 알아보기 (Learn more)

• 그림자 토큰은 패널의 크기와 용도(inset, classic, 작은/큰 오버레이)에 따라 단계가 나뉘어요.