Snippet 본문

썸네일 세로나열형

등록
신예호 (등록일 : 2011/12/26    최종수정일 : 2013/03/28)
Type
Mobile
설명
썸네일이 세로로 나열된 리스트
미리보기
Html
<ul class="list_thumb">
	<li>
		<a href="#none" class="link_cont">
			<img src="/snippet/image?idx=229" class="thumb_img" width="94" height="94" alt="이미지정보">
			<strong class="cont_info">
				<span class="tit_subject">제목형 </span>
				<span class="txt_desc">썸네일 세로나열형</span>
			</strong>
			<span class="frame_g"></span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<img src="/snippet/image?idx=229" class="thumb_img" width="94" height="94" alt="이미지정보">
			<strong class="cont_info">
				<span class="tit_subject">제목형 </span>
				<span class="txt_desc">썸네일 세로나열형</span>
			</strong>
			<span class="frame_g"></span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<img src="/snippet/image?idx=229" class="thumb_img" width="94" height="94" alt="이미지정보">
			<strong class="cont_info">
				<span class="tit_subject">제목형 </span>
				<span class="txt_desc">썸네일 세로나열형</span>
			</strong>
			<span class="frame_g"></span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<img src="/snippet/image?idx=229" class="thumb_img" width="94" height="94" alt="이미지정보">
			<strong class="cont_info">
				<span class="tit_subject">제목형 </span>
				<span class="txt_desc">썸네일 세로나열형</span>
			</strong>
			<span class="frame_g"></span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<img src="/snippet/image?idx=229" class="thumb_img" width="94" height="94" alt="이미지정보">
			<strong class="cont_info">
				<span class="tit_subject">제목형 </span>
				<span class="txt_desc">썸네일 세로나열형</span>
			</strong>
			<span class="frame_g"></span>
		</a>
	</li>
	<li>
		<a href="#none" class="link_cont">
			<img src="/snippet/image?idx=229" class="thumb_img" width="94" height="94" alt="이미지정보">
			<strong class="cont_info">
				<span class="tit_subject">제목형 </span>
				<span class="txt_desc">썸네일 세로나열형</span>
			</strong>
			<span class="frame_g"></span>
		</a>
	</li>
</ul>
CSS
.list_thumb {overflow:hidden;padding:12px 8px 0 8px}
.list_thumb li {float:left;width:33.3%;padding-bottom:10px}
.list_thumb .link_cont {position:relative;display: block;width:94px;margin:0 auto}
.list_thumb .thumb_img {display:block}
.list_thumb .frame_g {position:absolute;top:0;left:0;width:92px;height:92px;border:1px solid #000;opacity:0.1}
.list_thumb .cont_info {display:block;padding-top:6px;font-size:12px;line-height:15px}
.list_thumb .cont_info .tit_artist {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.list_thumb .cont_info .txt_desc {display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:normal}

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