리스트 테이블을 모바일 및 반응형 PC 테이블로 만들기 정보
리스트 테이블을 모바일 및 반응형 PC 테이블로 만들기본문
모바일 스킨을 기준으로 한 반응형 테마를 쓰다보니 사항이 많은 리스트 테이블이 늘 문제더군요.
그래서 여러모로 생각하다보니 해결방법을 찾게 되었는데, 그것을 여러분께도 알려드리고자 합니다.
비록 제가 php고 뭔 프로그래밍을 모르는 사람이긴 하지만, 여기서 배운 몇가지 잔기술을 활용한 것입니다.
모바일 스킨을 반응형 테마로 쓸 경우,
모바일 스크린이 1080*1920일지라도 모바일 웹의 가로크기는 412px에 불과합니다.
따라서 모바일 웹에 최적화된 웹페이지는 PC에서는 여백이 넘쳐나는 등 부족하고,
PC 웹에 최적화된 웹페이지는 모바일웹에서는 과도하게 넘쳐날수밖에 없는 문제가 있습니다.
이 문제를 해결하는 기술이 모바일 스킨과 웹 스킨으로 분리하고 CSS를 통해 해결하는 것입니다만,
모바일 스킨을 기준으로 작업된 대다수의 반응형 테마는, 리스트 테이블이 아래 그림처럼 여러 사항을 표시하는 장부일 경우에는 처리가 곤란합니다.
이 경우, list.skin.php의 테이블 부분만 따로 떼어내어
(board/basic/list.skin.php의 경우 101-174줄)
list.skin.table.mobile.php와
list.skin.table.pc.php와 같은 이름으로
따로 저장하고 모바일과 pc에 맞게 데이블이 표시되도록 편집합니다.
그리고 원래 테이블이 있던 곳에는 아래와 같이 변경하면, 모바일에서는 모바일웹에 맞게, pc에서는 pc웹에 맞는 반응형으로 잘 작동합니다.
<!--// 101-174줄 삭제하고 101-117로 대체, list table-->
<style>
#web {display: block;}
#mobile {display: none;}
@media screen and (max-width: 816px) { //pc웹의 가로폭에 때한 max-width 값은 테이블의 성격과 형식에 맞춰 적당한 값을 준다
#web {display: none;}
#mobile {display: block;}
}
</style>
<div id="mobile">
<?php include("list.skin.table.mobile.php"); //모바일용 테이블을 불러들임; ?>
</div>
<div id="web">
<?php include("list.skin.table.pc.php"); //pc용 테이블을 불러들임; ?>
</div>
!-->
추천
6
6
댓글 6개
유용한 팁이네요 감사합니다.
모바일용, PC용 테이블을 따로 만들고
미리 불러놓은 후 상황에 맞게 none; 또는 block;
고생하셨습니다~
미리 불러놓은 후 상황에 맞게 none; 또는 block;
고생하셨습니다~
정말 좋은 팁이네요. 활용해 보겠습니다.^^
추천합니다
좋은 팁. 감사합니다~~~
한번 사용해보겠습니다~~^^*
한번 사용해보겠습니다~~^^*
모바일 반응형 테이블 굿팁입니다