얼마전에 다음뷰 손가락 버튼이 모바일에서 보이지 않는 문제에 관한 포스팅을 했었던 적이 있습니다^^(다음뷰 버튼이 모바일에서 안보인다면?)
현재는 모바일에서만 보여지는 다음뷰 추천버튼 소스를 알아내서 나름대로 꾸민 다음.. 블로그 포스팅할 때마다 서식으로 추가해서 사용중에 있습니다만..
최근에 이 모바일 다음뷰 버튼에 오류가 있다는걸 발견했답니다 ㅠㅠ 다음뷰 버튼 자체의 문제가 아니라 꾸며주면서 발생한 문제점이었죠..
이 블로그에서 볼수 있는 모바일 다음뷰 추천 버튼입니다..
왼쪽에는 오뚜막 사진,,오른쪽에는 로렌의 사진이..그리고 가운데는 저렇게 모바일 다음뷰 추천 버튼을 두개 달아놓은 상태에서 밑에는 움직이는 손가락 버튼을 첨부해두었었죠^^
나름대로 잘만들었다고 생각하고 뿌듯해했었는데... 황당스럽게도 웹에서 보는 모습과 모바일에서 보는 모습이 다르다는 사실을 최근에야 알았답니다 ㅠㅠ
위에 있는 캡쳐사진은 웹페이지에서 보는 화면인데...보시다시피 멀쩡하게 보이지만..
아이폰으로 본 모바일 페이지에서는 뭔지 모르게 사진과 모바일 버튼과의 간격이 벌어진 모습을 알수 있죠..그런데 아이폰 상에서 가로 보기를 해보면 또 어떻게 달라질까요?
헉...그 간격이 엄청 넓어져 버렸습니다...웹에서 보던 모습과는 너무 다르죠? ㅠㅠ나름대로 신경써서 만들었는데 이런 문제가 발생하다니..뭐가 잘못된걸까요?
최근에는 모바일로 접속하는 사람들이 상당히 많던데...이런 허접하고 조잡스런 모습을 보면...저라도 보기 싫을꺼 같네요~~
모바일 다음뷰 버튼 '테이블'수정하기
그래서 컴퓨터상에서 모바일 페이지로 접속을 해보기로 했습니다...모바일 페이지는 자신의 블로그 주소옆에 /m만 붙이면 로딩이 됩니다^^
ㅎㅎㅎ 모바일 페이지로 들어갔더니 역시나 아이폰에서 보던 장면이 그대로 다시 보여집니다...
저 보기싫은 간격들 좀 보세요 ㅠㅠ예전에 만들때는 웹페이지에서만 만들다보니 모바일 페이지도 똑같을꺼라고 생각했는데... 이렇게 다를줄이야 ㅠㅠ
모바일 페이지를 열어눈 상태에서 구글 크롬 '요소 검사' 활용하기를 이용해서 재수정을 해주면 해결되더라구요~~
구글 크롬 '요소 검사' 활용하기에서 모바일 버튼이 위치한 부분으로 들어가보면 테이블의 가로폭이 지정되어 있지않고 페이지간격 그대로 적용된걸 알수가 있죠..
아마도 사진과 모바일 버튼의 간격이 저렇게 벌어진 원인도 테이블의 가로폭이 지정되어 있지 않았기 때문이었던 것 같네요~~
아무튼 여기서 테이블 간격을 임의로 넣어주면 위 캡쳐화면과 같이 간격이 좁아지고 가운데로 모여지는 모습을 알수 있습니다^^ 아마 처음부터 테이블의 폭을 지정해줬어야 하는것 같습니다~
수정된 테이블 소스를 적용한 모바일 다음뷰 버튼의 모습입니다...앞전에 보였던 빈 간격들이 전혀 보이지 않습니다^^
아이폰 가로화면 보기로 해도 역시 모바일 다음뷰 버튼과 사진들이 제대로 보이는 것을 확인할수 있습니다^^
사실 이렇게 개인적으로 html 소스를 만들고 적용해보는건 처음이어서 비미한 점이 많았던 것 같네요..혹시라도 비슷한 문제가 발생하신다면 참고하시면 좋을것 같습니다~