¼Ò½ºÆÄÀÏ

1. style.css ¾Æ¹«µ¥³ª ºÙ¿©³ÖÀ¸¼¼¿ä

¸Ç ÇÏ´Ü¿¡ ºÙ¿©³ÖÀ¸¼Åµµ µË´Ï´Ù.


/* fixed_img_col */
.fixed_img_col .hx{margin:0;background:#035e4c;padding:6px 10px;font-size:15px;line-height:normal;color:#fff;margin-top:5px;/*@title-font-family=font-family:*/ font-family: Verdana,Malgun Gothic,nanumgothic,sans-serif /*@*/;}
.fixed_img_col .hx em{color:#fff;font-size:11px;font-style:normal}
.fixed_img_col ul{overflow:hidden;position:relative;margin:0;padding:0;border:1px solid #ddd;border-left:0;border-right:0;font-size:12px;font-family:Tahoma, Geneva, sans-serif;list-style:none;*zoom:1}
.fixed_img_col ul:after{display:block;clear:both;content:""}
.fixed_img_col li{overflow:hidden;float:left;position:relative;top:1px;width:320px;padding-left:15px;height:260px;border-bottom:1px solid #eee}
.fixed_img_col li.odd{padding-left:0}
.fixed_img_col .thumb{display:block;overflow:hidden;position:relative;width:318px;height:180px;background:#eee;color:#666;line-height:180px;text-align:center;white-space:nowrap;border:1px solid #e7e5e6}
.fixed_img_col .thumb img{display:block;width:318px;height:180px;border:0}
.fixed_img_col a{display:block;width:320px;margin:0 auto;padding:20px 0 0 0;text-decoration:none;cursor:pointer}
.fixed_img_col a strong{display:inline-block;margin:8px 0 0 0;color:#333}
.fixed_img_col p{width:320px;margin:0 auto;font-size:11px;color:#767676}
.fixed_img_col a:hover strong,
.fixed_img_col a:active strong,
.fixed_img_col a:focus strong{text-decoration:underline}
.fixed_img_col a:hover .thumb,
.fixed_img_col a:active .thumb,
.fixed_img_col a:focus .thumb{border:1px solid #999}
.fixed_img_col .thumb .dno{display:none}
.fixed_img_col .w180 li{width:180px;padding-left:10px;height:165px}
.fixed_img_col .w180 .thumb{width:172px;height:90px}
.fixed_img_col .w180 .thumb img{width:172px;height:90px}
.fixed_img_col .w180 a{width:180px}




2. skin.html¿¡¼­ <s_list_rep> Ä«Å×°í¸® ºÎºÐÀÇ <ol> ¹Ù·ÎÀ§¿¡ ºÙ¿©³ÖÀ¸¼¼¿ä.

<div class="fixed_img_col">
<h1 class="hx">[ ##_list_conform_## ] <em>+[ ##_list_count_## ]</em></h1>
<ul>
<s_list_rep>
        <li>
                <a href="[ ##_list_rep_link_## ]"><span class="thumb"><img src="img/@thumbSquare.jpg" alt="" class="dno"><span id="str">Loading..</span></span> <strong>[ ##_list_rep_title_## ]<span class="cmt">[ ##_list_rep_rp_cnt_## ]</span></strong></a>
                <p>[ ##_list_rep_regdate_## ]</p>
        </li>
</s_list_rep>
</ul>
</div>



3. skin.html¿¡¼­ body ¿Í /body Áß°£ ¾Æ¹«µ¥³ª ºÙ¿©³ÖÀ¸¼¼¿ä. Àü body ¹Ù·Î ¾Æ·¡¿¡ ºÙ¿´½À´Ï´Ù.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var col = 3;
var width = 320;
</script>
<script src="http://cfs.tistory.com/custom/blog/149/1491216/skin/images/ygal.js"></script>