CSS filter: drop-shadow()와 box-shadow의 핵심 차이점으로 올바른 것은?

어려움 MDN Web Docs

보기 및 정답

A filter: drop-shadow()는 box-shadow와 달리 inset 옵션을 지원하며 요소의 내부와 외부 모두에 그림자를 동시에 적용할 수 있다

B drop-shadow()는 요소의 실제 모양(투명 영역 포함)을 따라 그림자를 생성하고, box-shadow는 사각형 박스 기준으로 그림자를 생성한다

C filter: drop-shadow()와 box-shadow는 완전히 동일한 결과를 만들며 적용 방식만 다를 뿐 시각적 차이가 없다

D box-shadow는 요소의 투명한 영역을 무시하고 전체 박스에 그림자를 적용하지만 drop-shadow()는 박스 형태만 따른다

box-shadow는 요소의 사각형 박스 모델을 기준으로 그림자를 그립니다. 반면 filter: drop-shadow()는 요소의 알파 채널(투명도)을 인식하여 PNG 이미지의 불규칙한 모양이나 CSS 클리핑된 모양을 따라 그림자를 생성합니다.

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

로그인