연혁게시판 스킨 질문입니다.
본문
https://sir.kr/g5_skin/16421?sfl=wr_subject%7C%7Cwr_content&stx=%EC%97%B0%ED%98%81
위 스킨을 사용중입니다~~
아래는 모바일에서 캡쳐한 사진인데요
이렇게 가로로 길어지게 되면 아예 저 연도가 뭉탱이로 저렇게 아래로 내려와버리더라구요 (2002년)
그러지말고
저렇게 길어지면 그 부분만 두줄로 되는 건 어떻게 해야하나요?
일단 style.css 파일은
ul,ol,li{list-style:none}
.mt5{margin-top:5px}
.mt10{margin-top:10px}
.mt15{margin-top:15px}
.mt20{margin-top:20px}
.mt25{margin-top:25px}
.mt30{margin-top:30px}
.mt35{margin-top:35px}
.mt40{margin-top:40px}
.mt45{margin-top:45px}
.mt50{margin-top:50px}
.mt55{margin-top:10px}
.mt60{margin-top:60px}
.p_box{width:100%;overflow:hidden}
.sub_txt{margin-top:10px;padding-top:35px;border-top:1px solid #e7e7e7;letter-spacing:-0.5px}
.history_div p{padding:0;}
.history_div{background:url('../img/history_line.gif') repeat-y 60px 0}
.history_img{width:80px;position:relative;float:left;margin-right:26px;padding-left:8px;text-align:center;min-height:35px;}
.history_img .year_body {width:80px;height:37px;background:#999 url('../img/bg_pattern.png') repeat;
-webkit-border-top-left-radius: 20px;
-moz-border-top-left-radius: 20px;
border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.history_img .year_body.first {background-color:#c11717;}
.history_img span{position:absolute;top:0px;left:16px;right:0;display:block;text-align:center;color:#fff;font-size:22px;font-family:"NanumGothicBold"}
.history_txt{float:left;margin-top:20px}
.history_txt .tit{position:relative;font-size:30px;color:#444;padding-top:1px}
.history_txt .tit .bar{position:absolute;top:0;left:0;width:15px;height:1px;background:#555}
.history_txt p{font-size:13px;color:#888;line-height:18px;text-align:justify;}
.history_icon{width:130px;float:right;}
.history_icon {height:80px;overflow:hidden;border-bottom:1px solid #e7e7e7}
.history_icon img{width:100%;height:auto;}
.history_icon strong{color:#e13137}
.history_icon .tit{margin-top:2px;font-size:10px;color:#888}
.history_img,
.history_icon,
.history_txt {opacity:0}
/* 게시판 목록 */
#bo_cate {border-bottom: 1px solid #e7e7e7;position:relative;margin-top:-33px;}
#bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_cate ul {margin-bottom:27px;width:710px;zoom:1;}
#bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_cate li {float:left;margin-bottom:-1px}
#bo_cate a {display:block;font-size:16px;position:relative;padding:0 2em 0 3px;color:#888;
font-family:"ProximaNovaWeb", "NanumGothic"}
#bo_cate #bo_cate_on {z-index:2;color:#e13137;}
.td_subject img {margin-left:3px}
/* 게시판 목록 공통 */
.bo_fx {margin-bottom:5px;padding:5px 10px}
.bo_fx:after {display:block;visibility:hidden;clear:both;content:""}
.bo_fx ul {margin:0;padding:0;list-style:none;text-align:right}
#bo_list_total {float:left;padding:0;height:2.5em;line-height:2.5em}
.btn_bo_user {float:right;margin:0;padding:0;list-style:none}
.btn_bo_user li {float:left;margin-left:5px}
.btn_bo_adm {float:left}
.btn_bo_adm li {float:left;margin-right:5px;vertical-align:top;}
.btn_bo_adm li a{padding:8px;border:0;background:#eee;color:#777;text-decoration:none;vertical-align:middle;display:inline-block}
.btn_bo_adm input {padding:8px;border:0;background:#000;color:#fff;text-decoration:none;vertical-align:middle}
.bo_notice td {background:#f7f7f7}
.bo_notice td a {font-weight:bold}
.td_num strong {color:#000}
a.bo_cate_link {color: #fff;background: #333;font-size: 0.92em;padding: 3px 5px;display: inline-block;}
.bo_current {color:#e8180c}
.td_subject img {margin-left:3px}
#bo_list .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}
#bo_list {padding:20px}
#bo_sch {margin-bottom:10px;padding-top:5px;text-align:center}
#bo_sch select{height:30px;}
#bo_sch .btn_sch{height:30px;border:0;background:#444;color:#fff;padding:0 5px}
/*
.btn_bo_adm input {padding:0 10px;height:25px;border:1px solid #e8180c !important;background:#e8180c;color:#fff;text-decoration:none;vertical-align:middle;cursor:pointer}
*/
.bo_notice td {background:#f5f6fa}
.bo_notice td a {font-weight:bold}
.td_num strong {color:#000}
.bo_cate_link {display:inline-block;margin:0 3px 0 0;padding:0 6px 0 0;border-right:1px solid #e7f1ed;color:#999 !important;font-weight:bold;text-decoration:none} /* 글제목줄 분류스타일 */
.bo_current {color:#e8180c}
.cnt_cmt {font-weight:bold}
#bo_sch {margin-bottom:10px;padding-top:5px;text-align:center}
#bo_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
/* 게시판 쓰기 */
#wrapper_title {margin-bottom:20px;font-size:1.4em;letter-spacing:-1px;font-family: 'Arial', 'Malgun gothic', sans-serif;}
#autosave_wrapper {position:relative}
#autosave_pop {display:none;z-index:10;position:absolute;top:24px;right:117px;padding:8px;width:350px;height:auto !important;height:180px;max-height:180px;border:1px solid #565656;background:#fff;overflow-y:scroll}
html.no-overflowscrolling #autosave_pop {height:auto;max-height:10000px !important} /* overflow 미지원 기기 대응 */
#autosave_pop strong {position:absolute;font-size:0;line-height:0;overflow:hidden}
#autosave_pop div {text-align:right}
#autosave_pop button {margin:0;padding:0;border:0;background:transparent}
#autosave_pop ul {margin:10px 0;padding:0;border-top:1px solid #e9e9e9;list-style:none}
#autosave_pop li {padding:8px 5px;border-bottom:1px solid #e9e9e9;zoom:1}
#autosave_pop li:after {display:block;visibility:hidden;clear:both;content:""}
#autosave_pop a {display:block;float:left}
#autosave_pop span {display:block;float:right}
.autosave_close {cursor:pointer}
.autosave_content {display:none}
.btn_confirm p {padding-bottom:10px}
.frm_tbl td.td_not_input {padding:13px 10px;}
.frm_tbl td [type="checkbox"] {margin-right:3px;}
.frm_tbl td input[name="secret"] {margin-left:10px;}
.btn_confirm p {padding-bottom:10px !important}
/* 게시판 댓글 */
#bo_vc {padding:20px 20px 10px;border-top:1px solid #cfded8;border-bottom:1px solid #cfded8;background:#f5f6fa}
#bo_vc h2 {margin-bottom:10px}
#bo_vc article {padding:0 0 10px;border-top:1px dotted #ccc}
#bo_vc header {position:relative;padding:15px 0 5px}
#bo_vc header .icon_reply {position:absolute;top:15px;left:-20px}
#bo_vc .sv_wrap {margin-right:15px}
#bo_vc .member, #bo_vc .guest, #bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {display:inline-block;margin:0 15px 0 5px}
#bo_vc h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc a {color:#000;text-decoration:none}
#bo_vc p {padding:0 0 5px;line-height:1.8em}
#bo_vc p a {text-decoration:underline}
#bo_vc_empty {margin:0;padding:20px !important;text-align:center}
#bo_vc fieldset {margin:0 0 10px;padding:0}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc footer {zoom:1}
#bo_vc footer:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_act {float:right;margin:0;list-style:none;zoom:1}
.bo_vc_act:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_act li {float:left;margin-left:5px;letter-spacing:-1px}
#bo_vc_w {position:relative;margin:0 0 10px;padding:0 0 20px;border-bottom:1px solid #cfded8}
#bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_vc_w #char_cnt {display:block;margin:0 0 5px}
#bo_vc_sns {margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 20px 0 0}
#bo_vc_sns input {margin:0 0 0 5px}
#bo_vc form {padding:0}
이러하구요!
list skin .php 파일은
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
include_once $board_skin_path."/board_head.skin.php";
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/css/style.css">', 20);
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/css/lightbox.css">', 21);
?>
<div class="sub_con widthfix">
<div class="history_div mt55">
<form name="fboardlist" id="fboardlist" action="./board_list_update.php" onsubmit="return fboardlist_submit(this);" method="post">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="sfl" value="<?php echo $sfl ?>">
<input type="hidden" name="stx" value="<?php echo $stx ?>">
<input type="hidden" name="spt" value="<?php echo $spt ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="sw" value="">
<!-- 게시판 목록 시작 -->
<?
$sql = "SELECT * FROM $write_table ORDER BY wr_subject $board[bo_4], wr_1, wr_2 ";
$result=sql_query($sql);
//$num_rows = mysql_num_rows($result);
$count = 0;
while($data=sql_fetch_array($result)) {
$count++;
$hList[]=$data;
if($preYear != $data[wr_subject]) {
$preYear = $data[wr_subject];
if($count > 1) {
$cicle_img = '<div class="year_body"><span>'.$data[wr_subject].'</span></div>';
}elseif($count == 1){
$cicle_img = '<div class="year_body first"><span>'.$data[wr_subject].'</span></div>';
}
echo ' <div class="p_box '.$margin_top.'">';
echo ' <div class="history_img">'.$cicle_img.'</div>';
echo ' <div class="history_txt">';
$tmp_write_table = $g5['write_prefix'] . $board['bo_table']; // 게시판 테이블 전체이름
$sql_detail = " select * from {$tmp_write_table} where wr_subject = {$data[wr_subject]} order by wr_subject $board[bo_4], wr_1, wr_2 ";
$result_detail = sql_query($sql_detail);
$history_icon = '';
for ($i=0; $hList = sql_fetch_array($result_detail); $i++) {
if($i == 0) {
if($i > -1) $margin_top = "mt30";
echo '<div class="tit">';
echo ' <h4>'.$hList[wr_subject].'</h4>';
echo '</div>';
}
$disp_month = $hList[wr_1];
$disp_day = $hList[wr_2];
if($board[bo_3]=="d") {
$display = $disp_month."월 ".($disp_day == '00' ? "" : $disp_day."일 ");
}else{
$display = $disp_month."월";
}
echo '<p class="mt5">';
if($is_admin || $is_checkbox) echo '<input type="checkbox" name="chk_wr_id[]" value="'.$hList[wr_id].'" title="'.$hList[wr_subject].'"> ';
if($is_admin) {
echo ' <a href="'.G5_BBS_URL.'/write.php?bo_table='.$bo_table.'&w=u&wr_id='.$hList[wr_id].'">';
}
echo $display.rtrim(nl2br($hList[wr_content]));
if ($is_admin)
{
set_session("ss_delete_token", $token = uniqid(time()));
$delete_href ='./delete_all.php?bo_table='.$bo_table.'&wr_id='.$hList[wr_id];
echo ' </a> ';
echo '<a href="javascript:del(\''.$delete_href.'\');"><img src="'.$board_skin_url.'/img/btn_close.gif" alt="Delete" width="12px" height="11px" /></a>';
}
echo '</p>';
$thumb = get_list_thumbnail($bo_table, $hList['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
$sql = " select bf_file, bf_content from {$g5['board_file_table']}
where bo_table = '$bo_table' and wr_id = '$hList[wr_id]' and bf_type between '1' and '3' order by bf_no limit 0, 1 ";
$row = sql_fetch($sql);
if($thumb['src']) {
$history_icon .= '<div class="history_icon">';
$history_icon .= '<strong>'.$hList[wr_subject].'</strong>';
$history_icon .= '<p class="tit">'.$thumb['alt'].'</p>';
$history_icon .= '<p class="mt5"><a href="'.G5_DATA_URL.'/file/'.$bo_table.'/'.$row['bf_file'].'" data-lightbox="history-image-set" class="light-box-image"><img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" width="'.$board['bo_gallery_width'].'" height="'.$board['bo_gallery_height'].'"></a></p>';
$history_icon .= '</div>';
}
}
echo ' </div>';
echo $history_icon;
echo ' </div>';
}
}
?>
<div class="p_box">
<div class="history_img"><img src="<?=$board_skin_url?>/img/history_start.gif" style="position:absolute;bottom:0;left:55px;" alt="history_start"></div>
<div class="history_txt">
</div>
</div>
</div>
<div class="mt40"></div>
<?php if ($is_admin || $list_href || $is_checkbox || $write_href) { ?>
<div class="bo_fx">
<?php if ($is_checkbox) { ?>
<ul class="btn_bo_adm">
<li><input type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value"></li>
<li><input type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value"></li>
<li><input type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value"></li>
</ul>
<?php } ?>
<?php if ($list_href || $rss_href || $write_href) { ?>
<ul class="btn_bo_user">
<?php if ($rss_href) { ?><li><a href="<?php echo $rss_href ?>" class="btn_b01">RSS</a></li><?php } ?>
<?php if ($admin_href) { ?><li><a href="<?php echo $admin_href ?>" class="btn_admin">관리자</a></li><?php } ?>
<?php if ($list_href) { ?><li><a href="<?php echo $list_href ?>" class="btn_b01">목록</a></li><?php } ?>
<?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02">글쓰기</a></li><?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</form>
<!-- 페이지 -->
<?php //echo $write_pages; ?>
</div>
<script type="text/javascript">
var num = 0;
jQuery(document).ready(function(){
jQuery(".history_img");
jQuery(".history_txt");
$(".history_icon");
})
jQuery(window).load(function(){
jQuery(".history_img").each(function(index){
jQuery.easing.def = "easeOutQuart";
num++;
jQuery(".history_img").eq(index).delay().animate({opacity:100, marginTop:"0px"}, 900);
jQuery(".history_txt").eq(index).delay().animate({opacity:100, marginTop:"0px"}, 900);
$(".history_icon").eq(index).delay().animate({opacity:100, marginTop:"0px"}, 600);
})
})
</script>
<script type="text/javascript">
if ('<?=$sca?>') document.fcategory.sca.value = '<?=$sca?>';
/*
if ('<?=$stx?>') {
document.fsearch.sfl.value = '<?=$sfl?>';
if ('<?=$sop?>' == 'and')
document.fsearch.sop[0].checked = true;
if ('<?=$sop?>' == 'or')
document.fsearch.sop[1].checked = true;
} else {
document.fsearch.sop[0].checked = true;
}
*/
</script>
<?php if ($is_checkbox) { ?>
<script>
function all_checked(sw) {
var f = document.fboardlist;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]")
f.elements[i].checked = sw;
}
}
function fboardlist_submit(f) {
var chk_count = 0;
for (var i=0; i<f.length; i++) {
if (f.elements[i].name == "chk_wr_id[]" && f.elements[i].checked)
chk_count++;
}
if (!chk_count) {
alert(document.pressed + "할 게시물을 하나 이상 선택하세요.");
return false;
}
if(document.pressed == "선택복사") {
select_copy("copy");
return;
}
if(document.pressed == "선택이동") {
select_copy("move");
return;
}
if(document.pressed == "선택삭제") {
if (!confirm("선택한 게시물을 정말 삭제하시겠습니까?\n\n한번 삭제한 자료는 복구할 수 없습니다"))
return false;
}
return true;
}
// 선택한 게시물 복사 및 이동
function select_copy(sw) {
var f = document.fboardlist;
if (sw == "copy")
str = "복사";
else
str = "이동";
var sub_win = window.open("", "move", "left=50, top=50, width=500, height=550, scrollbars=1");
f.sw.value = sw;
f.target = "move";
f.action = "./move.php";
f.submit();
}
</script>
<?php } ?>
<!-- } 게시판 목록 끝 -->
<script type="text/javascript" src="<?php echo $board_skin_url ?>/js/lightbox-2.6.min.js"></script>
이러합니다!!!
답변 3
안녕하세요 일단 제가 생각하는 가장 효율적인 방법은
해당부분의 태그가 어떻게 구성되어있는지를 개발자도구로 확인하는 것입니다.
바꾸시려는 부분에 마우스를 가져다 대고 오른쪽클릭해서 요소검사를 하시면
해당부분을 감싸고 있는 HTML 태그의 구조가 나옵니다. (예를들자면 div태그라던지)
그 구조의 디자인을 설정하기위해 그 태그에 class값이나 id값을 줬을겁니다.
태그에 붙어있는 class 값이나 id값을 기억하셨다가 연결된 css 파일에 들어가셔서
똑같은 이름의 class값이나 id값의 width, 즉 너비분을 늘려주는 식으로 수정해주시면 될 것 같습니다.
일단 답변 감사합니다!!
제가 찾아봤는데 css에서
.mt5{margin-top:5px}
이 부분을 수정하면 될 것같더라구요!
그래서 mt5{margin-top:5px;width:100px} 이렇게 바꿔봤는데
기기가 크든 작든 딱 100픽셀에 고정되어서 답답하더라고요 ㅠㅠ
기기에 맞게끔 늘어났다 줄어들었다 하면 좋겠는데
해서 %를 넣으면 되나 해서 mt5{margin-top:5px;width:100%} 이렇게 해봐도
사진처럼 뭉탱이 전체가 내려가버리더라구요... 어떻게 해야할까요?ㅠㅠㅠㅠ
일단 찾으신 것만으로도 큰수확이십니다^^
해당하는 CSS를 수정하셨는데도 변화가 없으시면 테이블 태그이거나
절대위치인 position 값이 설정되어 있거나 해당 태그의 부모 틀 안에 갇혀있는 경우일겁니다.
사용하시는 편집기의 접는 기능을 사용해서 큰 단위로 분류해보시고
mt5의 상위태그, 즉 부모태그의 css도 한번 건드려 보세요
감사합니다~^^
감사합니다~^^
아 저도 같은 형상으로 고민하다가 다른스킨으로 갈아탓....ㅋㅋㅋ
아 어떤거로 갈아타셨어요?! ㅠㅠㅠ 저 현상은 해결이 안되나보네요 ㅠㅠ..
먼저 좌우로 배치된 화면에 대해 고민을 좀 해야 합니다.
모바일일때 양쪽으로 되어있으면 화면이 답답하죠.
반응형을 쉽게 만들기 위해 최초에 위와같은 구조를 선택했었습니다.
말씀하신 부분처럼 진행하기위해선 한 년도를 감싸고 있는 레이어를 새로 생성해 감싸주고
그 레이어에 css를 min-width 800정도 이상일때만 적용되게 하여
table cell로 만들어주면 해결 되십니다.
혹은 padding값을 왼쪽으로 주고 연도를 absolute 로 줘서 강제로 왼쪽에 위치시키되,
이 역시 모바일일땐 풀어지게끔 조정하시면 됩니다.
적잖은 작업량이라 팁만 드렸습니다. 이 스킨이 댓글이 상당히 많네요...
언제 한번 업글해야겠습니다. ^^;;;;; 감사합니다.
오우 리니님ㅠㅠ 이 스킨이 인기가 엄청 많습니다ㅠㅠ 업그레이드 너무 기대되네요ㅠㅠ 이렇게 멋진 스킨 만들어주셔서 감사합니다
답변을 작성하시기 전에 로그인 해주세요.
