Snippet 본문

썸네일 세로나열형

등록
(등록일 : 2011/09/08    최종수정일 : 2013/03/11)
Type
PC
설명
썸네일이 세로로 나열된 리스트
미리보기
Html
<div class="thumb_comm">
	<ul class="list_thumb">
		<li>
			<a href="#none" class="link_thumb"><img src="/snippet/image?idx=161" class="thumb_img" width="130" height="150" 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_time">2013.03.01 18:00</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb"><img src="/snippet/image?idx=161" class="thumb_img" width="130" height="150" 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_time">2013.03.01 18:00</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb"><img src="/snippet/image?idx=161" class="thumb_img" width="130" height="150" 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_time">2013.03.01 18:00</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb"><img src="/snippet/image?idx=161" class="thumb_img" width="130" height="150" 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_time">2013.03.01 18:00</span>
			</div>
		</li>
	</ul>
</div>
CSS
.list_thumb {overflow:hidden}
.list_thumb li {float:left;width:132px;padding-right:20px}
.list_thumb .link_thumb {display:block;border:1px solid #e9e9e9}
.list_thumb .thumb_img {display:block}
.list_thumb .tit_subject {display:block;margin-top:10px}
.list_thumb .tit_subject .link_tit {font-weight:bold;font-size:12px;line-height:14px;color:#333}
.list_thumb .txt_desc {display:block;margin-top:8px}
.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 ] 바로가기