최신글 갤러리가 깨집니다. 채택완료

<?php

    if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

    include_once(G5_LIB_PATH.'/thumbnail.lib.php');</span></p>

<p><span style="font-size:12pt;">    // add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨

    add_stylesheet('<link rel="stylesheet" href="'.$latest_skin_url.'/style.css">', 0);

    $list_count = (is_array($list) && $list) ? count($list) : 0;

    $thumb_width = 210;

    $thumb_height = 150;

?>

<div class="title_box_top"><b>코믹 갤러리</b></div>

<article class="paper-edge flexbox">

    <?php    

    for ($i=0; $i<$list_count; $i++) {

        $thumb = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $thumb_width, $thumb_height, false, true);        

        if($thumb['src']) {

            $img = $thumb['src'];

        } else {

            $img = G5_IMG_URL.'/no_img.png';

            $thumb['alt'] = '이미지가 없습니다.';

        }

        $img_content = '<img src="'.$img.'" alt="'.$thumb['alt'].'" >';

        echo "<div class='wrap'>";

        echo "<div class='edge'>";        

        echo "<a href='". $list[$i]['href']. "'>". $img_content. "</a>".PHP_EOL;

        //echo $img_content;

        echo "</div>".PHP_EOL;

        echo "<p class='aopoco'>". $list[$i]['subject']. "</p>";

        echo "</div>";    

    }

    if ($list_count == 0) { echo "게시물이 없습니다.";}

    ?>    

</article>

/* <a href="https://codepen.io/slimsmearlapp/pen/AyueF" target="_blank" rel="noopener noreferrer">https://codepen.io/slimsmearlapp/pen/AyueF</a> */

@charset "utf-8";</span></p>

<p><span style="font-size:12pt;">.flexbox{

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-start;

    /*align-items: space-between;*/

}    

    .flex-row{

        flex-direction: row;    

    }

    .flex-column{

        flex-direction: column;

    }</span></p>

<p><span style="font-size:12pt;">.paper-edge{

    

}</span></p>

<p><span style="font-size:12pt;">.title_box_top {padding:8px;border: 1px solid #676767; width:800px; font-size:14px; color:#007bd3}</span></p>

<p><span style="font-size:12pt;">.paper-edge .edge{

    width: 177px;

    height: 135px;

    padding: 10px;

    border: 1px solid #ddd;

    background-size: cover;

    background-clip: content-box;

    background-color: #eeeef0;

    box-sizing: border-box;

    position: relative;

    margin: 10px;

    text-align: center;

    /*margin-bottom: 10px;*/

}</span></p>

<p><span style="font-size:12pt;">.paper-edge .edge:after {

    content: "";

    display: block;

    position: absolute;

    border: 50px solid transparent;

    border-bottom: 50px solid #fefefe;

    bottom: -60px;

    right: -65px;

    box-shadow: 0px 7px 6px -9px black;

    transform: rotate(135deg);

}

.aopoco{text-align: center;}

.paper-edge .edge:before {

    content: "";

    display: block;

    position: absolute;

    border: 50px solid transparent;

    border-top: 50px solid #fefefe;

    top: -60px;

    left: -65px;

    box-shadow: 0px -7px 6px -9px black;

    transform: rotate(135deg);

}

.paper-edge .edge img{    

    width: 100%;

    height: 100%;

}</span></p>

<p><span style="font-size:12pt;">.paper-edge .wrap{

    

}</span></p>

<p><span style="font-size:12pt;">.paper-edge .wrap p{

    clear: both;

    /*border: 1px solid red;*/

    margin: 15px 0px 10px 0px;

}