1. 차이점 요약

속성	box-shadow	filter: drop-shadow
적용 대상	박스 모델(요소의 테두리 기준)	요소의 실제 모양 기준 (투명한 영역 제외)
그림자 위치	요소의 전체 사각형 박스 외부/내부	요소의 모양을 따라 적용됨
투명한 영역	그림자가 전체 박스에 적용됨	요소의 비투명 부분에만 적용됨
성능	비교적 가벼움	필터 적용으로 약간 무거울 수 있음
입력값	오프셋(x, y), 블러, 색상, 인세트 포함	오프셋(x, y), 블러, 색상
사용 예시	버튼, 카드 등 일반적인 UI	로고, 이미지, 투명한 요소의 그림자

---

2. box-shadow란?

• 요소의 박스 모델(테두리)을 기준으로 그림자를 추가하는 속성.
• 그림자가 요소의 전체 크기를 기준으로 적용되며, 투명한 부분도 포함됨.
• 일반적으로 버튼, 카드, 컨테이너의 입체감을 주기 위해 사용됨.

구문

box-shadow: [x-offset] [y-offset] [blur-radius] [spread-radius] [color] [inset];

속성 설명

1. x-offset: X축(가로) 이동 거리 (양수 = 오른쪽, 음수 = 왼쪽)
2. y-offset: Y축(세로) 이동 거리 (양수 = 아래, 음수 = 위)
3. blur-radius: 흐림 정도 (클수록 퍼짐)
4. spread-radius: 그림자 크기 조절 (양수 = 확장, 음수 = 축소)
5. color: 그림자 색상 (rgba 권장)
6. inset: 그림자가 내부로 적용 (선택사항)

---

사용 예시

.box {
    width: 200px;
    height: 100px;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
    /* 오 10px, 아래 10px, 블러 20px, 투명도 30%의 검정색 그림자 */
}

.box {
    width: 200px;
    height: 100px;
    background: #fff;
    box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
		/* 오 10px, 아래 10px, 블러 20px, 투명도 30%의 검정색 내부(inset) 그림자 */
}

.box {
    width: 200px;
    height: 100px;
    background: #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3),
                -5px -5px 10px rgba(0, 0, 0, 0.2);
    /* 쉼표로 구분하여 여러개의 그림자 추가 가능 */
}

---

3. filter: drop-shadow란?

• 요소의 비투명 부분만을 기준으로 그림자를 적용하는 속성
• 즉, 요소의 모양을 따라 그림자가 생김, 투명한 부분에는 그림자가 없음
• 주로 로고, 이미지, SVG 아이콘 등에 사용됨

---

구문

filter: drop-shadow([x-offset] [y-offset] [blur-radius] [color]);

속성 설명

1. x-offset: X축(가로) 이동 거리 (양수 = 오른쪽, 음수 = 왼쪽)
2. y-offset: Y축(세로) 이동 거리 (양수 = 아래, 음수 = 위)
3. blur-radius: 흐림 정도 (클수록 퍼짐)
4. color: 그림자 색상 (rgba 권장)

---

사용 예시

.img-shadow {
    filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.5));
}

• 이미지의 실제 모양을 기준으로 그림자가 생김 (배경 투명 영역 제외)
• PNG나 SVG 같은 투명한 부분을 가진 이미지에 그림자가 적용됨
• 투명한 부분은 제외하고 실선 모양만 따라 그림자가 생김

---

4. 언제 사용해야 할까?

사용 상황	box-shadow 사용	drop-shadow 사용
버튼, 카드 디자인	✅	❌
이미지, 로고, 아이콘	❌	✅
내부 그림자 효과	✅ (inset 사용)	❌
그림자 성능이 중요한 경우	✅	❌ (조금 느릴 수 있음)

---

5. 결론

• box-shadow → 일반적인 박스 요소에 적합, 요소의 전체 크기에 그림자 적용
• drop-shadow → 투명한 부분이 있는 이미지/로고에 적합, 실제 모양 기준 그림자 적용