Snippet 본문

썸네일 + 제목형

등록
(등록일 : 2011/09/08    최종수정일 : 2013/03/11)
Type
PC
설명
썸네일 + 제목 노출형
미리보기
Html
<div class="thumb_comm">
	<ul class="list_thumb">
		<li>
			<div class="thumb_info">
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=161" width="130" height="150" alt="" />
					<span class="bg_figcaption"></span>
					<span class="tit_figcaption">이미지 텍스트</span>
				</a>
			</div>
		</li>
		<li>
			<div class="thumb_info">
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=161" width="130" height="150" alt="" />
					<span class="bg_figcaption"></span>
					<span class="tit_figcaption">이미지 텍스트</span>
				</a>
			</div>
		</li>
		<li>
			<div class="thumb_info">
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=161" width="130" height="150" alt="" />
					<span class="bg_figcaption"></span>
					<span class="tit_figcaption">이미지 텍스트</span>
				</a>
			</div>
		</li>
		<li>
			<div class="thumb_info">
				<a href="#none" class="link_thumb">
					<img src="/snippet/image?idx=161" width="130" height="150" alt="" />
					<span class="bg_figcaption"></span>
					<span class="tit_figcaption">이미지 텍스트</span>
				</a>
			</div>
		</li>
	</ul>
</div>
CSS
.list_thumb {overflow:hidden;}
.list_thumb li {float:left;width:132px;padding-right:20px}
.list_thumb .thumb_info {overflow:hidden;position:relative;width:130px;height:150px;border:1px solid #e9e9e9}
.list_thumb .link_thumb {display:block;height:100%}
.list_thumb .bg_figcaption {position:absolute;top:125px;left:0;width:100%;height:25px;background-color:#000;filter:alpha(opacity:50);opacity:0.5}
.list_thumb .tit_figcaption {position:absolute;top:130px;left:0;width:100%;font-size:12px;color:#fff;line-height:14px;text-align:center}

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