📐 Edge에서는 3D 뷰로 DOM을 관찰할 수 있습니다

- 복잡하게 얽힌 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/

Navigate webpage layers, z-index, and DOM using the 3D View tool - Microsoft Edge Developer documentation

learn.microsoft.com

Navigate webpage layers, z-index, and DOM using the 3D View tool - Microsoft Edge Developer documentation

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2024년 6월 13일 오후 5:19

댓글 0

    함께 읽은 게시물

    📰 OpenAI가 ChatGPT의 커넥터 기능을 업데이트하면서 MCP 지원을 추가했네요.

    ... 더 보기

    🪄 플레이모어와 함께할 동료를 찾습니다

    ... 더 보기

    플레이모어와 함께할 동료를 찾습니다 | Notion

    playmoreai on Notion

    플레이모어와 함께할 동료를 찾습니다 | Notion

     • 

    저장 7 • 조회 3,373



    혹시 Cursor 채팅만 사용하시나요? Agent 쓰는 방법!

    Cursor와 함께라면, 더이상 에디터는 단순한 입력 도구가 아닌

    ... 더 보기

    Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자로" 강의를

    ... 더 보기

    Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

    www.productengineer.info

    Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

    진짜 노동의 생산성이 높아질수록 가짜 노동이 늘어나는 이유

    “왜 우리는 일은 잘했는데 더 바빠졌을까?”

    ... 더 보기

    조회 219