[CODE]
// add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨 add_stylesheet('', 0); $list_count = (is_array($list) && $list) ? count($list) : 0; $thumb_width = 250; $thumb_height = 250; ?>
//echo $img_content;
echo " // echo " ". $list[$i]['subject']. " echo "";
echo "";
}
if ($list_count == 0) { echo "게시물이 없습니다.";}
?>
";
echo "". $img_content. "".PHP_EOL;
".PHP_EOL;
이게 현재 제가 쓰고 있는 최근 게시물의 latest.skin.php 내용인데요 반응형 갤러리 형식입니다. 근데 이 이미지 위에 마우스를 올리면 게시물의 텍스트 내용이 보이게끔 하고 싶거든요. 코드를 찾다보니 아래와 같은 내용을 발견했습니다.
[CODE]
$set_value = explode("/","140/140/730"); $thumb_width = $set_value[0]; //썸네일 가로 크기 $thumb_height = $set_value[1]; //썸네일 세로 크기 $bottom_width = ($thumb_width +10 ) * $set_value[2] -10; //전체 가로 크기 ?>
if($thumb['src']) { $img_src = $thumb['src']; } else { $img_src = $noimg; } $img_alt = $thumb['alt'];
if($i>0 && ($i%$set_value[2]) == ($set_value[2] - 1)) { $li_class = ''; } else { $li_class = ' class="contt"'; } ?>
게시물이 없습니다.
[/CODE]
설치까지 해보니 잘 돌아가더라구요. 이걸 위쪽 제가 쓰는 최근게시물 쪽에 입히고 싶은데 방법이 없을까요? css 부분만 따오면 되지 않을까 해서 해봤더니 실패...
어렵지 않다면 도와주시면 감사하겠습니다. 그리고 아래 코드는 내용이 아니라 제목이 출력되게끔 되어있는데요 내용으로 출력하는 방식으로 변경해주시면 더 감사하겠습니다!
php
</strong></p>
<p><article class="paper-edge2 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='box'>";
echo "<div class='imageBx'>";
echo "<a href='". $list[$i]['href']. "'>". $img_content. "</a>".PHP_EOL;
//echo $img_content;
echo "</div>".PHP_EOL;
echo "<div class='contentBx'>";
//echo "<h2>". $list[$i]['subject']. "</h2>"; //제목
echo "<p>". cut_str($list[$i]['wr_content'], 30). "</p>"; //내용
echo "</div>";
echo "</div>";
}
if ($list_count == 0) { echo "게시물이 없습니다.";}
?>
</article></p>
<p><strong>
css
</strong></p>
<p>@charset "utf-8";</p>
<p>.flexbox{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
/*align-items: space-between;*/
}
.flex-row{
flex-direction: row;
}
.flex-column{
flex-direction: column;
}</p>
<p>.paper-edge2{
}</p>
<p>.paper-edge2 .box{
width: 210px;
height: 150px;
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;*/
}</p>
<p>.paper-edge2 .box: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);
}</p>
<p>.paper-edge2 .box: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-edge2 .box img{
width: 100%;
height: 100%;
}</p>
<p>.paper-edge2 .wrap{
}</p>
<p>.paper-edge2 .wrap p{
clear: both;
/*border: 1px solid red;*/
margin: 15px 0px 10px 0px;
} </p>
<p>.paper-edge2 .box .contentBx {
position: absolute;
top: 50%;
left: 50px;
right: 50px;
background: #fff;
transform: translateZ(20px) scaleY(0);
padding: 10px 15px;
trnsform-origin: top;
transition: 0.5s;
transform-style: preserve-3d;
}
.paper-edge2 .box:hover .contentBx {
transform: translateZ(50px) scaleY(1);
}</p>
<p><strong>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인