이슈
노션 블로그에 검색 기능을 추가하기 위해서 헤더 영역에 있는 검색 버튼을 클릭하면 모달이 생성되어 검색을 할 수 있는 UI 를 생성하려고 하였다.
헤더의 전체적인 구조는 이런 식으로 되어 있고
스타일은 헤더의 배경에
backdrop-filter 를 통해 blur 처리를 해주고, hsla 를 통해서 명도를 100% 로 설정하고 투명도를 조금 낮춰 blur 를 자연스럽게 표현하도록 설정하였다.이 환경에서 Search 컴포넌트 안에 있는 모달의
position 값을 fixed 로 설정하고 width 와 height 값을 100% 로 설정하였는데도 모달의 크기가 적용되지 않는 이슈가 발생하였다.해결 1 (element)
구글링을 해서 찾아보니 상위 항목에
backdrop-filter 속성을 사용하는 상태에서 하위 항목에 position 값을 fixed 나 absolute 로 적용하는 상황인 경우, 하위 항목의 위치 기준이 뷰포트가 아닌 backdrop-filter 를 사용한 상위 항목으로 적용이 되기 때문에 fixed 가 정상적으로 적용되지 않는 문제였다.그래서 나는 원하는 배경 색상을 적용하기 위해 header-bg 라는 div 를 생성한 다음
문제가 되는 배경색을 div.header-bg 에 적용하고
position 과 z-index 를 통해 header 안에 있는 다른 항목들보다 뒤에 배치해 배경색을 설정해 주었다. 이렇게 해주면 Search 컴포넌트의 모달의 상위 항목에 해당하는 header 에 backdrop-filter 항목이 없어지기 때문에 이슈가 해결된다.해결 2 (CSS)
element(div.header-bg) 를 추가하는 것 외에도 CSS 가상 선택자(before, after 등)을 통해 불필요한 element 를 생성하지 않고 해결할 수 있다.
추가 정보
관련 이슈가 발생하는 css 속성들을 정리해 주셔서 함께 보면 좋을 것 같다.
