인문학적 공학도

요즘 한창 사용 중인 styled-component인 stitches는 inline style로 css를 부여할 수 있는 방법이 두 가지 있다. // const Box = styled('div', { ... }) 두 prop은 동일하게 html 태그에 스타일을 부여한다. 그렇다면 두 prop 간에 차이는 없을까? style prop은 DOM 생성 시 태그 내에 inline 스타일로 생성된다. css prop는 CSSOM을 생성한다. css prop이 CSSOM을 생성하는 이유는 정적인 CSS를 잘 관리하기 위함이다. 또한 style prop은 내용을 그대로 inline해버리기 때문에 사전에 정의한 디자인 토큰을 사용할 수 없다. 그러나 css prop을 이용하면 CSSOM으로 변환하는 과정에서 디자인 토..

체크박스를 감싸는 영역(label)의 클릭이 체크박스에 연동되도록 하는 과정에서 심상치 않은 발생했다. 클릭 시 focus-within을 이용해 해당 영역의 backgroundColor가 변경되어 focus되었다는 것을 시각적으로 보여주고자 하였다. 일단 그 때 당시의 상황을 코드로 재현해보았다. 보시다시피 다른 체크박스를 클릭하는 순간 backgroundColor이 깜빡거리는 것을 확인할 수 있다. 원인은 을 감싼 태그가 focus 불가능한 엘리먼트이기 때문이다. 마우스 다운 시 input의 focus가 풀리면서 backgroundColor도 풀리게 되고, 마우스 업을 하면서 input의 focus가 다시 되살아나서 비활성화되었던 focus-within이 활성화되는 것이다. 해결법은 간단하다. 에 ta..