반응형을 사용하고 있습니다.

웹진형 게시판의 리스트 에서,

이미지가 있을 경우와 없을 경우, 리스트에서 뿌려지는 내용의 모양새를 가지런하게 하기 위해서

아래와 같이 DIV의 클래스명을 다르게주고 CSS에서 width를 조정하려고,

list.skin.php에서 if elseif로 일부 나름대로 수정한다고 수정해보고,

style.css에서 webzine_list 부분을 복제해서 article_list를 만들고 width를 수정했습니다.

한데, 여기에는 따라붙는 여타 스타일들이 많아서 초보인 저에게는 벅차네요.

가로폭의 변화에 따라 아래 그림과 같이 두 가지 경우가 나타납니다.

아래 그림에서 이미지가 없는 붉은색 div는 클래서가 article_list로 주고,

이미지가 있는 경우는 원래대로 div 클래스를 webzine_list를 주도록 한다고 했는데,

어찌된 영문인지, 뿌려지는게 두번째는 article_list로 표시되고,

그외의 나머지 이미지있는 것은 webzine_list로 뿌려지네요.

이걸 어떻게 가지런히 뿌려지게 하는 방법을 좀 알려주십시오.

list.skin.php

<code>

<?php
// 18-25 카테고리와 게시물 갯수를 표시는 ./bbs/list.php 4-52의 수정 스크립트에 의함.
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');

// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
add_stylesheet('<link rel="stylesheet" href="'.$board_skin_url.'/style.css">', 0);
?>

<!-- 게시판 목록 시작 { -->
<div id="bo_gall" style="width:<?php echo $width; ?>">

    <!-- 게시판 페이지 정보 및 버튼 시작 { -->
    <div id="bo_btn_top">
        <div id="bo_list_total">
            <span>Total <?php echo number_format($total_count) ?>건</span>
            <?php echo $page ?> 페이지
        </div>

        <?php if ($rss_href || $write_href) { ?>
        <ul class="btn_bo_user">
            <?php if ($rss_href) { ?><li><a href="<?php echo $rss_href ?>" class="btn_b01 btn"><i class="fa fa-rss" aria-hidden="true"></i> RSS</a></li><?php } ?>
            <?php if ($admin_href) { ?><li><a href="<?php echo $admin_href ?>" class="btn_admin btn"><i class="fa fa-user-circle" aria-hidden="true"></i> 관리자</a></li><?php } ?>
                        <?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02 btn">글쓰기</a></li><?php } ?>
        </ul>
        <?php } ?>
    </div>
    <!-- } 게시판 페이지 정보 및 버튼 끝 -->

    <!-- 게시판 카테고리 시작 { -->
    <?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 } ?>
    <!-- } 게시판 카테고리 끝 -->

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

    <?php if ($is_checkbox) { ?>
    <div id="gall_allchk">
        <label for="chkall" class="sound_only">현재 페이지 게시물 전체</label>
        <input type="checkbox" id="chkall" onclick="if (this.checked) all_checked(true); else all_checked(false);">
    </div>
    <?php } ?>

    <?php for ($i=0; $i<count($list); $i++) {

        $classes = array();
        
        $classes[] = 'gall_li';
        $classes[] = 'col-gn-'.$bo_gallery_cols;

        if( $i && ($i % $bo_gallery_cols == 0) ){
            $classes[] = 'box_clear';
        }

        if( $wr_id && $wr_id == $list[$i]['wr_id'] ){
            $classes[] = 'gall_now';
        }

        $content = strip_tags($list[$i]['wr_content']);
     ?>
<!-- 리스트 시작, DIV 선택 (webzine_list, article_list)  ----------->
    <?php
        if ($is_checkbox && $thumb['src']) {
            echo "<div class='webzin_list'>"; }
        elseif ($is_checkbox && !$thumb['src']) {
            echo "<div class='article_list'>"; }
    ?>

        <ul>
<!-- 체크박스 및 이미지 존재 여부에 따른 표시------------------------->
          <li>

                <div class="gall_chk">
                    <?php if ($is_checkbox) { ?>
                        <label for="chk_wr_id_<?php echo $i ?>" class="sound_only"><?php echo $list[$i]['subject'] ?></label>
                        <input type="checkbox" name="chk_wr_id[]" value="<?php echo $list[$i]['wr_id'] ?>" id="chk_wr_id_<?php echo $i ?>">
                    <?php } ?>
                    <span class="sound_only">
                        <?php
                        if ($wr_id == $list[$i]['wr_id'])
                            echo "<span class=\"bo_current\">열람중</span>";
                        else
                            echo $list[$i]['num'];
                         ?>
                    </span>
                </div>

                <a href="<?php echo $list[$i]['href'] ?>">
                <?php
                if ($list[$i]['is_notice']) { // 공지사항  ?>
                    <span class="is_notice">공지</span>
                <?php } else {
                    $thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height'], false, true);

                    if($thumb['src']) {
                        $img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
                    } else {
                        //$img_content = '<span class="no_image">no image</span>';
                        $img_content = '';
                    }

                    echo $img_content;
                }
                ?>
                </a>
          </li>
<!-- 게시물 헤드라인 ------------------------------------------------>
          <li>
            <div>
                <p>

                    <?php //이미지가 없을 때 뿌려질 카테고리 위치를 20px 뒤로 옮겨 checkbox와 겹치지 않도록 한다.
                     echo $list[$i]['icon_reply']; //갤러리는 reply 를 사용 안 할 것 같습니다. - 지운아빠 2013-03-04
                    if (!$img_content) {
                    echo "<a style='margin-left:20px;' href='".$list[$i]['ca_name_href']."' class='bo_cate_link'>".$list[$i]['ca_name']."</a>"; }
                    elseif ($is_category && $list[$i]['ca_name']) {
                    echo "<a href='".$list[$i]['ca_name_href']."' class='bo_cate_link'>".$list[$i]['ca_name']."</a>" ?>
                    <?php } ?>
                        <a href="<?php echo $list[$i]['href'] ?>" class="bo_tit">
                            <?php echo $list[$i]['subject'] ?>
                            <?php if ($list[$i]['comment_cnt']) { ?><span class="sound_only">댓글</span><span class="cnt_cmt">+ <?php echo $list[$i]['wr_comment']; ?></span><span class="sound_only">개</span><?php } ?>
                            <?php
                            // if ($list[$i]['link']['count']) { echo '['.$list[$i]['link']['count']}.']'; }
                            // if ($list[$i]['file']['count']) { echo '<'.$list[$i]['file']['count'].'>'; }

                            if (isset($list[$i]['icon_new'])) echo rtrim($list[$i]['icon_new']);
                            if (isset($list[$i]['icon_hot'])) echo rtrim($list[$i]['icon_hot']);
                            //if (isset($list[$i]['icon_file'])) echo rtrim($list[$i]['icon_file']);
                            //if (isset($list[$i]['icon_link'])) echo rtrim($list[$i]['icon_link']);
                            if (isset($list[$i]['icon_secret'])) echo rtrim($list[$i]['icon_secret']);
                             ?>
                         </a>
                    </p>
                    <p>
                        <?php echo $list[$i]['name'] ?> |
                        <i class="fa fa-clock-o" aria-hidden="true"></i> <?php echo date("y-m-d H:i", strtotime($list[$i]['wr_datetime'])) ?> |
                        <i class="fa fa-eye" aria-hidden="true"></i> <?php echo $list[$i]['wr_hit'] ?>
                        <?php if ($is_good) { ?>| <span class="sound_only">추천</span><strong><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> <?php echo $list[$i]['wr_good'] ?></strong><?php } ?>
                        <?php if ($is_nogood) { ?>| <span class="sound_only">비추천</span><strong><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> <?php echo $list[$i]['wr_nogood'] ?></strong><?php } ?>
                    </p>

                </div>

                <!--// 여분변수 확장폼 위치 //-->
<!-- 게시물 본문 --------------------------------------------------->

                <div>
                    <a href="<?php echo $list[$i]['href'] ?>">
                        <p><?=$content?></p>
                    </a>
                </div>
          </li>
<!-- 리스트 끝 ----------------------------------------------------->
        </ul>
    </div>
    <?php } ?>
    <?php if (count($list) == 0) { echo "<div class=\"empty_list\" datano='no'>게시물이 없습니다.</div>"; } ?>

    <?php if ($list_href || $is_checkbox || $write_href) { ?>
    <div class="bo_fx">
        <?php if ($list_href || $write_href) { ?>
        <ul class="btn_bo_user">
            <?php if ($is_checkbox) { ?>
            <li><input type="submit" name="btn_submit" value="선택삭제" onclick="document.pressed=this.value" class="btn btn_b01"></li>
            <li><input type="submit" name="btn_submit" value="선택복사" onclick="document.pressed=this.value" class="btn btn_b01"></li>
            <li><input type="submit" name="btn_submit" value="선택이동" onclick="document.pressed=this.value" class="btn btn_b01"></li>
            <?php } ?>
            <?php if ($list_href) { ?><li><a href="<?php echo $list_href ?>" class="btn_b01 btn">목록</a></li><?php } ?>
            <?php if ($write_href) { ?><li><a href="<?php echo $write_href ?>" class="btn_b02 btn">글쓰기</a></li><?php } ?>
        </ul>
        <?php } ?>
    </div>
    <?php } ?>
    </form>
     
       <!-- 게시판 검색 시작 { -->
    <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||wr_content||wr_1||wr_2||wr_3||wr_4||wr_5||wr_6||wr_7||wr_8||wr_9||wr_10"<?php echo get_selected($sfl, 'wr_subject||wr_content'); ?>>전체</option>
            <option value="wr_subject||wr_content"<?php echo get_selected($sfl, 'wr_subject||wr_content'); ?>>제목+내용</option>
            <option value="wr_subject"<?php echo get_selected($sfl, 'wr_subject', true); ?>>제목</option>
            <option value="wr_content"<?php echo get_selected($sfl, 'wr_content'); ?>>내용</option>
            <option value="mb_id,1"<?php echo get_selected($sfl, 'mb_id,1'); ?>>회원아이디</option>
            <option value="mb_id,0"<?php echo get_selected($sfl, 'mb_id,0'); ?>>회원아이디(코)</option>
            <option value="wr_name,1"<?php echo get_selected($sfl, 'wr_name,1'); ?>>글쓴이</option>
            <option value="wr_name,0"<?php echo get_selected($sfl, 'wr_name,0'); ?>>글쓴이(코)</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="sch_input" size="25" maxlength="20" placeholder="검색어를 입력해주세요">
        <input type="submit" value="검색" class="sch_btn">
        </form>
    </fieldset>
    <!-- } 게시판 검색 끝 -->   
</div>

<?php if($is_checkbox) { ?>
<noscript>
<p>자바스크립트를 사용하지 않는 경우<br>별도의 확인 절차 없이 바로 선택삭제 처리하므로 주의하시기 바랍니다.</p>
</noscript>
<?php } ?>

<!-- 페이지 -->
<?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 } ?>
<!-- } 게시판 목록 끝 -->
</code>

style.css

<code>

.webzin_list > ul:after { clear:both; display:block; content:""; *zoom:1 }
.webzin_list { margin-top: 10px; margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #ececec; background: #fff; border-radius: 3px; }
.webzin_list > ul {}
.webzin_list > ul > li { float: left; width: calc(100% - 210px); }/* width: calc(100% - 210px);*/
.webzin_list > ul > li:first-child { position: relative; width: 200px; margin-right: 10px; }
.webzin_list > ul > li:first-child img { width: 100%; }

.webzin_list > ul > li > div { padding: 5px 5px 10px 5px;}
.webzin_list > ul > li > div:first-child { border-bottom: 1px solid #ececec; margin-bottom: 10px; }
.webzin_list > ul > li > div:first-child > p:first-child { font-weight: 700; font-size: 15px; }
.webzin_list > ul > li > div:first-child > p:last-child { margin-top: 25px; font-size: 11px; color: # }
.webzin_list > ul > li > div:last-child { padding: 0px 5px 10px 5px;}

.gall_chk{ border-bottom: none !important; }

.webzin_list > ul > li > div:first-child > p > a {
    display: inline-block; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000;
    width: 100%; height: 30px;    
}

.webzin_list > ul > li > div:last-child {
    font-size:12px; font-weight:300;
    display: inline-block; float: left; width: 100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    white-space: normal; line-height: 19px; height: 80px; word-break: keep-all;
}

@media screen and (max-width:1200px) {
    .gall_img img { width: 100% !important; }
}
@media screen and (max-width:700px) {
    .mb_disp_no { display: none; }
    .gall_row  > li { width: 33.33333333% !important; }
    .gall_img img { width: 100% !important; }

}

@media screen and (max-width:600px) {
    .gall_row  > li { width: 50% !important; }

    .webzin_list > ul > li { float: left; width: calc(100% - 160px); }
    .webzin_list > ul > li:first-child { width: 150px; }

    .webzin_list > ul > li > div { padding: 5px 5px 5px 5px;}
    .webzin_list > ul > li > div:first-child > p:first-child { font-size: 13px; }
    .webzin_list > ul > li > div:first-child > p:last-child { margin-top: 22px;}

    .webzin_list > ul > li > div:first-child > p > a {
        height: 20px;    
    }
    .webzin_list > ul > li > div:last-child {
        line-height: 17px; height: 50px;
    }

}
@media screen and (max-width:400px) {
    .webzin_list > ul > li { float: left; width: 100%; }
    .webzin_list > ul > li:first-child { width: 100%; margin-right: 0px; }
    .webzin_list > ul > li:last-child { margin-top: 10px; }
}

/**************************************************************************/
/* 추가, 이미지없는 경우 */
.article_list > ul:after { clear:both; display:block; content:""; *zoom:1 }
.article_list { margin-top: 10px; margin-bottom: 10px; padding: 10px; border-bottom: 1px solid #ececec; background: #fff; border-radius: 3px; }
.article_list > ul {}
.article_list > ul > li { float: left; width: calc(100% - 210px); }/* width: calc(100% - 210px);*/
.article_list > ul > li { float: left; width: 100%; }/* width: calc(100% - 210px);*/
.article_list > ul > li:first-child { position: relative; width: 200px; margin-right: 10px; }
.article_list > ul > li:first-child img { width: 100%; }

.article_list > ul > li > div { padding: 5px 5px 10px 5px;}
.article_list > ul > li > div:first-child { border-bottom: 1px solid #ececec; margin-bottom: 10px; }
.article_list > ul > li > div:first-child > p:first-child { font-weight: 700; font-size: 15px; }
.article_list > ul > li > div:first-child > p:last-child { margin-top: 25px; font-size: 11px; color: # }
.article_list > ul > li > div:last-child { padding: 0px 5px 10px 5px;}

.gall_chk{ border-bottom: none !important; }

.article_list > ul > li > div:first-child > p > a {
    display: inline-block; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000;
    width: 100%; height: 30px;    
}

.article_list > ul > li > div:last-child {
    font-size:12px; font-weight:300;
    display: inline-block; float: left; width: 100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    white-space: normal; line-height: 19px; height: 80px; word-break: keep-all;
}

@media screen and (max-width:1200px) {
    .gall_img img { width: 100% !important; }
}
@media screen and (max-width:700px) {
    .mb_disp_no { display: none; }
    .gall_row  > li { width: 33.33333333% !important; }
    .gall_img img { width: 100% !important; }

}

@media screen and (max-width:600px) {
    .gall_row  > li { width: 50% !important; }

    .article_list > ul > li { float: left; width: calc(100% - 160px); }
    .article_list > ul > li:first-child { width: 150px; }

    .article_list > ul > li > div { padding: 5px 5px 5px 5px;}
    .article_list > ul > li > div:first-child > p:first-child { font-size: 13px; }
    .article_list > ul > li > div:first-child > p:last-child { margin-top: 22px;}

    .article_list > ul > li > div:first-child > p > a {
        height: 20px;    
    }
    .article_list > ul > li > div:last-child {
        line-height: 17px; height: 50px;
    }

}
@media screen and (max-width:400px) {
    .article_list > ul > li { float: left; width: 100%; }
    .article_list > ul > li:first-child { width: 100%; margin-right: 0px; }
    .article_list > ul > li:last-child { margin-top: 10px; }
}

</code>