모바일 스킨을 기준으로 한 반응형 테마를 쓰다보니 사항이 많은 리스트 테이블이 늘 문제더군요.

그래서 여러모로 생각하다보니 해결방법을 찾게 되었는데, 그것을 여러분께도 알려드리고자 합니다.

비록 제가 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>