← 목록으로
그림자/엘리베이션 스케일
xs → 2xl 스케일, 다크 모드 적용
그림자 스케일 (Light Mode)
shadow-xs
매우 미세한 그림자
0 1px 2px 0 rgba(0,0,0,0.05)
shadow-sm
작은 그림자 - 카드, 버튼
0 1px 3px 0 rgba(0,0,0,0.1)
shadow-md
중간 그림자 - 드롭다운
0 4px 6px -1px rgba(0,0,0,0.1)
shadow-lg
큰 그림자 - 팝오버
0 10px 15px -3px rgba(0,0,0,0.1)
shadow-xl
매우 큰 그림자 - 모달
0 20px 25px -5px rgba(0,0,0,0.1)
shadow-2xl
극대 그림자 - 주요 모달
0 25px 50px -12px rgba(0,0,0,0.25)
엘리베이션 레이어 시각화
Z-axis 상의 요소 배치 (뒤 → 앞)
Level 2 - Raised Elements
Level 4 - Sticky Elements
사용 사례별 가이드
shadow-sm 또는 shadow-md 권장
shadow-md 또는 shadow-lg 권장
shadow-xl 또는 shadow-2xl 권장
다크 모드 적용
다크 모드에서는 그림자를 더 진하게 적용
shadow-sm (dark)
0 1px 3px 0 rgba(0,0,0,0.3)
shadow-md (dark)
0 4px 6px -1px rgba(0,0,0,0.4)
shadow-lg (dark)
0 10px 15px -3px rgba(0,0,0,0.5)
특수 그림자
Inner Shadow
안쪽 그림자 - 눌린 버튼
inset 0 2px 4px 0 rgba(0,0,0,0.05)
Focus Ring
포커스 링 - 접근성
0 0 0 3px rgba(79,70,229,0.1)
Glow Effect
발광 효과 - 강조
0 0 20px rgba(79,70,229,0.2)
92. 그림자/엘리베이션 스케일
Define shadow/elevation system:
**Shadow Scale**:
**shadow-xs**:
- Use: subtle separation
- Value: 0 1px 2px rgba(0,0,0,0.05)
**shadow-sm**:
- Use: cards at rest
- Value: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
**shadow** (default):
- Use: dropdowns, popovers
- Value: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
**shadow-md**:
- Use: cards on hover
- Value: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)
**shadow-lg**:
- Use: modals, dialogs
- Value: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)
**shadow-xl**:
- Use: floating elements, notifications
- Value: 0 25px 50px -12px rgba(0,0,0,0.25)
**shadow-2xl**:
- Use: highest elevation
- Value: 0 35px 60px -15px rgba(0,0,0,0.3)
**shadow-inner**:
- Use: inset elements, pressed states
- Value: inset 0 2px 4px rgba(0,0,0,0.06)
**shadow-none**:
92번부터 100번까지 전문가 수준의 상세 프롬프트를 작성해드리겠습니다.
---