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

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

QA

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

본문

3553644500_1667886968.7976.png

안녕하세요

 

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

 

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

 

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

 

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

 


 
<?php
if (!defined('_GNUBOARD_')) exit;
// 인기글 추출
// $cache_time 캐시 갱신시간
function latest_popular($bo_table, $rows=10, $subject_len=30, $term='', $options='')
{
    global $g5;
    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;
    }
        $list = array();
     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']);
        $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{    //전체 게시판 출력
       $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 ";
       $sql = " select a.*, count(b.bo_subject) as cnt {$sql_common} {$sql_order} limit 0, {$rows} ";
       $row = sql_fetch($sql);
       
       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'].'&wr_id='.$row2['wr_id'];
            $list[$i]['subject'] = $row2['wr_subject'];
         }
       }
    }
    ob_start();
?>
<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>
<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)."";
            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>
<?
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}
?>

<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;}
.tab_list li a:hover{text-decoration: underline;}
.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}
</style>
<div style="height:150px" class="tab_list m1">
<ul>

<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>
<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>

</ul>
</div>
<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>
<div style='height:6px;'></div>
 

이 질문에 댓글 쓰기 :

답변 4

.tab_list li li a 

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 125,873 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT