테스트 사이트 - 개발 중인 베타 버전입니다

PC 최신글 > 모바일 반응형으로 CSS 변경(치킨 보내드릴께요ㅜ) 채택완료

ksoon 2년 전 조회 4,172

안녕하세요

 

그누보드에 올려주신 자료(https://sir.kr/g5_skin/41651">https://sir.kr/g5_skin/41651)로 조회수랑 추천수 순서로 최신글을 출력하는 스킨을 받았습니다.

 

PC는 고정형이라 너비를 쉽게 수정하였는데, 모바일은 반응형에다 약간 복잡해서 애매하게 끊겨서 나왔습니다.

 

위 그림과 같이 CSS를 반응형으로 깔끔하게 변경하고 싶은데 초보자라 2주동안 계속 해봐도 안되네요...ㅠㅠ

 

도와주시면 원하시는 치킨 브랜드로 기프티콘 보내드리겠습니다. 작은 조언이라도 감사합니다ㅠㅠ

 

</strong></p>

<p> </p>

<p><?php

if (!defined('_GNUBOARD_')) exit;</p>

<p>// 인기글 추출

// $cache_time 캐시 갱신시간

function latest_popular($bo_table, $rows=10, $subject_len=30, $term='', $options='')

{

    global $g5;</p>

<p>    switch($term){

        case '일간': $term_time = date("Y-m-d H:i:s", G5_SERVER_TIME-3600*24); break;

        case '주간': $term_time = date("Y-m-d H:i:s", G5_SERVER_TIME-3600*24*10); break;

        case '월간': $term_time = date("Y-m-d H:i:s", G5_SERVER_TIME-3600*24*30); break;

    }</p>

<p>        $list = array();</p>

<p>     if($bo_table){    //각 게시판 출력

        $sql = " select * from {$g5['board_table']} where bo_table = '{$bo_table}' ";

        $board = sql_fetch($sql);

        $bo_subject = get_text($board['bo_subject']);</p>

<p>        $tmp_write_table = $g5['write_prefix'] . $bo_table; // 게시판 테이블 전체이름

        $sql_between = " wr_datetime between '$term_time' and '".G5_TIME_YMDHIS."' ";

        $sql = " select * from {$tmp_write_table} where wr_is_comment = 0 and {$sql_between} order by {$options} limit 0, {$rows} ";

        $result = sql_query($sql);

        for ($i=0; $row = sql_fetch_array($result); $i++) {

            $list[$i] = get_list($row, $board, $latest_skin_url, $subject_len);

        }

    }else{    //전체 게시판 출력</p>

<p>       $sql_between = " a.bn_datetime between '$term_time' and '".G5_TIME_YMDHIS."' ";

       $sql_common = " from {$g5['board_new_table']} a, {$g5['board_table']} b where a.bo_table = b.bo_table and b.bo_use_search = 1 and a.wr_id = a.wr_parent and {$sql_between} ";

       $sql_order = " order by a.bn_datetime desc ";</p>

<p>       $sql = " select a.*, count(b.bo_subject) as cnt {$sql_common} {$sql_order} limit 0, {$rows} ";

       $row = sql_fetch($sql);

       </p>

<p>       if($row[cnt] > 0){

        $sql = " select a.*, b.bo_subject {$sql_common} {$sql_order} limit 0, {$rows} ";

           $result = sql_query($sql);

    

           for ($i=0; $row = sql_fetch_array($result); $i++){

            $tmp_write_table = $g5['write_prefix'].$row['bo_table'];

            $bo_table = $row['bo_table'];

    

             if($i > 0)

             $sql2 .= " union ";

             $sql2 .= "(select '{$bo_table}' as bo_table, wr_id, wr_subject, wr_hit, wr_good from {$tmp_write_table} where wr_datetime between '{$term_time}' and '".G5_TIME_YMDHIS."') ";

           }

            $sql2 .= " order by ".$options." limit 0, 10";

            $result2 = sql_query($sql2);

    

             for ($i=0; $row2 = sql_fetch_array($result2); $i++){

            $list[$i]['href'] = G5_BBS_URL.'/board.php?bo_table='.$row2['bo_table'].'&amp;wr_id='.$row2['wr_id'];

            $list[$i]['subject'] = $row2['wr_subject'];

         }

       }</p>

<p>    }</p>

<p>    ob_start();

?></p>

<p><style type=text/css>

.lt_full {position:relative;float:left;padding-bottom:10px;width:900px;height:210px;border-bottom:1px solid #e8e8e8;border-right:1px solid #e8e8e8;border-left:1px solid #e8e8e8;margin-left:-8px;}

.lt2 {position:relative;float:left;padding-bottom:10px;width:50%;line-height:25px}

.lt2 ul {margin:0 0 0 0;padding:0;list-style:none}

.lt2 li {padding:0}

</style></p>

<p><div class="lt_full">

<div class="lt2">

    <ul>

    <?php for ($i=0; $i<count($list); $i++) {  ?>

        <li style="padding-left:10px;">

            <?php

            echo "<a href=\"".$list[$i]['href']."\">";

                echo "<img src='".G5_URL."/img/num_1".".jpg'> ";

                echo "".cut_str($list[$i]['subject'], 32)."";</p>

<p>            echo "</a>";

             ?>

        </li>

    <?php

        if (($i+1)%($rows/2)==0) echo "</ul></div><div class='lt2'><ul>";

        }

    ?>

    <?php if (count($list) == 0) { //게시물이 없을 때  ?>

    <li>게시물이 없습니다.</li>

    <?php }  ?>

    </ul>

</div>

</div></p>

<p><?

    $content = ob_get_contents();

    ob_end_clean();</p>

<p>    return $content;

}

?></p>

<p>

<style>

.tab_list ul{position:relative;margin:0;padding:0;border-bottom:1px solid #ccc;font-size:13px;list-style:none;*zoom:1}

.tab_list ul:after{display:block;clear:both;content:""}

.tab_list li{float:left;margin-bottom:-1px}

.tab_list li a{width:450px;float:left;position:relative;border:1px solid #eee;border-bottom-color:#ddd;background:#fafafa;color:#666;text-decoration:none;text-align:center}

.tab_list li a span{display:inline-block;padding:6px 25px 6px 25px;letter-spacing:-1px;cursor:pointer}

.tab_list li ul{display:none;position:absolute;top:40px;left:0;width:100%;margin:0;padding:0;border:0;list-style:none;*zoom:1}

.tab_list li li{float:none;position:relative;margin:0 0 8px 8px;color:#999}

.tab_list li li a{float:none;margin:0;padding:0;border:0 !important;background:transparent;font-weight:normal;color:#000 !important;letter-spacing:normal;}</p>

<p>.tab_list li a:hover{text-decoration: underline;}</p>

<p>.tab_list.m1 .m1 a,

.tab_list.m2 .m2 a,

.tab_list.m3 .m3 a,

.tab_list.m4 .m4 a,

.tab_list.m5 .m5 a {margin-top:-1px;border:1px solid #ddd;border-bottom:1px solid #fff;background:transparent;color:#000}

.tab_list.m1 .m1 a span,

.tab_list.m2 .m2 a span,

.tab_list.m3 .m3 a span,

.tab_list.m4 .m4 a span,

.tab_list.m5 .m5 a span{padding-top:7px;font-weight:bold}

.tab_list.m1 .m1 ul,

.tab_list.m2 .m2 ul,

.tab_list.m3 .m3 ul,

.tab_list.m4 .m4 ul,

.tab_list.m5 .m5 ul{margin-top:-10px;display:block}</p>

<p></style></p>

<p><div style="height:150px" class="tab_list m1">

<ul></p>

<p>

<li class="m1">

<a href="#" onclick="return false" jquery16408452460570924265=1><span style="color:#2C68B0"><font size="4">인기글</font></span></a> 

<ul>

  <li><?php echo latest_popular($bo_table, 10, 35, '주간', 'wr_hit desc'); ?></li>

</ul>

</li></p>

<p><li class="m2">

<a href="#" onclick="return false" jquery16408452460570924265=2><span style="color:#DF4730"><font size="4">공감글</font></span></a> 

<ul>

  <li><?php echo latest_popular($bo_table, 10, 35, '월간', 'wr_good desc'); ?></li>

</ul>

</li></p>

<p>

</ul>

</div></p>

<p><script type="text/javascript">

jQuery(function($){

    var tab = $('.tab_list');

    tab.removeClass('js_off');

    tab.css('height', tab.find('>ul>li>ul:visible').height()+40);

    function onSelectTab(){

        var t = $(this);

        var myClass = t.parent('li').attr('class');

        t.parents('.tab_list:first').attr('class', 'tab_list '+myClass);

        tab.css('height', t.next('ul').height()+40);

    }

    tab.find('>ul>li>a').click(onSelectTab).focus(onSelectTab);

});

</script></p>

<p><div style='height:6px;'></div>

 </p>

<p><strong>

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트
m
2년 전

</p>

<p>스타일에 </p>

<p>li.m1,li.m2 {width:50%; text-align:center;}</p>

<p>추가 하고 </p>

<p>

.tab_list li a {text-align:left;}</p>

<p>text-align:center 를 left 로 수정해 보세요</p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

m
2년 전
.tab_list li li a 

이부분이 위에 버튼이랑 같이 적용되는것 같네요 ,

클래스를 따로 주면 될것 같습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

k
ksoon
2년 전
답변 감사합니다. 한번 변경해보겠습니다.
k
ksoon
2년 전
와 마이존님 덕분에 원하는대로 완성되었습니다. 쪽지로 원하시는 치키브랜드 보내주세요! 사례하겠습니다ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

ksoon
2년 전

https://sir.kr/bbs/profile.php?mb_id=cncafe" onclick="return false;" rel="nofollow" target="_blank" title="myzone 자기소개">myzone님 답변 감사합니다ㅠ 추천수 클릭 칸이 내려가고 이렇게 나오고 있습니다.

 

https://goodjobpt.com/?device=mobile

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

m
2년 전
.tab_list li li a 에 

display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
box-sizing:border-box

추가해보세요 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인