ul 높이가 늘어나면 dl 높이도 같이 늘어나게끔..
본문
안녕하세요. 현재 일정관리 게시판 스킨을 만들고 있는데요..
제작하는 도중에 막히는 부분이 있어 문의드립니다..!
보시다시피 현재 목요일 부분에 게시글이 6개가 넘어가면 7개부터는 dl의 높이가 늘어나질 않는데요.
제 짧은 지식으로는 dl이 ul의 부모로 존재하는데 어째서 같이 늘어나지 않는지 이해가 가질 않아서 질문드립니다.
아래는 소스코드 전문입니다.
// list.skin.php
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
// 선택옵션으로 인해 셀합치기가 가변적으로 변함
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
if (!$_GET['Ymd']) {
$Ymd = DATE("Ymd");
}
if($Ymd) {
$mode = 3;
$Ymd = $Ymd + 0;
}
$add_class = $yoil = array();
$yoil[1] = '월요일';
$yoil[2] = '화요일';
$yoil[3] = '수요일';
$yoil[4] = '목요일';
$yoil[5] = '금요일';
$yoil[6] = '토요일';
$yoil[7] = '일요일';
if(!$mode) $mode = 2;
$this_year = date("Y", G5_SERVER_TIME);
$this_month = date("m", G5_SERVER_TIME);
$this_day = date("d", G5_SERVER_TIME);
$this_yoilnum = date("N", G5_SERVER_TIME);
$this_weeknum = date("W", G5_SERVER_TIME);
$today = date('Ymd', G5_SERVER_TIME);
$end_i = 7;
if($mode == 1) { // 월요일부터 시작
$k = 1; // 시작요일
$tmp_day = $this_yoilnum - 1;
$start_time = G5_SERVER_TIME-($tmp_day*60*60*24);
} else if($mode == 2) { // 어제 부터 시작
$k = $this_yoilnum - 1;
if(!$k) $k = 7;
$tmp_day = 1;
$start_time = G5_SERVER_TIME-($tmp_day*60*60*24);
$end_i = 8;
} else if($mode == 3) { // 특정일/주 선택
$k = 1;
$select_time = strtotime($Ymd);
$yoilnum = date("N", $select_time);
$tmp_day = $yoilnum - 1;
$start_time = $select_time-($tmp_day*60*60*24);
$weeknum = date("W", $start_time);
}
$s_year = date("Y", $start_time);
$s_month = date("m", $start_time);
$s_day = date("d", $start_time);
$start_Ymd = date("Ymd", $start_time);
$end_Ymd = date("Ymd", $start_time + (7*60*60*24));
if($sql_search) $sql_search = ' and '.$sql_search;
$sql = "select wr_id, ca_name, wr_subject, wr_content, wr_1, wr_3,wr_4,wr_5,wr_6, wr_option from $write_table where wr_is_comment = 0 and wr_1 between '$start_Ymd' and '$end_Ymd' {$sql_search} order by wr_1, wr_2";
$result = sql_query($sql);
while($row = sql_fetch_array($result)) {
unset($tmp_list);
$html = 0;
if (strstr($row['wr_option'], 'html1'))
$html = 1;
else if (strstr($row['wr_option'], 'html2'))
$html = 2;
$tmp_list['wr_id'] = $row['wr_id'];
// 이거 추가해 주고...
$tmp_list['wr_content'] = nl2br($row['wr_content']);
$tmp_list['wr_3'] = nl2br($row['wr_3']);
$tmp_list['wr_4'] = nl2br($row['wr_4']);
$tmp_list['wr_5'] = nl2br($row['wr_5']);
$tmp_list['wr_6'] = nl2br($row['wr_6']);
//
if($row['ca_name']) $tmp_list['ca_name'] = '['.$row['ca_name'].'] ';
$tmp_list['subject'] = conv_subject($row['wr_subject'], $board['bo_subject_len'], '…');
if($board['bo_use_list_content']) $tmp_list['content'] = cut_str(conv_content($row['wr_content'], $html),50);
$tmp_list['href'] = './board.php?bo_table='.$bo_table.'&wr_id='.$row['wr_id'];
$info_list["{$row['wr_1']}"][] = $tmp_list;
}
$add_class[$today] .= ' today';
?>
<!--<h2 id="container_title"><?php echo $board['bo_subject'] ?><span class="sound_only"> 목록</span></h2>-->
<!-- 게시판 목록 시작 { -->
<div id="bo_list" style="width:<?php echo $width; ?>">
<!-- 게시판 카테고리 시작 { -->
<?php if ($is_category) { ?>
<nav id="bo_cate">
<h2><?php echo $board['bo_subject'] ?> 카테고리</h2>
<ul id="bo_cate_ul">
<?php echo $category_option ?>
</ul>
</nav>
<?php } ?>
<!-- } 게시판 카테고리 끝 -->
<div class="text_right">
<?php if ($is_checkbox) { ?>
<div style="float:left;margin:10px 0 0 25px">
<input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
<label for="chkall">전체선택</label>
</div>
<?php } ?>
<input type="hidden" name="datepicker" value="<?php echo $Ymd; ?>" id="datepicker" class="frm_input" size="10" maxlength="8">
<label for="datepicker" class="sound_only">시작일시</label>
<!--
<a href="<?php echo $_SERVER['PHP_SELF'].'?bo_table='.$bo_table.'&sca='.$sca ?>" class="btn_b02">오늘</a>
<a href="<?php echo $_SERVER['PHP_SELF'].'?bo_table='.$bo_table.'&sca='.$sca.'&Ymd='.date("Ymd", mktime(0,0,0, $s_month, $s_day-7, $s_year)) ?>" class="btn_b01">전주</a>
<a href="<?php echo $_SERVER['PHP_SELF'].'?bo_table='.$bo_table.'&sca='.$sca.'&Ymd='.date("Ymd", mktime(0,0,0, $s_month, $s_day+7, $s_year)) ?>" class="btn_b01">다음주</a>
-->
<?php if ($rss_href) { ?><a href="<?php echo $rss_href ?>" class="btn_b01">RSS</a><?php } ?>
<!--
<?php if ($admin_href) { ?><a href="<?php echo $admin_href ?>" class="btn_admin">관리자</a><?php } ?>
<?php if ($write_href) { ?><a href="<?php echo $write_href ?>" class="btn_b02">등록</a><?php } ?>
-->
</div>
<?php if($is_admin == 'super'){?>
<fieldset id="bo_sch">
<legend>게시물 검색</legend>
<form name="fsearch" method="get">
<input type="hidden" name="bo_table" value="<?php echo $bo_table ?>">
<input type="hidden" name="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sop" value="and">
<label for="sfl" class="sound_only">검색대상</label>
<select name="sfl" id="sfl">
<option value="wr_subject"<?php echo get_selected($sfl, 'wr_subject', true); ?>>서버명</option></select>
<label for="stx" class="sound_only">검색어<strong class="sound_only"> 필수</strong></label>
<input type="text" name="stx" value="<?php echo stripslashes($stx) ?>" required id="stx" class="frm_input required" size="15" maxlength="20">
<input type="submit" value="검색" class="btn_submit">
</form>
</fieldset>
<?}?>
<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="sca" value="<?php echo $sca ?>">
<input type="hidden" name="sst" value="<?php echo $sst ?>">
<input type="hidden" name="sod" value="<?php echo $sod ?>">
<input type="hidden" name="page" value="<?php echo $page ?>">
<input type="hidden" name="sw" value="">
<div class="board_week_wrap">
<?php
for($i = 0; $i < $end_i; $i++) {
if($k == 8) {
$k = 1;
}
$Ymd = date("Ymd", $start_time+($i*60*60*24));
if($k == 6) $add_class[$Ymd] .= 'blue';
if($k == 7) $add_class[$Ymd] .= 'red';
if($Ymd < $today) $add_class[$Ymd] .= ' past';
?>
<dl class="<?php echo $add_class[$Ymd] ?>">
<?php if($is_admin == 'super'){?><a href="/bbs/write.php?bo_table=notice&wr_1=<?php echo date("20ymd", $start_time+($i*60*60*24)); ?>" target="_blank"><?}?><dt><b>
<?php echo $yoil[$k] ?>
<p><?php echo date("y.m.d", $start_time+($i*60*60*24)); ?></p></b>
</dt></a>
<?php if($info_list[$Ymd]) { foreach ($info_list[$Ymd] as $v) { ?>
<?php if($v['wr_4'] == '') { ?>
<ul>
<li>
<?php if ($is_checkbox) { ?>
<label for="chk_wr_id_<?php echo $v['wr_id'] ?>" class="sound_only"><?php echo $v['subject'] ?></label>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $v['wr_id'] ?>" id="chk_wr_id_<?php echo $v['wr_id'] ?>">
<?php } ?>
<div class="cont">
<i class="fa fa-calendar-check-o" aria-hidden="true"></i>
<a href="<?php echo $v['wr_6'] ?>"target="_blank" style="color:#222;font-weight:bold;" >
<?php echo $v['ca_name'].$v['subject'] ?>
</a>
</div>
</li>
</ul>
<?}else if($v['wr_4'] == 'sky'){?>
<ul style="background:#222; color:#fff;">
<li>
<?php if ($is_checkbox) { ?>
<label for="chk_wr_id_<?php echo $v['wr_id'] ?>" class="sound_only"><?php echo $v['subject'] ?></label>
<input type="checkbox" name="chk_wr_id[]" value="<?php echo $v['wr_id'] ?>" id="chk_wr_id_<?php echo $v['wr_id'] ?>">
<?php } ?>
<div class="cont">
<img src="">
<a href="<?php echo $v['wr_6'] ?>" target="_blank" style="color:#fff;font-weight:bold;" >
<?php echo $v['ca_name'].$v['subject'] ?>
</a>
</div>
</li>
</ul>
<?}?>
<?php }
} // end foreach, end if ?>
<div style="clear:both"></div>
</dl>
<?php
$k++;
} // end for
?>
</div>
<div style="clear:both"></div>
<?php if ($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 || $write_href) { ?>
<ul class="btn_bo_user">
<?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>
</div>
<div id="start"></div>
<?php if($is_checkbox) { ?>
<noscript>
<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>
</noscript>
<?php } ?>
<script>
$(function(){
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "<?php echo $board_skin_url; ?>/img/calendar.png",
buttonImageOnly: true, changeMonth: true, changeYear: true, dateFormat: "yymmdd", showButtonPanel: true, yearRange: "c-99:c+99",
onSelect: function() {
var date = $(this).val();
window.location.replace("<?php echo $_SERVER['PHP_SELF'].'?bo_table='.$bo_table.'&sca='.$sca.'&Ymd=' ?>" + date);
}
});
});
</script>
<!-- 페이지 -->
<?php // echo $write_pages; ?>
<!-- 게시판 검색 시작 { -->
<!-- } 게시판 검색 끝 -->
<?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한번 삭제한 자료는 복구할 수 없습니다\n\n답변글이 있는 게시글을 선택하신 경우\n답변글도 선택하셔야 게시글이 삭제됩니다."))
return false;
f.removeAttribute("target");
f.action = "./board_list_update.php";
}
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 } ?>
<!-- } 게시판 목록 끝 -->
아래는 해당 게시판 관련 style.css 전문입니다.
/* 목록 */
#bo_list .text_right {float:right; text-align:right}
#bo_list .board_week_wrap {margin:5px 0;height:241px; max-height:500px; margin-bottom:10px; border-top:2px solid black; }
#bo_list .board_week_wrap dl, .board_week_wrap dd, .board_week_wrap dt {margin:0;}
#bo_list .board_week_wrap dl {z-index:100; border-right:1px solid #dcdcdc; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc;float:left; width:14.2857%; margin-bottom:20px; height:100%; padding-bottom:20px;}
#bo_list .board_week_wrap dl:nth-child(1){z-index:100; border-left:1px solid #dcdcdc;}
#bo_list .board_week_wrap dt {float:left;width:100%;text-align:center;font-size:1em; border-bottom:1px solid #dcdcdc; background:#fefefe; padding:5px;font-family:'맑은 고딕', 'dotum'}
#bo_list .board_week_wrap dt p {font-size:0.6em;}
#bo_list .board_week_wrap dd {float:left;padding-left:7px;line-height:1.6em}
#bo_list .board_week_wrap dd:after {clear:both}
#bo_list .board_week_wrap li { }
#bo_list .board_week_wrap dl.today {background:#fdfdfd; }
#bo_list .board_week_wrap dl.past {color:black;background-color:#fff}
#bo_list .board_week_wrap dl.blue dt {color:blue}
#bo_list .board_week_wrap dl.red dt {color:red}
#bo_list .board_week_wrap dl ul {padding:8px; clear:both; list-style-type:none}
#bo_list .board_week_wrap dl ul li span {display:block;padding-left:15px;color:#565656}
.cont { display:inline-block; padding:0px 1px;position:relative;}
고수님들의 조언 꼭 부탁드립니다.. 감사합니다.
답변 2
마크업구조가 잘못되어있긴하지만 우선 지금 상황에서는 display:table을 이용하시면 될듯싶습니다
#bo_list .board_week_wrap {
margin: 5px 0;
/* min-height: 500px; */ /*삭제*/
margin-bottom: 10px;
border-top: 2px solid black;
display: table; /* 추가 */
width: 100%;
}
#bo_list .board_week_wrap>dl {
z-index: 100;
border-right: 1px solid #dcdcdc;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #dcdcdc;
/* float: left; */ /*삭제*/
width: 14.2857%;
margin-bottom: 20px;
/* height: 100%; */ /*삭제*/
padding-bottom: 20px;
display: table-cell;
}
#bo_list .board_week_wrap dt {
/* float: left; */ /*삭제*/
width: 100%;
text-align: center;
font-size: 1em;
border-bottom: 1px solid #dcdcdc;
background: #fefefe;
padding: 5px;
font-family: '맑은 고딕', 'dotum';
height: 100px;
}
table-cell이 있었군요..정말 감사합니다!
하시는 일 언제나 승승장구 하시길 바랍니다.
#bo_list .board_week_wrap {margin:5px 0;height:241px; max-height:500px;
여기에 hegith 때문인것 같네요.. 아래와 같이 수정해보세요.
height:241px; max-height:500px; => min-height:500px;
답변감사합니다!
min-height:500px; 로 바꾸게 되니 사진과 같은 현상이 나타납니다 ㅠㅠ
전체적인 레이아웃의 구조가 500px로 최소높이로 지정되어서 여백이 늘어납니다..
해당 요일만 높이가 늘어나고, 다른 요일은 그대로인데 ul이 따로 분리되어서 구조를 다시 짜야하는건가요?
다른 요일도 늘어나는 높이만큼 같이 늘어났으면 합니다.
그럼 height:auto 로 설정하면 됩니다.
답변을 작성하시기 전에 로그인 해주세요.
