이야기를 시작하기 이전에 나는 프론트엔드를 전혀~ 하지 못 하는 사람이라는 것을 밝히고 시작한다
나는 레이아웃조차 짜지 못하는 똥멍청이 중 개똥멍청이🤎(똥색하트)
하지만 나는 원하는 그리드, 버튼, 인풋창 등을 드래그를 해서 화면을 구성하면 그대로 html 코드를 짜주는 대단한 툴을 사용하고 있따고~~!
화면? 개쌉가넝~
이랬던 나는 Z-INDEX 때문에 상당히 곤욕을 치르게 된다.
발단
가장 먼저 조회된 리스트를 보여주기 위해 그리드부터 만들었는데 잘 나와서 어깨가 정수리만큼 올라갔다.
전개
그 후 값을 수정하기 위해 상세정보를 보여주는 테이블을 만들고 입력창을 readonly 옵션을 통해 수정 가능한 데이터를 구분해주었다.
위기
테이블을 만든 후, 그리드에서 가로축의 스크롤바를 움직일 수 없게 되었다.
절정
한 row의 요소를 클릭해 방향키를 누르면 스크롤바가 움직이는데 스크롤바 클릭조차 되지 않았고,
다급하게 댈님께 헬ㅍ미를 외쳤지만... 댈님도 프론트척척박사가 아니셨다.(척척학사정도는 되시지 않을까? 울 댈님 짱똑똑이시니깐👨🎓)
결말
결국 프론트를 하는 지인들에게 연락을 돌리게되고
그리드를 전부 플렉스로 뒤집으라는 얘기를 들었다
(아 것도 못한다고~~!!)
그 후 다른 지인에게 Z-INDEX에 대해 말을 꺼냈다. 그리드와 테이블에 박힌 Z-INDEX값을 하나하나 수정해주었고 (나는 따라 적기만 했음) 해결가능했다.
난리가 난 이유는 그리드의 Z-INDEX값이 테이블의 Z-INDEX값보다 낮았기 때문에 겹쳐진 레이아웃에 의해 스크롤바를 사용할 수 없었다. 아주 단순한 이유였다.
느낀점
프론트 하는 사람들 개멋있다.
다음부터는 그냥 레이아웃 안 겹치게 짜야지~~🌞🤷♀️🤷♂️
