박스 섀도 유틸리티
박스 섀도 유틸리티 (Box shadow)
요소에 크기별(작음·중간·큼) 그리고 방향별(위·오른쪽·아래·왼쪽) 섀도를 적용하는 유틸리티 클래스예요. 적용 가능한 섀도 클래스를 정리해 드릴게요.
출처: 문서
본문
예시 (Examples)
작음 (Small)
- Regular, Top, Right, Bottom, Left
중간 (Medium)
- Regular, Top, Right, Bottom, Left
큼 (Large)
- Regular, Top, Right, Bottom, Left
문서 (Documentation)
개요 (Overview)
박스 섀도 유틸리티
사용법 (Usage)
| 클래스 (Class) | 적용 대상 (Applied to) | 결과 (Outcome) |
|---|---|---|
.pf-v6-u-box-shadow-sm |
* | 작은(small) 박스 섀도를 적용해요. |
.pf-v6-u-box-shadow-sm-top |
* | 작은 박스 섀도를 위(top)에 적용해요. |
.pf-v6-u-box-shadow-sm-right |
* | 작은 박스 섀도를 오른쪽(right)에 적용해요. |
.pf-v6-u-box-shadow-sm-bottom |
* | 작은 박스 섀도를 아래(bottom)에 적용해요. |
.pf-v6-u-box-shadow-sm-left |
* | 작은 박스 섀도를 왼쪽(left)에 적용해요. |
.pf-v6-u-box-shadow-md |
* | 중간(medium) 박스 섀도를 적용해요. |
.pf-v6-u-box-shadow-md-top |
* | 중간 박스 섀도를 위에 적용해요. |
.pf-v6-u-box-shadow-md-right |
* | 중간 박스 섀도를 오른쪽에 적용해요. |
.pf-v6-u-box-shadow-md-bottom |
* | 중간 박스 섀도를 아래에 적용해요. |
.pf-v6-u-box-shadow-md-left |
* | 중간 박스 섀도를 왼쪽에 적용해요. |
.pf-v6-u-box-shadow-lg |
* | 큰(large) 박스 섀도를 적용해요. |
.pf-v6-u-box-shadow-lg-top |
* | 큰 박스 섀도를 위에 적용해요. |
.pf-v6-u-box-shadow-lg-right |
* | 큰 박스 섀도를 오른쪽에 적용해요. |
.pf-v6-u-box-shadow-lg-bottom |
* | 큰 박스 섀도를 아래에 적용해요. |
.pf-v6-u-box-shadow-lg-left |
* | 큰 박스 섀도를 왼쪽에 적용해요. |