Navigate webpage layers, z-index, and DOM using the 3D View tool - Microsoft Edge Developer documentation
learn.microsoft.com
- 복잡하게 얽힌 z-index 문제를 보다 쉽게 해결할 수 있습니다.
---
마이크로소프트 Edge 브라우저에서는 3D 뷰로 DOM을 볼 수 있다는 사실, 알고 계셨나요? 보통 Chrome이나 Safari를 많이 쓰다 보니, 이 기능이 있는지 잘 모르고 계시는 분이 많을 것 같습니다.
이 기능이 빛을 발할 때는 바로 복잡하게 얽힌 z-index 문제를 해결하는 상황입니다. 특정 엘리먼트에서 아무리 z-index를 높게 줘도 보이지 않는 경우가 생기곤 하는데요. 어디에서부터 쌓임 맥락(Stacking Context)가 꼬인 건지 풀려면 막막하죠. 이때 DOM을 3D로 회전시키면서 각 요소 간의 구성 관계를 쉽게 파악할 수 있습니다.
저도 자주 쓰진 않지만, 종종 디버깅을 할 때 유용하게 쓰고 있습니다. CSS 3D transform 스타일이 입혀진 엘리먼트도 실제로 회전되는 건가... 궁금해서 실험해봤는데 아쉽게도 평면에 사상된(mapped) 형태로만 나오더라구요. 즉 지금 제공되는 3D 뷰로는 요소 간 z-index 관계만 파악이 가능합니다.
참고로 Edge라고 해서 Mac에서 못 쓰는 거 아니에요! Edge는 Chromium 브라우저라서 Mac OS 용도 제공됩니다.
https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 6월 13일 오후 5:19
첫
... 더 보기이
... 더 보기Cursor와 함께라면, 더이상 에디터는 단순한 입력 도구가 아닌
... 더 보기Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자로" 강의를
... 더 보기