지금 현재 빌런의 모바일은 정말 빌런 다운 버그가 일어나 있는 상황입니다.
무슨 버그냐구요?
모바일에서는 2번째에 있는 게시글이 앞 게시글을 잡아먹는 버그가 있습니다.
이렇게 보이던 게시글이 해상도를 줄이면?
이런식으로 잡아먹히는 문제이죠.
콘솔을 통해 보면 앞 게시글의 가로 사이즈 354px이하로 내려가자마자 뒷 게시글로 크기가 이동되는 것이 보이지요?
왜 이런 문제가 생기느냐..
바로 이 div를 합치는 구간 때문에 발생됩니다.
반응형 웹 페이지는 별도로 모바일 웹버전인 (m.villain.city) 이런식으로 들어가지 않아도 똑같은 URL을 통해 모바일과 데스크탑을 함께 사용 할 수 있도록 만들어진 웹 페이지를 반응형 웹페이지라고 합니다.
반응형 웹페이지의 장점은 모바일 웹으로 구성하면 2개의 웹소스를 운용하거나, 2개의 웹페이지를 별도로 제작해야 한다는 단점이 있던 것을 하나로 관리할 수 있다는 장점이 있습니다.
대신에 두 개로 나눠서 관리하던 것을 하나로 관리해야 하는 점에서 class 같은 지정을 제대로 운용해야 합니다.
근데 빌런은 그 운용을 제대로 하지 못하여 모바일로 접속시 제대로 된 페이지 표기가 되지 않았던 것이죠.
모바일로 보면 게시글은 1열로 표기 되어야 하는데
기본 값이 2열로 설정되어 있어 1칸으로 바뀌었지만 없는 1칸을 또 만들어서 2열로 만들다보니
기존에 있던 좌측의 div 칸을 집어 먹어버리는 문제가 발생해버린 것이죠.
이 문제가 되는 col-span-2와 row-span-2 를 지워버리면?
이랬던 게시글 상태가
이렇게 숨겨졌던 게시글이 표현되면서 정상적으로 변경되는 것을 확인할 수 있었습니다.
row-span-2와 col-span-2가 어디서 반환되는지 찾아보려 했는데.. 애초에 carouselMain.js를 통해 값이 반환되는 것으로 보이더군요.
api로 어떻게 반환되는지는 모르겠습니다만..
main.html을 이용해서 반환되는 것을 봤습니다.
근데 main.html인데 게시글을 끌어오는 html 소스이면
조각 형태로 해야 하는데
전체코드 형태로 해두셨더라구요..? (왜죠?)
아무튼 api 통신을 통해서 값을 가져온 것을 처리하는 것이라 제가 그 이상의 추적은 어렵게 되었..
근데 여기서 모바일만 해결 되느냐?
아뇨.
기존에 데스크탑 메인페이지에서 한 줄에 2개의 게시글이 들어가던 문제도
이렇게 해결됩니다.
즉, 이 메인 페이지의 악의 근원은 row-span-2와 col-span-2의 return의 문제였답니다~
자, 개발이사님. 일하실 시간입니다.
0 / 0
