filter와 backdrop-filter

최근에 작업을 진행하면서 CSS의 backdrop-filter를 사용할 일이 있었습니다. backdrop-filter를 사용하면서 이슈도 있었고 이번 기회에 CSS의 filter와 backdrop-filter 내용을 정리하게 되었습니다.

 

filter? backdrop-filter?

filter와 backdrop-filter는 CSS 속성으로 요소에 그래픽 효과를 적용합니다. filter와 backdrop-filter는 같은 구문을 가지며 많이 사용하는 필터 함수를 살펴보겠습니다.

/* 흐림 처리 */
filter: blur(5px);
/* 밝기 조절 */
filter: brightness(0.4);
/* 색상 대비 조절 */
filter: contrast(200%);
/* shadow 처리 */
filter: drop-shadow(16px 16px 20px blue);
/* 회색조 변환 */
filter: grayscale(50%);
/* 색조 회전 */
filter: hue-rotate(90deg);
/* 색상 반전 */
filter: invert(75%);
/* 투명도 */
filter: opacity(25%);
/* 채도 조절 */
filter: saturate(30%);
/* 세피아 변환 */
filter: sepia(60%);

/* backdrop-filter에서 동일하게 사용 가능 */

 

위의 CSS 속성이 적용된 예시입니다.

 

여러 필터 함수를 동시에 적용하고 싶을 때는 아래와 같이 사용합니다.

/* 다중 값 */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* backdrop-filter에서 동일하게 사용 가능 */

 

filter와 backdrop-filter의 차이점을 예시를 통해 바로 살펴보겠습니다. 하나의 element에는 filter: blur(5px)를 또 다른 element에는 backdrop-filter: blur(5px)를 준 케이스입니다.

filter의 경우 요소 전체에 그래픽 효과가 적용된 것에 비해 backdrop-filter의 경우 background에만 그래픽 효과가 적용되었음을 알 수 있습니다.

 

다만 backdrop-filter의 경우 Safari에서 제한적으로 사용해야 되기 때문에 크로스 브라우징에 유의해야 합니다.

출처: https://caniuse.com/?search=backdrop-filter

 

backdrop-filter 사용 중 issue

opacity가 들어가는 animation을 만들어서 사용중에 parent element와 해당 parent element의 위치로 부터 position absolute를 가지는 child element에 동일하게 backdrop-filter를 적용해야 하는 케이스가 필요했습니다. 

 

구현 결과 second child element에서 backdrop-filter가 제대로 적용이 되지 않았습니다. first parent element의 width를 그대로 가지는 second child element를 만들기 위해 구성했지만 second child element에서 backdrop-filter가 제대로 동작하지 않아 결국 두 element를 감싸는 wrapper element를 만들어 각각 parent element와 second element를 분리하여 적용하니 정상 동작을 하였습니다.

<div class="first-element">
  first
  <div class="second-element">
    second
  </div>
</div>

<!-- wrapper를 통해 각 element 분리 -->

<div class="wrapper">
  <div class="first-element">
    first
  </div>
  <div class="second-element">
    second
  </div>
</div>

 

해당 이슈는 Stack Overflow에서도 찾아볼 수 있었습니다. backdrop-filter는 Backdrop Root를 생성하는데 Backdrop Root의 조상 DOM에서 해당 Backdrop Root에 영향을 주면 안 되기 때문에 parent element와 child element 각각 backdrop-filter 속성을 주어 영향이 가는 동작을 지양해야 합니다.

 

마무리

다양한 CSS의 속성이 계속 추가되면서 화면을 그리는데 더 간결하게 코드를 작성할 수 있게 발전하고 있습니다. CSS에 새롭게 추가되는 속성들을 잘 체크하여 프로젝트에 잘 사용하고 새로 나온 속성인 만큼 크로스 브라우징에 좀 더 신경을 써야 되겠습니다.

---

참고 자료

https://developer.mozilla.org/ko/docs/Web/CSS/filter

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

https://stackoverflow.com/questions/63907743/parent-element-backdrop-filter-does-not-apply-for-its-child

https://drafts.fxtf.org/filter-effects-2/#BackdropRoot