Snippet 본문

정의목록형

등록
신예호 (등록일 : 2011/12/26    최종수정일 : 2013/03/28)
Type
Mobile
설명
썸네일 리스트 + 정의 목록형
미리보기
Html
<ul class="list_thumb">
	<li class="fst">		
		<div class="thumb_info">
			<img src="/snippet/image?idx=229" height="94" width="94" alt="이미지정보">
			<span class="frame_g"></span>
		</div>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<dl class="info_data">
				<dt class="tit_base">작성자</dt>
				<dd class="txt_desc"><a href="#none" class="link_name">다음이</a></dd>
				<dt class="tit_base">작성일</dt>
				<dd class="txt_desc">2013.01.01</dd>
				<dt class="tit_base">조회수</dt>
				<dd class="txt_desc">1004</dd>
			</dl>
		</div>
	</li>
	<li>		
		<div class="thumb_info">
			<img src="/snippet/image?idx=229" height="94" width="94" alt="이미지정보">
			<span class="frame_g"></span>
		</div>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<dl class="info_data">
				<dt class="tit_base">작성자</dt>
				<dd class="txt_desc"><a href="#none" class="link_name">다음이</a></dd>
				<dt class="tit_base">작성일</dt>
				<dd class="txt_desc">2013.01.01</dd>
				<dt class="tit_base">조회수</dt>
				<dd class="txt_desc">1004</dd>
			</dl>
		</div>
	</li>
	<li>		
		<div class="thumb_info">
			<img src="/snippet/image?idx=229" height="94" width="94" alt="이미지정보">
			<span class="frame_g"></span>
		</div>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<dl class="info_data">
				<dt class="tit_base">작성자</dt>
				<dd class="txt_desc"><a href="#none" class="link_name">다음이</a></dd>
				<dt class="tit_base">작성일</dt>
				<dd class="txt_desc">2013.01.01</dd>
				<dt class="tit_base">조회수</dt>
				<dd class="txt_desc">1004</dd>
			</dl>
		</div>
	</li>
	<li>		
		<div class="thumb_info">
			<img src="/snippet/image?idx=229" height="94" width="94" alt="이미지정보">
			<span class="frame_g"></span>
		</div>
		<div class="cont_info">
			<strong class="tit_subject"><a href="#none" class="link_tit">제목형</a></strong>
			<dl class="info_data">
				<dt class="tit_base">작성자</dt>
				<dd class="txt_desc"><a href="#none" class="link_name">다음이</a></dd>
				<dt class="tit_base">작성일</dt>
				<dd class="txt_desc">2013.01.01</dd>
				<dt class="tit_base">조회수</dt>
				<dd class="txt_desc">1004</dd>
			</dl>
		</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 .thumb_info {overflow:hidden;float:left;position:relative;width:94px;height:94px;margin:3px 11px 0 0}
.list_thumb .thumb_info .frame_g {position:absolute;top:0;left:0;width:92px;height:92px;border:1px solid #000;opacity:0.1}
.list_thumb .cont_info {float:left}
.list_thumb .cont_info .link_tit {font-size:15px;line-height:17px;color:#333}
.list_thumb .cont_info .info_data {overflow:hidden;padding:4px 0;font-size:13px;line-height:18px}
.list_thumb .cont_info .tit_base {float:left;width:50px;color:#555}
.list_thumb .cont_info .txt_desc {overflow:hidden;color:#000}
.list_thumb .cont_info .link_name {color:#000;text-decoration:underline}

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