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" width="150" height="91" class="thumb_img" 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">텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.</a>
			</span>
			<span class="txt_time">2013.03.01</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" width="150" height="91" class="thumb_img" 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">텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.</a>
			</span>
			<span class="txt_time">2013.03.01</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" width="150" height="91" class="thumb_img" 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">텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.</a>
			</span>
			<span class="txt_time">2013.03.01</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" width="150" height="91" class="thumb_img" 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">텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.</a>
			</span>
			<span class="txt_time">2013.03.01</span>
		</div>
	</li>
	<li>
		<a href="#none" class="link_thumb"><img src="/snippet/image?idx=160" width="150" height="91" class="thumb_img" 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">텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.<br/>텍스트가 썸네일 하단으로 흐릅니다.</a>
			</span>
			<span class="txt_time">2013.03.01</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 .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_time {display:block;margin-top:10px;font-size:11px;line-height:13px;color:#aaa}

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