Dev/UI & UX

가끔씩 컴포넌트를 만들다 보면 overflow 속성을 사용하는 경우가 많다.~overflow:scroll~으로 스크롤이 발생하도록 하거나,~overflow:hidden~으로 숨기거나 하는 등 말이다. 그런데, overflow 속성을 사용하여 자식 요소들을 숨겼지만, 자식의 자식 요소를 다시 화면에 노출시켜야 하는 경우도 있다.이때는 자식 요소를 아무리 화면에 노출시키기 위해 노력해도 잘 나타나지 않는다. 부모 요소의 overflow 속성 무시하는 방법부모 요소에 ~position: relative~ 속성을 넣어 absolute가 동작하도록 하고,~position: absolute~ 속성을 가지는 wrapper를 하나 만든 뒤 그 안에 내가 화면에 노출시키고 싶은 요소를 ~position: fixed~와 ..

프로젝트에서 구현했던 MultiSelect에서 특정 요소를 체크하려고 클릭을 했는데 체크 표시가 되지 않고 MultiSelect가 닫히는 에러가 발생했었다.확인해보니 Focus와 같은 마우스로 발생하는 이벤트 들이 다른 요소로 빼앗기고 있었다. 둘다 expandable이라는 Dropdown 비슷한 요소를 활용한 방식이었는데, z-index가 높아서 빼앗기고 있던 것이었다.심지어 해당 요소는 브라우저에서 보이지 않는 상태였기에, 보이지 않는 요소가 클릭이 되고. Focus를 빼앗아 갈 수 있다는 것이 신기하였다.결국 Dropdown이 닫힌 상태에서는 내부의 요소의 z-index를 조정하는 방식으로 해결하였다.  이 과정에서 Focus를 확인하기 위해 f12 개발자도구에서 현재 포커스 확인하기 (tistor..