css 작을 하다보면 width를 screen 크기로 고정을 했지만 가로 스크롤이 발생하는 경우가 생긴다.
가로 스크롤이 발생한 이유는 여러가지가 있겠지만 내가 맞닥뜨린 원인은 w-screen인 상황에서 세로 스크롤일 생기면 스크롤의 넓이 때문에 element가 가려지고 가려진 부분을 보여주기 위해서 가로 스크롤이 생기는 것이다.
이 문제를 해결 하기 위해서는 tailwindCSS에
overflow-x-hidden
을 추가해주면 된다.
근데 나같은 경우네느 header가 fixed 속성이 있었는데 그래서
스크롤 위에 header가 올라가버리는 현상이 일어났다. 또 이 문제는 fixed 대신해서
sticky
을 사용하니 문제가 해결되었다. 사실 fixed를 사용했을 때는 아래 element의 top에 padding 또는 margin을 header의 높이만큼 넣어줘야했지만 sticky를 사용하니 따로 높이만큼 padding 이나 margin을 넣어주지 않아도 되어서 더 좋아졌다
