<?php
    if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
    include_once(G5_LIB_PATH.'/thumbnail.lib.php');
    // 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>

/* https://codepen.io/slimsmearlapp/pen/AyueF */
@charset "utf-8";
.flexbox{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /*align-items: space-between;*/
}    
    .flex-row{
        flex-direction: row;    
    }
    .flex-column{
        flex-direction: column;
    }
.paper-edge{
    
}
.title_box_top {padding:8px;border: 1px solid #676767; width:800px; font-size:14px; color:#007bd3}
.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;*/
}
.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%;
}
.paper-edge .wrap{
    
}
.paper-edge .wrap p{
    clear: both;
    /*border: 1px solid red;*/
    margin: 15px 0px 10px 0px;
}