개인 프로젝트 진행 중에.. Button 클릭 후에 Modal이 위 화면에 생성되면서 Modal UI 제외 부분은 Blur 처리를 하려고 했다.
코드를 아래와 같이 작성하고나서 저장하니,
띠링?
어떻게 이렇게 되지? 신기해서 다른 스타일 코드를 마구 보며, 원인을 찾기 시작했다.
레이아웃과 요소 배치 방식과 관련된 속성인 position, display에 원인이 있지 않을까? 생각하고 관련 속성 코드들은 // 주석처리를 하며 확인해보았다.
그 결과, position: relative 부분에 원인이 있었다. CSS의 속성들을 별도로 공부하고 React를 했던게 아니었기에 요소의 정확한 개념과 활용 방식을 숙지해야함을 다짐하고 이유를 찾아보았다.
블러 처리된 배경 위에서 position: relative로 설정한 부분들이 블러 처리가 되지 않는 이유는 CSS의 backdrop-filter 속성과 position 속성의 동작 방식과 관련이 있다.
1. backdrop-filter의 동작 원리
- backdrop-filter 속성은 해당 요소의 배경이 아니라, 그 요소 뒤에 있는 콘텐츠에 필터 효과를 적용한다.
- 예를 들어, 모달을 블러 처리할 때, 모달의 배경은 블러 처리되지만, 모달 안에 있는 콘텐츠(예: 버튼, 텍스트)는 블러 처리되지 않는다. 블러 처리의 범위는 모달 뒤에 있는 배경에 한정된다.
2. position: relative와 backdrop-filter
- position: relative 속성은 요소의 위치를 문서의 흐름에 대해 상대적으로 조정한다. 이 속성 자체는 그 요소의 배경을 조정하는 데 직접적으로 영향을 미치지 않는다.
- position: relative로 설정된 요소는 backdrop-filter의 영향을 받지 않는다. 이는 backdrop-filter가 해당 요소의 뒤에 있는 콘텐츠에만 적용되기 때문이다. position: relative로 설정된 요소는 화면에서의 상대적인 위치 조정만 담당하므로, 블러 처리된 배경과는 독립적으로 동작한다.
3. 블러 처리의 범위와 효과
- 블러 처리는 배경에 적용된 효과이므로, 블러 처리된 요소의 배경 뒤에 있는 콘텐츠가 블러 처리된다. 이 배경 뒤에 있는 다른 요소들은 블러 처리가 적용되지 않고, 블러 처리된 요소 위에 위치한 요소들도 블러 처리의 영향을 받지 않는다.
- position: relative로 설정된 요소가 블러 처리된 배경 위에 위치하면, 블러 처리의 효과는 position: relative 속성에 영향을 받지 않고 배경 전체에만 적용된다. position: relative 속성으로 조정된 요소는 블러 처리된 배경 위에 존재하는 요소로서 블러 처리의 영향을 받지 않는다.
position, display 속성 활용을 제대로 하는 그날까지~