박스 섀도우 가이드
상자 그림자는 조명과 고도를 시뮬레이션하여 UI 요소에 깊이를 추가합니다. 잘 디자인된 그림자는 시각적 계층 구조를 만들고 인터페이스가 더욱 촉각적인 느낌을 갖게 합니다.
수평 오프셋, 수직 오프셋, 흐림, 확산, 색상 및 불투명도를 조정합니다. 캔버스 미리보기는 실시간으로 업데이트됩니다. 만족스러우면 CSS 코드를 복사하세요.
Pro Tips
- 그림자를 미묘하게 유지하세요. 작은 흐림 값으로 시작하세요. 지나치게 큰 그림자는 부자연스러워 보입니다.
- 따뜻한 디자인에는 따뜻한 톤의 그림자(갈색 또는 호박색)를 사용하고, 현대적이거나 기술적인 디자인에는 차가운 톤(푸른색)을 사용하세요.
Frequently Asked Questions
Q: 흐림과 확산의 차이점은 무엇입니까?
흐림과 확산의 차이점은 무엇입니까? 흐림 효과는 그림자 가장자리의 부드러운 정도를 제어합니다. 확산은 그림자가 확장되는 정도를 제어합니다.
Q: 그림자 레이어는 몇 개나 사용해야 합니까?
그림자 레이어는 몇 개나 사용해야 합니까? 보통 1~2겹이면 충분합니다. 내부 깊이에는 삽입 그림자를 사용합니다.
Q: 얼마나 많은 상자 그림자 레이어를 사용해야 합니까?
얼마나 많은 상자 그림자 레이어를 사용해야 합니까? 전문적인 디자인에서는 깊이를 위해 2~4개의 레이어를 사용하는 경우가 많습니다. 작고 촘촘한 그림자로 시작하여 중간 정도의 확산 그림자를 추가하고 선택적으로 큰 주변 그림자를 추가합니다. 이 도구는 무제한 레이어를 지원합니다.
Q: box-shadow가 성능에 어떤 영향을 미치나요?
box-shadow가 성능에 어떤 영향을 미치나요? 몇몇 상자 그림자는 영향을 미미합니다. 흐림이 심한 그림자가 너무 많으면 저가형 장치의 스크롤 성능에 영향을 미칠 수 있습니다. 이 도구는 실시간 미리보기를 표시하므로 복사하기 전에 판단할 수 있습니다.
Q: 내부 그림자를 만들 수 있나요(삽입)?
내부 그림자를 만들 수 있나요(삽입)? 현재 버전은 외부 그림자에 중점을 둡니다. 내부 그림자의 경우 생성된 CSS 상자 그림자 값의 시작 부분에 "inset" 키워드를 수동으로 추가합니다.
한국 전통색·오방색
오방색은 한국 전통 색채 체계로, 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 가지 기본색이 방위와 계절을 상징합니다. 단청과 한복, 오방장두루마기에 사용되며, 현대 디자인에서도 전통미를 살리는 배색으로 활용됩니다.
청색 #3B5BA5동쪽과 봄을 상징하는 오방색의 파랑
적색 #C12127남쪽과 여름을 상징하는 강렬한 빨강
황색 #EAC102중앙과 대지를 상징하는 노랑
백색 #F5F5F5서쪽과 가을을 상징하는 순백
흑색 #17191C북쪽과 겨울을 상징하는 깊은 검정
쪽빛 #0067A3쪽풀로 물들인 전통 남색. 청바지의 원조
연두색 #81C147새싹의 연한 초록. 단청에 자주 쓰임
살구색 #F7CE68살구 열매를 닮은 부드러운 노란빛
자주색 #583B7E고귀함을 상징하는 전통 보라
단청색 #2E8B8B궁궐과 사찰 단청의 청록색
Q: 오방색이란 무엇인가요?
오방색이란 무엇인가요? 오방색은 한국 전통 색채 체계로 청(동)·적(남)·황(중앙)·백(서)·흑(북)의 다섯 색이 방위와 계절을 상징합니다. 단청, 한복, 오방장두루마기에 사용됩니다.
Q: 단청에 쓰이는 색은 무엇인가요?
단청에 쓰이는 색은 무엇인가요? 단청은 궁궐과 사찰의 목조건축을 장식하는 채색 기법으로, 오방색을 기본으로 청록색(#2E8B8B)과 연두색(#81C147) 등을 조화롭게 사용합니다.