안녕하세요!
오늘은 프로젝트 진행하면서 스타일링 수정을 했는 고생한 부분에 대해 포스팅으로 남겨보려고 합니다..!
바로 보실까요?
초기 화면인데 왼쪽에 나열된 카드들이 footer를 넘어가드라구요 ㅠ (이번 포스팅에서는 카드 안에 내용은 언급하지 않습니다)
파일 구조를 변경하고 많은 시도를 했지만 absolute 효과 때문에 계속 footer를 넘어가드라구요
그렇다고 absolute를 제거하기에는 맵 위에 표현하는 것을 포기할 수 없었습니다 ㅜㅜ
기존에는 button으로 밑에 카드들을 볼 수 있었는데 그 방식 보단 스크롤로 구현하는게 더욱 UX적으로 친숙한 것 같아서 스크롤로 변경하였습니다
그리고 이제 정말 footer에 넘어가지 않게 변경해야되는데 정말 쉽지않았습니다..
하지만! 방법을 찾아 변경을 완료 했습니다!!
기존에
div안에 div안에 나열된 카드들이 있었는데
div를 조금 벗기고 최상위 div에 overflow-scroll을 넣어주고
페이지에 h-screen으로 표현된 코드들을 모두 h-full로 변경해주었습니다
그 뒤 전체를 감싸고 있는 div에 top-[64px] absolute를 적용해주었더니
footer가 넘어가지 않게 수정했습니다...ㅎ
height 값을 직접적으로 주면 창 크기 조절시 깨지는 현상 때문에 height 없이 진행하고 싶었는데 결국 해내서 기분이 너무 좋습니다...ㅎ
하지만 이게 완벽히 된 것이 아닙니다
footer가 첫 화면에 모두 보이는 것이 아닌 스크롤을 내려가 보이는 현상이 발생해서 지도의 크기를 조금 조절해야될 것 같습니다
제가 이게 되나 하면서 코딩을 했기 때문에 설명이 너무 빈약했습니다...
다음에는 꼭 자신있고 자세히 설명할 수 있는 포스팅으로 돌아오겠습니다.......
이 글을 보시고 실망하셨다면 정말 죄송합니다..!!
오늘은 이렇게 급 마무리 하겠습니다...
오늘도 빠이팅이고
행복한 하루도 좋지만 마음이 편안한 하루 되세요!
