z-index를 한 눈에 보여주는 - DevTools z-index

z-index를 한 눈에 보여주는, DevTools z-index

웹 사이트를 만들다보면, 혹은 유지보수를 하다보면, 수 많은 작업자의 손을 거쳤던 웹사이트의 경우 z-index 속성이 어지럽게 얽혀 있는 경우가 많습니다. 왜냐하면, z-index를 999나 9999처럼 편의에 의해 높게 사용하는 경우가 발생하기 때문입니다.

z-index를 대충 사용해서 결과물을 만드는 것은, 당장에는 당면과제를 쉽게 해결을 할 수 있는 방법이 될 수는 있을지 몰라도, 장기적으로 보면 내 뒤에 오는 미래의 작업자에게는 상당히 불편한 상황을 초래할 수 있는 일이기도 합니다.

웹문서에 적용된 z-index를 한눈에 볼 수 있는 방법이 없을까? 하는 지점이 생기게 마련인데요, 바로 이럴 때 DevTools z-index라는 크롬 익스텐션은 아주 훌륭한 도움을 줄 수 있게 됩니다.

DevTools z-index 크롬익스텐션 설치

DevTools z-index 아래 경로에서 설치할 수 있습니다.

https://chrome.google.com/webstore/detail/devtools-z-index/bcnpmhefiohkpmjacfoanhbjhikegmoe?hl=ko

DevTools z-index

위 경로를 통해 크롬 웹 스토어에 접속을 해보면, 해당 익스텐션(확장 프로그램)에 대한 설명을 살펴 볼 수 있습니다. Youtube 영상만 살펴보더라고 바로 사용방법을 알 수가 있습니다.

[Chorome]에 추가 버튼을 클릭하고 당장 설치를 해줍니다.

DevTools z-index를 설치하고 크롬 개발자모드(F12)를 살펴보면, z-index 라는 탭이 생깁니다. 그러면 현재 브라우저가 살펴보고 있는 웹문서에 사용된 z-index 값들과 어떤 엘리먼트들에 적용이 되어 있는지 확인을 할 수 있습니다.

예상했던대로, z-index를 9999, 8888 하는 식으로 상당히 높은 값들이 적용이 되어 있었습니다.
만약 저 엘리먼트들이 background-image나 background-color 등을 가지고 있는 상태에서, 내가 새로 만든 엘리먼트들이 같은 영역에서 겹쳐지는 포지션을 갖고 있을 때 z-index 값이 낮다면, 뒤로 숨겨져서 화면상에서는 보이지 않게 되겠죠.

크롬 개발자 툴에 z-index 탭메뉴가 생겼습니다.

다른 엘리먼트들을 선택해서 살펴보니, button 등에는 1046번이 사용되고 있습니다. 대략 생각해보기로는 z-index: 11 을 배정 받은 ul.gnb-sub 이후로 사용된 300번대부터 아마도 z-index가 대충 사용된게 아닐까 싶은 생각이 듭니다.

어지럽게 사용된 z-index를 한 눈에 파악하고 대응할 수 있게됩니다.

DevTools z-index 패널을 통해 현재 웹문서에 사용된 z-index들을 살펴보고, 기존에 터무니 없이 높은 값을 배정한 엘리먼트들의 z-index 값을 수정해주고, 내가 새로 만들어 배치하는 엘리먼트에 대해 적절한 값을 부여해주도록 합니다. 그리고 문서를 새로고침 해보면, 이제까지 뒤로 숨겨져서 잘 보이지 않던 것들을 잘 표시해줄 수 있을 것입니다.

z-index 란?

z-index라는 단어에 답이 나와 있는데요, 3차원 좌표계는 x축 , y축, z축으로 이루어져 있잖아요?

x축으로는 width라는 속성이 활용이 되고, y축으로는 height라는 속성이 활용됩니다. 그리고 웹문서내 엘리먼트들이 마치 포토샵의 레이어(Layer)처럼 겹겹이 쌓이게 될 텐데요, 이렇게 쌓이는 축을 z축으로 보면 됩니다.

그렇게 z축에서의 순서(index)를 결정하는 속성이 바로 z-index인 것입니다. 참고로 1번이 가장 아래쪽 레이어에 위치하게 되고, 숫자가 커질수록 윗쪽 레이어에 위치하게 됩니다.

엘리먼트들이 층층이 쌓여 있더라도, 앞쪽에 위치하는 엘리먼트의 배경색이 투명(Transparent, Opacity)한 속성을 가지고 있다면, 뒤에 숨겨진 엘리먼트들이 비쳐 보이게 됩니다.

내가 새로 만든 엘리먼트가 브라우저에서 보이지 않는다면, 정확한 위치(position)에 대한 확인과 z-index에 대한 확인을 한 후 질서를 바로 잡아주는 작업을 통해 제대로 표시되게 만들 수 있게 되는 것입니다.

마치며

아주 간단한 속성이지만, 간혹 골칫거리가 되기도 하는 z-index 속성을 한눈에 보고 파악할 수 없을까? 라는 질문을 던지고 구글링을 해보니, 이미 선대의 개발자들이 이 이슈를 해결하기 위해 DevTools z-index라는 편리한 크롬익스텐션을 만들어 두었더군요.

그 동안은 모르고 있어서 문서 전체를 훑어보는 불편한 방식으로 z-index를 정리해왔는데, 이제는 DevTools z-index 덕분에 아주 간단하고 편리하고 신속하게 z-index 정리 작업을 해결할 수 있었습니다.

만드신 분께, 감사의 마음을 전하며 오늘도 즐거운 코딩생활 되세요~!

즐거운 코딩생활, 즐코딩.
KINcoding.