[css][sticky] 아니 여백이 안지워진다니까요??

서론: 필자는 프론트엔드 단톡방에 들어가있다 어느날 갑자기 tailwind와 nextJs 사용중에 한분이 여백이 안지워진다는 글을 올리셨다. 나는 당연히 width가 100vw가 아닌거 아니야? 했는데...

결론:

해당 이슈를 단톡방 전원이 고민하면서 padding? gap? border? width? 등 여러 이유를 댔지만 모두 아니었다.

그러나 이 문제를 겪은분이 계셔서 해결해주셨는데 문제는 css에 sticky 라는 속성이 있는데 해당 속성으로 header

를 만들면 가끔 겪는이슈라고 하셨다 정확한 이유는 스티키 계산이 소숫점까지 계산하며 틀어지는 걸로 생기는 이슈라고

하셨다. 그리하여 해당 이슈를 가상 요소인 before로 해결이 가능하다고 말씀해주셨다

 

느낀점:

필자는 sticky header를 잘 사용하지 않아서 몰랐지만 나중에 겪었으면 진짜 어지러웠을 것 같은 이슈다 모두 sticky를 조심하자.