CSS

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

내가 가지는 문제는 이러했다. // 부모 // 자식 A // 자식 a : 점수판 // 자식 B : 채팅 부분 페이지가 위 같은 html 형식으로 구조가 되어있다. 근데 문제점이 있다. 먼저 채팅과 게임 부분의 높이가 맞지 않아서 이쁘지가 않다... aspect-[4/2.2]는 4 : 2.2 비율로 width, height를 했는데 비율을 하나씩 조정을 해서 height를 맞출 수도 없어서 다른 방법을 찾기로 하였다. 먼저 그래서 자식 b의 height를 h-full 로 했더니 이런 식으로 부모의 height 크기만큼 커져버렸다. 이게 만약에 flex-row 였을 경우에는 상관이 없겠지만, 지금은 flex-col이기 때문에 h-full은 사용할 수가 없다. 그래서 여기서 사용할 방법은 calc() 함수를 ..