Snippet 본문

썸네일 고정형

등록
이혜광 (등록일 : 2011/09/08    최종수정일 : 2013/05/29)
Type
PC
설명
. 썸네일 고정형 . 글줄임 없이 모두 노출
미리보기
Html
<ul class="list_thumb">
    <li>
        <div class="thumb_info">
        	<a href="#none" class="link_thumb">
        		<img src="/snippet/image?idx=161" width="130" height="150" class="thmub_img" alt="" />
        	</a>
        </div>
        <div class="cont_info">
         <div class="f_l">
             <strong class="tit_subject"><a href="#none" class="link_txt">제목</a></strong>
             <span class="txt_desc">
                 <a href="#none" class="link_txt">썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용</a>
             </span>
             <span class="txt_time">2011.05.19</span>
            </div>
        </div>
    </li>
    <li>
        <div class="thumb_info">
        	<a href="#none" class="link_thumb">
        		<img src="/snippet/image?idx=161" width="130" height="150" class="thmub_img" alt="" />
        	</a>
        </div>
        <div class="cont_info">
            <div class="f_l">
             <strong class="tit_subject"><a href="#none" class="link_txt">제목</a></strong>
             <span class="txt_desc">
                 <a href="#none" class="link_txt">썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용</a>
             </span>
             <span class="txt_time">2011.05.19</span>
            </div>
        </div>
    </li>
    <li>
        <div class="thumb_info">
        	<a href="#none" class="link_thumb">
        		<img src="/snippet/image?idx=161" width="130" height="150" class="thmub_img" alt="" />
        	</a>
        </div>
        <div class="cont_info">
            <div class="f_l">
             <strong class="tit_subject"><a href="#none" class="link_txt">제목</a></strong>
             <span class="txt_desc">
                 <a href="#none" class="link_txt">썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용</a>
             </span>
             <span class="txt_time">2011.05.19</span>
            </div>
        </div>
    </li>
    <li>
        <div class="thumb_info">
        	<a href="#none" class="link_thumb">
        		<img src="/snippet/image?idx=161" width="130" height="150" class="thmub_img" alt="" />
        	</a>
        </div>
        <div class="cont_info">
            <div class="f_l">
             <strong class="tit_subject"><a href="#none" class="link_txt">제목</a></strong>
             <span class="txt_desc">
                 <a href="#none" class="link_txt">썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용</a>
             </span>
             <span class="txt_time">2011.05.19</span>
            </div>
        </div>
    </li>
    <li>
        <div class="thumb_info">
        	<a href="#none" class="link_thumb">
        		<img src="/snippet/image?idx=162" width="130" height="150" class="thmub_img" alt="" />
        	</a>
        </div>
        <div class="cont_info">
            <div class="f_l">
             <strong class="tit_subject"><a href="#none" class="link_txt">제목</a></strong>
             <span class="txt_desc">
                 <a href="#none" class="link_txt">썸네일고정 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용 일반내용</a>
             </span>
             <span class="txt_time">2011.05.19</span>
            </div>
        </div>
    </li>
</ul>
CSS
.list_thumb {overflow:hidden;border-top:1px solid #ccc;border-bottom:1px solid #ccc}
.list_thumb li {float:left;width:100%;padding:10px 0;border-top:1px solid #e9e9e9}
.list_thumb .fst {border-top:0 none}
.list_thumb .thumb_info {float:left;width:130px;margin-right:10px;border:1px solid #e9e9e9}
.list_thumb .link_thumb {display:block}
.list_thumb .thmub_img {display:block}
.list_thumb .cont_info {overflow:hidden;padding-top:2px}
.list_thumb .tit_subject {display:block;font-size:15px;line-height:15px}
.list_thumb .tit_subject .link_tit {font-size:13px;line-height:15px;color:#333}
.list_thumb .txt_desc {display:block;margin-top:8px;font-size:12px;line-height:14px}
.list_thumb .txt_desc .link_txt {font-size:12px;line-height:14px;color:#666}
.list_thumb .txt_time {display:block;margin-top:10px;font-size:11px;line-height:13px;color:#aaa}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기