Foundations
Elevation
높이는 그림자 3단으로만 표현합니다. 콘텐츠 표면은 그림자를 쓰지 않고, 실제로 화면 위에 떠 있는 표면만 높이를 갖습니다.
그림자는 계층을 알리는 신호입니다. 페이지 흐름 안에 놓인 카드와 표에는 그림자를 주지 않고 테두리로 구획합니다. 그림자를 남발하면 어느 표면이 실제로 떠 있는지 읽히지 않습니다.
스케일
shadow-sm
0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow-md
0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
shadow-lg
0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
언제 쓰나
| 표면 | 예 | 처리 |
|---|---|---|
| 떠 있는 chrome | dialog, sheet, popover, dropdown, tooltip | shadow-lg 또는 유리 표면 |
| 일시적 알림 | toast, sonner | shadow-md |
| 고정 요소 | sticky 헤더 | 그림자 대신 아래쪽 헤어라인 |
| 일반 콘텐츠 | card, list, table | 그림자 없이 테두리 |
네이티브
같은 3단을 iOS의 shadow* 4개 속성과 Android의 elevation 레벨로 함께
냅니다. Android는 elevation만으로 그림자를 그리므로 레벨 값이 별도로 필요합니다.