CSS - Box-shadow, Drop-shadow

CSS - Box-shadow, Drop-shadow

개인 프로젝트를 하던 중 내가 보여주려는 콘텐츠에 그림자를 넣어주어 입체감을 주고 그림자를 이용한 효과를 주는 작업을 진행을 하게 됐다.

svg 이미지에 그림자를 넣고 마우스 이벤트를 통해 그림자의 진하기와 색상등의 효과를 넣어주어야 했는데 기존에 알고 있던 box-shadow속성을 사용하여 적용하려고 했지만 이미지에 그림자가 적용되는것이 아닌 이미지를 담고 있는 div 태그에 적용이 되는 문제가 발생했다.

구글링이나 여러 속성을 확인해보면서 svg에 직접적으로 그림자를 주게 된다면 효과를 발생시킬 때마다 svg에서 직접 변경이 이루어지기 때문에 만족스럽지 않은 수정이었고 이후 찾았던 속성이 filter에 있는 drop-shadow였다.

drop-shadow를 사용하여 내가 원하는 그림자 효과를 적용시킨 뒤 이후 box-shadow와 drop-shadow가 어떤 속성인지, 두 개의 차이점은 무엇인지 궁금해졌다.

box-shadow

box-shadow속성은 요소에 하나 이상의 그림자 효과를 추가하는 데 사용되며 요소의 프레임 주변, 내부, 또는 모두에 적용할 수 있다.

box-shadow속성은 5개의 값을 가지고 있다.

1. inset : inset 키워드를 사용하면, box-shadow는 요소의 바깥 테두리에 그림자를 그리는 대신 요소의 내부에 그림자를 그리게 된다. 이것을 내부 그림자라고 부르며, 요소의 내부에 입체감을 더하는 데 주로 사용된다.
2. h-offset: 음수 값을 사용하면 그림자가 왼쪽으로, 양수 값을 사용하면 그림자가 오른쪽으로 이동한다.
3. v-offset : 음수 값을 사용하면 그림자가 위로, 양수 값을 사용하면 그림자가 아래로 이동한다.
4. blur: 그림자의 블러값을 설정한다. 값이 클수록 그림자는 더 흐려지고 크게 확산된다. 양수만 사용할 수 있으며, 값이 없는 경우 그림자의 가장자리는 날카롭게 표시된다.
5. spread: 그림자의 크기를 늘리거나 줄이는 데 사용한다. 양수 값은 그림자 크기를 늘리고, 음수 값은 그림자 크기를 줄인다.
6. color: 그림자의 색상을 지정해준다.

기본 문법

 box-shadow: 10px 5px 5px 0px #333333;

위 스타일을 예시로 들었을 때 box라는 클래스명을 가진 요소를 오른쪽으로 10px 아래로 5px이동된 위치에 그림자의 블러가 5px이고 색상은 #333333의 그림자를 적용한다.

특징

box-shadow는 그림자를 쉼표로 구분하여 여러 개 지정할 수 있다.

이 경우에는 앞에 오는 그림자가 위쪽 계층에 위치하게 된다

box-shadow: inset 3px 3px 5px 0px #333333, -2px -2px 5px 0px #dddddd;

위 코드를 보면 알 수 있듯 box라는 클래스 명을 가지고 있는 요소에 내부 그림자로 오른쪽과 아래쪽으로 3px 5px의 블러를 가지고 있는 그림자를 적용하고 위쪽과 왼쪽으로 2px씩 이동된 위치에 5px의 블러를 #dddddd의 색상으로 적용한다

그림자의 개수는 제한이 없어 그림자를 더 추가하고 싶다면 쉼표를 이용해 그림자를 추가해 주면 된다

drop-shadow

drop-shadow는 CSS filter속성 중 하나로, 요소의 시각적 표현에 그림자 효과를 적용한다.

이는 box-shadow와 비슷하게 작동하지만 몇 가지 중요한 차이점이 존재한다.

drop-shadow는 요소에 적용된 모든 픽셀에 그림자를 적용한다. 예를 들어 투명한 PNG 이미지나 SVG에 그림자를 적용할 때 유용하게 사용된다. 이런 경우에 box-shadow를 사용하면, 그림자는 요소의 전체 경계 상자에 적용되며 이미지 내부의 투명한 부분에는 적용되지 않는다.

또한 drop-shadow는 요소의 변형(transformation)에 따라 변경되므로, 회전하거나 기울이는 등의 변형이 적용된 요소에도 그림자가 올바르게 적용된다.

기본 문법

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

filter속성의 drop-shadow는 아래와 같은 값을 지정할 수 있다

• offset-x 및 offset-y 값은 그림자가 얼마나 멀리 떨어져 있는지를 지정한다.
• blur-radius는 그림자가 얼마나 흐릿하게 보일 지를 지정한다.
• spread-radius는 그림자가 얼마나 넓게 퍼질지를 지정하는데. 이 부분이 drop-shadow와 box-shadow의 주요 차이점 중 하나라고 할 수 있다.
  • box-shadow를 사용하면 그림자의 크기, 위치, 흐림 정도, 색상을 모두 조정할 수 있지만, drop-shadow 필터를 사용하면 그림자의 위치, 흐림 정도, 색상만 조정할 수 있으며 그림자의 크기를 조정하는 것은 불가능하다.
• color는 그림자의 색상을 지정한다.

차이점

그럼 두 기능의 차이는 뭐가 있을까

두 기능의 차이점에 대해 알아본 결과 아래와 같은 내용으로 정리를 할 수 있었다

1. 적용 대상: box-shadow는 요소의 박스 모델에 그림자를 적용하며, 테두리를 포함한 전체 박스에 그림자가 생기게 된다. 반면에 drop-shadow는 filter 속성의 일부로 사용되며, 요소의 모양을 기반으로 그림자를 생성한다. 이는 요소에 클리핑 또는 투명성이 적용된 경우에 특히 중요하며, 그림자가 투명 영역을 무시하고 실제 요소의 모양에 따라 그려지게 된다.
2. 속성 값: box-shadow는 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 확산 반경, 그림자 색상을 지정할 수 있지만 drop-shadow는 그림자의 수평 오프셋, 수직 오프셋, 흐림 반경, 그림자 색상만 지정할 수 있으며 확산 반경을 지정하는 것은 불가능하다.
3. 성능: drop-shadow는 filter 속성의 일부이므로, 다른 CSS 필터와 마찬가지로 렌더링 성능에 영향을 줄 수 있다. 따라서 drop-shadow를 남용하면 페이지의 그래픽 렌더링 성능이 저하될 수 있으며 box-shadow는 일반적으로 성능에 덜 영향을 미치게 된다.
   • 이 부분에 대해서 조금 더 알아보았을 때 drop-shadow는 CPU를 사용해서 스타일이 구성되지만 drop-shadow는 GPU에서 실행이 된다는 부분을 알았다

따라서 요소에 간단한 그림자 효과를 추가하고자 한다면 box-shadow를, 요소의 비정형 모양이나 투명한 부분에 그림자를 추가하려면 drop-shadow를 사용하는 것이 좋은 것으로 생각됐다.

하지만 가장 중요한 부분은 어떤 옵션을 선택하든 그래픽 렌더링 성능을 고려해서 css를 사용해 그려주어야 할 것 같다.