스킨 페이지에서 이미지를 불러올 때, 이미지 여백이 많이 남습니다. 채택완료



Copy
<!-- 게시판 목록 시작 --><table width="<?=$width?>" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table  width="800" border="0" cellpadding="0" cellspacing="0" align="center" >    <tr>        <td width="800" height="$adj_height" Style="background:#fff;" id="contents"><img class="main_img" src="<?=$list[0][file][0][path]?>/<?=$list[0][file][1][file]?>" width="800" id="main_img" style="vertical-align:top;"></td>    </tr></table>

위와 같이 코딩을 하게 되는데, 높이가 1000px이상인 이미지는 문제가 되지 않는데

높이가 1000px 이하가 되면, 이미지 여백이 많이 남습니다.

Cap 2014-06-26 13-04-06-838.png

이런 현상이 발생하는데 원인이 무엇인지 몰라서 도움을 얻기 위해 이렇게 글을 올려봅니다

Copy
<?if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가 // 선택옵션으로 인해 셀합치기가 가변적으로 변함//$colspan = 9;if ($is_category) $colspan++;if ($is_checkbox) $colspan++;if ($is_good) $colspan++;if ($is_nogood) $colspan++;// 제목이 두줄로 표시되는 경우 이 코드를 사용해 보세요.// <nobr style='display:block; overflow:hidden; width:000px;'>제목</nobr>?><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><style type="text/css">.blue{color:blue;font-weight:bold;}.high{    color: aqua;}td.entitle:active {color: #fd9b07}td font.dandy:active {color: #fd9b07}td font.dandy:visited {color: #fd9b07}font.dandy:focus {color: #fd9b07}font.dandy:link {color: black}font.dandy:active {color: #fd9b07}.cls0{color: red};.cls1{color: black};.cls2{color: blue};.cls3{color: green};</style><table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td height=10></td></tr></table><!-- 제목 --><table width="100%" cellspacing="0" cellpadding="0" border="0" align="center"><form name="fboardlist" method="post"><input type="hidden" name="bo_table" value="<?=$bo_table?>"><input type="hidden" name="sfl"  value="<?=$sfl?>"><input type="hidden" name="stx"  value="<?=$stx?>"><input type="hidden" name="spt"  value="<?=$spt?>"><input type="hidden" name="page" value="<?=$page?>"><input type="hidden" name="sw"   value=""><? if ($is_admin) { ?><tr><td height=30 colspan='<?=$board[bo_gallery_cols]?>' style='padding-left:20px;'><INPUT onclick="if (this.checked) all_checked(true); else all_checked(false);" type=checkbox> 전체선택</td></tr><? } ?><tr><?for ($i=0; $i<count($list); $i++) {     $title = "자세히보기";    $content = cut_str(get_text($list[$i][wr_content]), 180);    $subject = cut_str(get_text($list[$i][subject]), 100, '...');    $img_width  = '160';        // 이미지 개당 가로크기     $img_height = '120';        // 이미지 개당 세로크기     $img = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][0][file]);    $img2 = "$g4[path]/data/file/$bo_table/".urlencode($list[$i][file][1][file]);    $adj_height = $list[$i][file][1][image_height];    $adj_index = $list[$i][wr_id];    if (!file_exists($img) || !$list[$i][file][0][file])        $img = "$board_skin_path/img/no_image.gif";    if ($is_admin)        $view_href = "$g4[bbs_path]/board.php?bo_table=$bo_table&wr_id={$list[$i][wr_id]}";    else         $view_href = "#";    $checkbox = "";    if ($is_checkbox)        $checkbox = "<input type=checkbox name=chk_wr_id[] value='{$list[$i][wr_id]}'>";    $tr = "";     if ($i && $i%$board[bo_gallery_cols]==0)         $tr = "</tr><tr>";     echo "$tr";     echo <<<HEREDOC    <td width="{$td_width}%" valign="top" align="center" ><table  width="200" height="100" border="0" cellpadding="0" cellspacing="0">    <tr>        <td align="center">            <img src="{$img}" width='{$img_width}' height='{$img_height}' border="0" title="$title" style="border:0px solid #000000;cursor:pointer;" class="test" onClick="view_img2('$img2','$adj_height')" data-param="$i">        </td>    </tr>    <tr>        <td align="center" class="test2" style="cursor:pointer;" onClick="view_img2('$img2','$adj_height', '$adj_index')" data-param="$i">{$checkbox}&nbsp;<font id="dandy$i" class="dandy" value="$i" data-param="$i">{$subject}</font></td>            </tr></table>    </td>HEREDOC;}// 나머지 td 를 채운다.if ($i == 0)    echo "<td colspan='$board[bo_gallery_cols]' height=50 align=center>게시물이 없습니다.</td>";?></form></tr></table><!-- 분류 셀렉트 박스, 게시물 몇건, 관리자화면 링크 --><table width="100%" border="0" cellpadding="1" cellspacing="0" style='border-top:1px solid #ffffff;border-bottom:1px solid #cccccc;'><tr height="28">    <? if ($is_category) { ?><form name="fcategory" method="get"><td width="50%"><select name=sca onchange="location='<?=$category_location?>'+this.value;"><option value=''>전체</option><?=$category_option?></select></td></form><? } ?>     <? if ($is_admin) { ?><td align="right">게시물 <?=number_format($total_count)?>건</td><? } ?></tr></table><!-- 페이지 --><table width="100%" cellspacing="0" cellpadding="0"><tr>    <td height="37" align="center" background="<?=$board_skin_path?>/img/number_line.gif">        <table width="100%" border="0" cellspacing="0" cellpadding="0">        <tr>             <td width="100%" align="center">                <? if ($prev_part_href) { echo "<a href='$prev_part_href'><img src='$board_skin_path/img/btn_search_prev.gif' width=54 height=18 border=0 align=absmiddle title='이전검색'></a>"; } ?>                <?                // 기본으로 넘어오는 페이지를 아래와 같이 변환하여 이미지로도 출력할 수 있습니다.                //echo $write_pages;                $write_pages = str_replace("처음", "<img src='$board_skin_path/img/begin.gif' border='0' align='absmiddle' title='처음'>", $write_pages);                $write_pages = str_replace("이전", "<img src='$board_skin_path/img/prev.gif' border='0' align='absmiddle' title='이전'>", $write_pages);                $write_pages = str_replace("다음", "<img src='$board_skin_path/img/next.gif' border='0' align='absmiddle' title='다음'>", $write_pages);                $write_pages = str_replace("맨끝", "<img src='$board_skin_path/img/end.gif' border='0' align='absmiddle' title='맨끝'>", $write_pages);                $write_pages = preg_replace("/<span>([0-9]*)<\/span>/", "<font style=\"font-family:Tahoma, Seoul,굴림; font-size:10pt; color:#797979\">$1</font>", $write_pages);                $write_pages = preg_replace("/<b>([0-9]*)<\/b>/", "<font style=\"font-family:Tahoma, Seoul,굴림; font-size:10pt; color:orange;\">$1</font>", $write_pages);                ?>                <strong><?=$write_pages?></strong>                <? if ($next_part_href) { echo "<a href='$next_part_href'><img src='$board_skin_path/img/btn_search_next.gif' width=54 height=18 border=0 align=absmiddle title='다음검색'></a>"; } ?>            </td>        </tr>        </table></td></tr></table><!-- 버튼 링크 --><div class="board_button">        <div style="float:left;">        <? if ($list_href) { ?>        <a href="<?=$list_href?>"><img src="<?=$board_skin_path?>/img/btn_list.gif" align="absmiddle" border='0'></a>        <? } ?>        <? if ($is_checkbox) { ?>        <a href="javascript:select_delete();"><img src="<?=$board_skin_path?>/img/btn_select_delete.gif" align="absmiddle" border='0'></a>        <a href="javascript:select_copy('copy');"><img src="<?=$board_skin_path?>/img/btn_select_copy.gif" align="absmiddle" border='0'></a>        <a href="javascript:select_copy('move');"><img src="<?=$board_skin_path?>/img/btn_select_move.gif" align="absmiddle" border='0'></a>        <? } ?>        </div>        <div style="float:right;">        <? if ($write_href) { ?><a href="<?=$write_href?>"><img src="<?=$board_skin_path?>/img/btn_write.gif" border='0'></a><? } ?>        </div>    </div>     </td></tr></table><!-- 게시판 목록 시작 --><table width="<?=$width?>" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table  width="800" border="0" cellpadding="0" cellspacing="0" align="center" >    <tr>        <td width="800" height="$adj_height" Style="background:#fff;" id="contents"><img class="main_img" src="<?=$list[0][file][0][path]?>/<?=$list[0][file][1][file]?>" width="800" id="main_img" style="vertical-align:top;"></td>    </tr></table><script language="JavaScript">if ("<?=$sca?>") document.fcategory.sca.value = "<?=$sca?>";if ("<?=$stx?>") {    document.fsearch.sfl.value = "<?=$sfl?>";    document.fsearch.sop.value = "<?=$sop?>";}function view_img2(img2, hh, adj_index){    document.getElementById("main_img").src = img2;    $('#main_img').css('height',hh); //가로는 800고정, 높이를 원본으로 할 때//  $('#main_img').css({'width':ww,'height':hh}); //가로 세로 모두 원본크기로 변경할 때    //선택된 index값과 비교해서 Class를 추가하는 루틴이 필요하다.        //alert(adj_index); //adj_index는 현재 선택한 값}var g_a = "";$(document).ready(function(){    $(".test").click( function() { // test라는 클래스 클릭시..         var parm = $(this).attr("data-param");         //alert( parm ); // 클릭된 parm 값을 경고창으로 찍어보고 해당숫자를 이용해서 고유의 id값 뒤에 넣어주고...             var a = "#dandy"+parm;  // id        var b = "#dandy"+g_a; // 전역변수에 저장한 id        if( g_a != "" ) { // 전역변수에 값이 있을때만.. 실행                 $(b).css("color","black"); // 해당 id에 width를 100으로 수정..                 $(b).css("font-weight","normal");        }         $(a).css("color","#fd9b07"); // 해당 id에 width를 200으로 수정..        $(a).css("font-weight","bold");                g_a = parm; // 전역변수에 클릭한 값을 저장     });    $(".test2").click( function() { // test라는 클래스 클릭시..         var parm = $(this).attr("data-param");        //alert( parm ); // 클릭된 parm 값을 경고창으로 찍어보고 해당숫자를 이용해서 고유의 id값 뒤에 넣어주고...             var a = "#dandy"+parm;  // id         var b = "#dandy"+g_a; // 전역변수에 저장한 id        if( g_a != "" ) { // 전역변수에 값이 있을때만.. 실행                 $(b).css("color","black"); // 해당 id에 width를 100으로 수정..                 $(b).css("font-weight","normal");        }         $(a).css("color","#fd9b07"); // 해당 id에 width를 200으로 수정..        $(a).css("font-weight","bold");                g_a = parm; // 전역변수에 클릭한 값을 저장     });});</script><? if ($is_checkbox) { ?><script language="JavaScript">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 check_confirm(str){    var f = document.fboardlist;    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(str + "할 게시물을 하나 이상 선택하세요.");        return false;    }    return true;}// 선택한 게시물 삭제function select_delete(){    var f = document.fboardlist;    str = "삭제";    if (!check_confirm(str))        return;    if (!confirm("선택한 게시물을 정말 "+str+" 하시겠습니까?\n\n한번 "+str+"한 자료는 복구할 수 없습니다"))        return;    f.action = "./delete_all.php";    f.submit();}// 선택한 게시물 복사 및 이동function select_copy(sw){    var f = document.fboardlist;    if (sw == "copy")        str = "복사";    else        str = "이동";                           if (!check_confirm(str))        return;    var sub_win = window.open("", "move", "left=50, top=50, width=396, height=550, scrollbars=1");    f.sw.value = sw;    f.target = "move";    f.action = "./move.php";    f.submit();}</script><? } ?><!-- 게시판 목록 끝 -->





답변 1개

채택된 답변
+20 포인트

자바스크립트 바로 위에 테이블이 2개인데 닫는 태그가 하나 없네요

</td></tr></table>



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

답변에 대한 댓글 1개

답변 주셔서 감사합니다. 태그 빠진 부분은 보충했는데, 현상은 똑같이 발생만 하네요. ㅎㅎ

공통함수쪽이나...board.php에서 불러올 때 값이 없는지를 아무래도 체크해봐야 되겠네요.

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

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

로그인
🐛 버그신고