css 관련 이미지 효과 채택완료
너유
5년 전
조회 3,908
먼저 해당 스킨 공개해 주신 컬러님께 대단히 감사합니다.
http://web.zc.bz/gnu5/?skin=color_css3_effect_pic10">http://web.zc.bz/gnu5/?skin=color_css3_effect_pic10
해당 스킨 궁금사항이 좀 있어서요..
해당 스킨 먼저 글자 및 내용이 먼저 나오고 마우스에 올리면 이미지가
나오게끔 즉 거꾸로 구현 좀 하고 싶은데
소스를 어디를 어떻게 수정 해야 되는지요?
조언 좀 구합니다.
아무쪼록 추운 날씨에 건강 유의 하시길 바랍니다.
</p>
<p><?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');</p>
<p>$img_w = 230; // 이미지($img) 가로 크기
$img_h = 230; // 이미지($img) 세로 크기
?></p>
<p><style type="text/css"></p>
<p>.bs-example {
width:1000px;
position: relative;
padding: 45px 15px 15px;
margin: 0 auto;</p>
<p>}</p>
<p>.ih-item {
position: relative;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}</p>
<p>.ih-item,
.ih-item {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}</p>
<p>.ih-item a {
color: #333;
}</p>
<p>.ih-item a:hover {
text-decoration: none;
}</p>
<p>.ih-item img {
width: 100%;
height: 100%;
}</p>
<p>.ih-item.circle {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
}</p>
<p>.ih-item.circle .img {
position: relative;
width: 220px;
height: 220px;
border-radius: 50%;
}</p>
<p>.ih-item.circle .img:before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}</p>
<p>.ih-item.circle .img img {
border-radius: 50%;
}</p>
<p>.ih-item.circle .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}</p>
<p>.ih-item.square {
position: relative;
width: 316px;
height: 216px;
border: 8px solid #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}</p>
<p>.ih-item.square .info {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}</p>
<p>.ih-item.circle.effect {
-webkit-perspective: 900px;
-moz-perspective: 900px;
perspective: 900px;
}</p>
<p>.ih-item.circle.effect .img {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}</p>
<p>.ih-item.circle.effect.colored .info {
background: #1a4a72;
}</p>
<p>.ih-item.circle.effect .info {
background: #333333;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.35s ease-in-out 0.3s;
-moz-transition: all 0.35s ease-in-out 0.3s;
transition: all 0.35s ease-in-out 0.3s;
}</p>
<p>.ih-item.circle.effect .info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 12px;
margin: 0 30px;
padding: 55px 0 0 0;
height: 110px;
text-shadow: 0 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.3);
}</p>
<p>.ih-item.circle.effect .info p {
color: #bbb;
padding: 10px 5px;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}</p>
<p>.ih-item.circle.effect a:hover .img {
opacity: 0;
visibility: hidden;
}</p>
<p>.ih-item.circle.effect a:hover .info {
visibility: visible;
opacity: 1;
}</p>
<p>.ih-item.circle.effect.left_to_right .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}</p>
<p>.ih-item.circle.effect.left_to_right .info {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}</p>
<p>.ih-item.circle.effect.left_to_right a:hover .img {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}</p>
<p>.ih-item.circle.effect.left_to_right a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}</p>
<p>.ih-item.circle.effect.right_to_left .img {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}</p>
<p>.ih-item.circle.effect.right_to_left .info {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}</p>
<p>.ih-item.circle.effect.right_to_left a:hover .img {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
}</p>
<p>.ih-item.circle.effect.right_to_left a:hover .info {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
}</p>
<p>.ih-item.circle.effect.top_to_bottom .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}</p>
<p>.ih-item.circle.effect.top_to_bottom .info {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}</p>
<p>.ih-item.circle.effect.top_to_bottom a:hover .img {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}</p>
<p>.ih-item.circle.effect.top_to_bottom a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}</p>
<p>.ih-item.circle.effect.bottom_to_top .img {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
transform-origin: 50% 0;
}</p>
<p>.ih-item.circle.effect.bottom_to_top .info {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}</p>
<p>.ih-item.circle.effect.bottom_to_top a:hover .img {
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}</p>
<p>.ih-item.circle.effect.bottom_to_top a:hover .info {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
-o-transform: rotateX(0);
transform: rotateX(0);
}</p>
<p>.col-sm-6 {
float: left;
width: 25%;
height: 260px;
}</p>
<p></style></p>
<p><link rel="stylesheet" type="text/css" href="<?=$latest_skin_url?>/css/normalize.css"/></p>
<p><div style="width:100%; margin:0 auto;">
<div class="bs-example">
<div class="row">
<?php
for($i=0; $i<count($list); $i++){
$thumbs = get_list_thumbnail($bo_table, $list[$i]['wr_id'], $img_w, $img_h, false, true);
if($thumbs['src']) {
$img = $thumbs['src'];
}?> </p>
<p> <div class="col-sm-6">
<div class="ih-item circle effect left_to_right"><a href="<?=$list[$i]['href']?>">
<div class="img"><img src="<?=$img?>" alt="<?=$list[$i]['subject']?>"></div>
<div class="info">
<h3><?=$list[$i]['subject']?></h3>
<p><?php echo mb_strimwidth($list[$i]['wr_content'], '0', '75', '', 'utf-8');?></p>
</div>
</a></div>
</div>
<?}?>
</div>
</div>
</div></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
5년 전
원하시는 효과가 맞는지 모르겠지만 남겨 봅니다.
<style> ~ </style> 통째로 바꿔주세요
</p>
<p><style type="text/css"></p>
<p>.bs-example {</p>
<p> width:1000px;</p>
<p> position:relative;</p>
<p> padding:45px 15px 15px;</p>
<p> margin:0 auto;</p>
<p>}</p>
<p>.ih-item {</p>
<p> position:relative;</p>
<p> -webkit-transition:all 0.35s ease-in-out;</p>
<p> -moz-transition:all 0.35s ease-in-out;</p>
<p> transition:all 0.35s ease-in-out;</p>
<p>}</p>
<p>.ih-item,.ih-item {</p>
<p> -webkit-box-sizing:border-box;</p>
<p> -moz-box-sizing:border-box;</p>
<p> box-sizing:border-box;</p>
<p>}</p>
<p>.ih-item a {</p>
<p> color:#333;</p>
<p>}</p>
<p>.ih-item a:hover {</p>
<p> text-decoration:none;</p>
<p>}</p>
<p>.ih-item img {</p>
<p> width:100%;</p>
<p> height:100%;</p>
<p>}</p>
<p>.ih-item.circle {</p>
<p> position:relative;</p>
<p> width:220px;</p>
<p> height:220px;</p>
<p> border-radius:50%;</p>
<p>}</p>
<p>.ih-item.circle .img {</p>
<p> position:absolute;</p>
<p> top:0;</p>
<p> bottom:0;</p>
<p> left:0;</p>
<p> right:0;</p>
<p> text-align:center;</p>
<p> border-radius:50%;</p>
<p> -webkit-backface-visibility:hidden;</p>
<p> backface-visibility:hidden;</p>
<p>}</p>
<p>.ih-item.circle .img:before {</p>
<p> position:absolute;</p>
<p> display:block;</p>
<p> content:'';</p>
<p> width:100%;</p>
<p> height:100%;</p>
<p> border-radius:50%;</p>
<p> box-shadow:inset 0 0 0 16px rgba(255,255,255,0.6),0 1px 2px rgba(0,0,0,0.3);</p>
<p> -webkit-transition:all 0.35s ease-in-out;</p>
<p> -moz-transition:all 0.35s ease-in-out;</p>
<p> transition:all 0.35s ease-in-out;</p>
<p>}</p>
<p>.ih-item.circle .img img {</p>
<p> border-radius:50%;</p>
<p>}</p>
<p>.ih-item.circle .info {</p>
<p> position:relative;</p>
<p> width:220px;</p>
<p> height:220px;</p>
<p> border-radius:50%;</p>
<p>}</p>
<p>.ih-item.square {</p>
<p> position:relative;</p>
<p> width:316px;</p>
<p> height:216px;</p>
<p> border:8px solid #fff;</p>
<p> box-shadow:1px 1px 3px rgba(0,0,0,0.3);</p>
<p>}</p>
<p>.ih-item.square .info {</p>
<p> position:absolute;</p>
<p> top:0;</p>
<p> bottom:0;</p>
<p> left:0;</p>
<p> right:0;</p>
<p> text-align:center;</p>
<p> -webkit-backface-visibility:hidden;</p>
<p> backface-visibility:hidden;</p>
<p>}</p>
<p>.ih-item.circle.effect {</p>
<p> -webkit-perspective:900px;</p>
<p> -moz-perspective:900px;</p>
<p> perspective:900px;</p>
<p>}</p>
<p>.ih-item.circle.effect .img {</p>
<p> visibility:hidden;</p>
<p> opacity:0;</p>
<p> -webkit-transition:all 0.35s ease-in-out 0.3s;</p>
<p> -moz-transition:all 0.35s ease-in-out 0.3s;</p>
<p> transition:all 0.35s ease-in-out 0.3s;</p>
<p>}</p>
<p>.ih-item.circle.effect.colored .info {</p>
<p> background:#1a4a72;</p>
<p>}</p>
<p>.ih-item.circle.effect .info {</p>
<p> background:#333333;</p>
<p> visibility:visible;</p>
<p> opacity:1;</p>
<p> -webkit-transition:all 0.4s ease-out;</p>
<p> -moz-transition:all 0.4s ease-out;</p>
<p> transition:all 0.4s ease-out;</p>
<p>}</p>
<p>.ih-item.circle.effect .info h3 {</p>
<p> color:#fff;</p>
<p> text-transform:uppercase;</p>
<p> position:relative;</p>
<p> letter-spacing:2px;</p>
<p> font-size:12px;</p>
<p> margin:0 30px;</p>
<p> padding:55px 0 0 0;</p>
<p> height:110px;</p>
<p> text-shadow:0 0 1px white,0 1px 2px rgba(0,0,0,0.3);</p>
<p>}</p>
<p>.ih-item.circle.effect .info p {</p>
<p> color:#bbb;</p>
<p> padding:10px 5px;</p>
<p> margin:0 30px;</p>
<p> font-size:12px;</p>
<p> border-top:1px solid rgba(255,255,255,0.5);</p>
<p>}</p>
<p>.ih-item.circle.effect a:hover .img {</p>
<p> visibility:visible;</p>
<p> opacity:1;</p>
<p>}</p>
<p>.ih-item.circle.effect a:hover .info {</p>
<p> opacity:0;</p>
<p> visibility:hidden;</p>
<p>}</p>
<p>.ih-item.circle.effect.left_to_right .img {</p>
<p> -webkit-transform:rotateY(90deg);</p>
<p> -moz-transform:rotateY(90deg);</p>
<p> -ms-transform:rotateY(90deg);</p>
<p> -o-transform:rotateY(90deg);</p>
<p> transform:rotateY(90deg);</p>
<p> -webkit-transform-origin:0% 50%;</p>
<p> -moz-transform-origin:0% 50%;</p>
<p> -ms-transform-origin:0% 50%;</p>
<p> -o-transform-origin:0% 50%;</p>
<p> transform-origin:0% 50%;</p>
<p>}</p>
<p>.ih-item.circle.effect.left_to_right .info {</p>
<p> -webkit-transform:rotateY(0);</p>
<p> -moz-transform:rotateY(0);</p>
<p> -ms-transform:rotateY(0);</p>
<p> -o-transform:rotateY(0);</p>
<p> transform:rotateY(0);</p>
<p> -webkit-transform-origin:100% 50%;</p>
<p> -moz-transform-origin:100% 50%;</p>
<p> -ms-transform-origin:100% 50%;</p>
<p> -o-transform-origin:100% 50%;</p>
<p> transform-origin:100% 50%;</p>
<p>}</p>
<p>.ih-item.circle.effect.left_to_right a:hover .img {</p>
<p> -webkit-transform:rotateY(0);</p>
<p> -moz-transform:rotateY(0);</p>
<p> -ms-transform:rotateY(0);</p>
<p> -o-transform:rotateY(0);</p>
<p> transform:rotateY(0);</p>
<p>}</p>
<p>.ih-item.circle.effect.left_to_right a:hover .info {</p>
<p> -webkit-transform:rotateY(-90deg);</p>
<p> -moz-transform:rotateY(-90deg);</p>
<p> -ms-transform:rotateY(-90deg);</p>
<p> -o-transform:rotateY(-90deg);</p>
<p> transform:rotateY(-90deg);</p>
<p>}</p>
<p>.ih-item.circle.effect.right_to_left .img {</p>
<p> -webkit-transform:rotateY(0);</p>
<p> -moz-transform:rotateY(0);</p>
<p> -ms-transform:rotateY(0);</p>
<p> -o-transform:rotateY(0);</p>
<p> transform:rotateY(0);</p>
<p> -webkit-transform-origin:0% 50%;</p>
<p> -moz-transform-origin:0% 50%;</p>
<p> -ms-transform-origin:0% 50%;</p>
<p> -o-transform-origin:0% 50%;</p>
<p> transform-origin:0% 50%;</p>
<p>}</p>
<p>.ih-item.circle.effect.right_to_left .info {</p>
<p> -webkit-transform:rotateY(-90deg);</p>
<p> -moz-transform:rotateY(-90deg);</p>
<p> -ms-transform:rotateY(-90deg);</p>
<p> -o-transform:rotateY(-90deg);</p>
<p> transform:rotateY(-90deg);</p>
<p> -webkit-transform-origin:100% 50%;</p>
<p> -moz-transform-origin:100% 50%;</p>
<p> -ms-transform-origin:100% 50%;</p>
<p> -o-transform-origin:100% 50%;</p>
<p> transform-origin:100% 50%;</p>
<p>}</p>
<p>.ih-item.circle.effect.right_to_left a:hover .img {</p>
<p> -webkit-transform:rotateY(90deg);</p>
<p> -moz-transform:rotateY(90deg);</p>
<p> -ms-transform:rotateY(90deg);</p>
<p> -o-transform:rotateY(90deg);</p>
<p> transform:rotateY(90deg);</p>
<p>}</p>
<p>.ih-item.circle.effect.right_to_left a:hover .info {</p>
<p> -webkit-transform:rotateY(0);</p>
<p> -moz-transform:rotateY(0);</p>
<p> -ms-transform:rotateY(0);</p>
<p> -o-transform:rotateY(0);</p>
<p> transform:rotateY(0);</p>
<p>}</p>
<p>.ih-item.circle.effect.top_to_bottom .img {</p>
<p> -webkit-transform:rotateX(0);</p>
<p> -moz-transform:rotateX(0);</p>
<p> -ms-transform:rotateX(0);</p>
<p> -o-transform:rotateX(0);</p>
<p> transform:rotateX(0);</p>
<p> -webkit-transform-origin:50% 100%;</p>
<p> -moz-transform-origin:50% 100%;</p>
<p> -ms-transform-origin:50% 100%;</p>
<p> -o-transform-origin:50% 100%;</p>
<p> transform-origin:50% 100%;</p>
<p>}</p>
<p>.ih-item.circle.effect.top_to_bottom .info {</p>
<p> -webkit-transform:rotateX(-90deg);</p>
<p> -moz-transform:rotateX(-90deg);</p>
<p> -ms-transform:rotateX(-90deg);</p>
<p> -o-transform:rotateX(-90deg);</p>
<p> transform:rotateX(-90deg);</p>
<p> -webkit-transform-origin:50% 0;</p>
<p> -moz-transform-origin:50% 0;</p>
<p> -ms-transform-origin:50% 0;</p>
<p> -o-transform-origin:50% 0;</p>
<p> transform-origin:50% 0;</p>
<p>}</p>
<p>.ih-item.circle.effect.top_to_bottom a:hover .img {</p>
<p> -webkit-transform:rotateX(90deg);</p>
<p> -moz-transform:rotateX(90deg);</p>
<p> -ms-transform:rotateX(90deg);</p>
<p> -o-transform:rotateX(90deg);</p>
<p> transform:rotateX(90deg);</p>
<p>}</p>
<p>.ih-item.circle.effect.top_to_bottom a:hover .info {</p>
<p> -webkit-transform:rotateX(0);</p>
<p> -moz-transform:rotateX(0);</p>
<p> -ms-transform:rotateX(0);</p>
<p> -o-transform:rotateX(0);</p>
<p> transform:rotateX(0);</p>
<p>}</p>
<p>.ih-item.circle.effect.bottom_to_top .img {</p>
<p> -webkit-transform:rotateX(0);</p>
<p> -moz-transform:rotateX(0);</p>
<p> -ms-transform:rotateX(0);</p>
<p> -o-transform:rotateX(0);</p>
<p> transform:rotateX(0);</p>
<p> -webkit-transform-origin:50% 0;</p>
<p> -moz-transform-origin:50% 0;</p>
<p> -ms-transform-origin:50% 0;</p>
<p> -o-transform-origin:50% 0;</p>
<p> transform-origin:50% 0;</p>
<p>}</p>
<p>.ih-item.circle.effect.bottom_to_top .info {</p>
<p> -webkit-transform:rotateX(90deg);</p>
<p> -moz-transform:rotateX(90deg);</p>
<p> -ms-transform:rotateX(90deg);</p>
<p> -o-transform:rotateX(90deg);</p>
<p> transform:rotateX(90deg);</p>
<p> -webkit-transform-origin:50% 100%;</p>
<p> -moz-transform-origin:50% 100%;</p>
<p> -ms-transform-origin:50% 100%;</p>
<p> -o-transform-origin:50% 100%;</p>
<p> transform-origin:50% 100%;</p>
<p>}</p>
<p>.ih-item.circle.effect.bottom_to_top a:hover .img {</p>
<p> -webkit-transform:rotateX(-90deg);</p>
<p> -moz-transform:rotateX(-90deg);</p>
<p> -ms-transform:rotateX(-90deg);</p>
<p> -o-transform:rotateX(-90deg);</p>
<p> transform:rotateX(-90deg);</p>
<p>}</p>
<p>.ih-item.circle.effect.bottom_to_top a:hover .info {</p>
<p> -webkit-transform:rotateX(0);</p>
<p> -moz-transform:rotateX(0);</p>
<p> -ms-transform:rotateX(0);</p>
<p> -o-transform:rotateX(0);</p>
<p> transform:rotateX(0);</p>
<p>}</p>
<p>.col-sm-6 {</p>
<p> float:left;</p>
<p> width:25%;</p>
<p> height: 260px;</p>
<p>}</p>
<p></style></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인