PC 최신글 > 모바일 반응형으로 CSS 변경(치킨 보내드릴께요ㅜ)
관련링크
https://goodjobpt.com
180회 연결
본문
안녕하세요
그누보드에 올려주신 자료(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
스타일에
li.m1,li.m2 {width:50%; text-align:center;}
추가 하고
.tab_list li a {text-align:left;}
text-align:center 를 left 로 수정해 보세요
.tab_list li li a 에
display:block;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
box-sizing:border-box
추가해보세요
.tab_list li li a
이부분이 위에 버튼이랑 같이 적용되는것 같네요 ,
클래스를 따로 주면 될것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.