Snippet 본문

썸네일 유동형

등록
(등록일 : 2011/09/08    최종수정일 : 2013/03/07)
Type
PC
설명
썸네일 노출 유무를 모두 대응하는 리스트
미리보기
Html
<ul class="list_thumb">
	<li class="fst">
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" class="thumb_img" width="150" height="91" alt="" /></a>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<span class="txt_desc"><a href="#none" class="link_txt">내용들</a></span>
			<span class="txt_append">부가텍스트</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" class="thumb_img" width="150" height="91" alt="" /></a>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<span class="txt_desc"><a href="#none" class="link_txt">내용들</a></span>
			<span class="txt_append">부가텍스트</span>
		</div>
	</li>
	<li>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<span class="txt_desc"><a href="#none" class="link_txt">내용들</a></span>
			<span class="txt_append">부가텍스트</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" class="thumb_img" width="150" height="91" alt="" /></a>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<span class="txt_desc"><a href="#none" class="link_txt">내용들</a></span>
			<span class="txt_append">부가텍스트</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" class="thumb_img" width="150" height="91" alt="" /></a>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<span class="txt_desc"><a href="#none" class="link_txt">내용들</a></span>
			<span class="txt_append">부가텍스트</span>
		</div>
	</li>
</ul>
CSS
.list_thumb {overflow:hidden;width:100%;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 .link_thumb {float:left;width:150px;margin-right:10px;border:1px solid #e9e9e9}
.list_thumb .thumb_img {display:block}
.list_thumb .cont_info {overflow:hidden;padding-top:2px}
.list_thumb .tit_subject {display:block;font-size:15px;line-height:17px}
.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_append {display:block;margin-top:10px;font-size:11px;line-height:13px;color:#aaa}

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