WEB Dev Note

iOS나 macOS의 반투명하고 흐린 효과를 웹에서 구현할 수 있다. 예를 들면 아래와 같은 효과. .element-blur 클래스에 3px의 blur 효과를 주는 CSS는 아래와 같다.@supports (-webkit-backdrop-filter: none) { .element-blur { -webkit-backdrop-filter: blur(3px); } } 이렇게 해두면 .element-blur 클래스가 적용된 객체 뒤로 깔리는 모든 요소가 실시간으로 흐리게 처리된다 (스크롤 할때도 마찬가지). 더불어 -webkit-backdrop-filter 에는 blur(), invert(), grayscale() 효과를 줄 수 있으며, 아래 이미지로 설명한다. 이미지 출처: https://webkit.org/..

모바일 웹킷 기반 브라우저, 즉 아이폰이나 아이패드의 사파리 브라우저에서 유동적(dynamically)으로 생성된 객체에 z-index가 제대로 적용되지 않는 문제가 있다. 이는 애플에서도 알고 있는 공식적인 문제인데 조만간 패치가 나오지 않는 이상 아래와 같은 방법으로 우회하여 해결한다. z-index가 적용된 객체의 CSS에 아래를 추가한다. -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-5px); 설명하자면, z-index는 이차원 공간에서 객체를 정렬하지만, preserve-3d를 적용하고 translateZ() 값을 주면 삼차원 공간에서 객체를 위치시킨다. 따지고보면 같은 말인데 모바일 웹킷에서 삼차원으로 해야 작동하는..