Snippet 본문

말풍선형 - 썸네일 리스트

등록
박민지 (등록일 : 2012/04/11    최종수정일 : 2013/05/29)
Type
PC
설명
. 말풍선 글 텍스트 길이에 따라 유동적 . 썸네일이 우측인 경우 other 클래스 추가
미리보기
Html
<div class="thumb_comm">
	<ul class="list_thumb">
		<li>
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=159" width="57" height="57" class="thumb_img" alt="이미지정보" />
				<span class="frame_g"></span>
			</a>
			<div class="cont_info">
				<span class="txt_talk">
					<a href="#none" class="link_txt">한명숙 “야권연대 위해 이정희 만날 것”, 이정희 “이번주 중반까지 끝내야”</a>
					<span class="img_sample ico_arrow"></span>
				</span>
				<span class="info_append">
					<a href="#none" class="link_user">김대식</a>
					<span class="txt_bar"> | </span>
					<a href="#none" class="link_district">서울은평을</a>
					<span class="txt_bar"> | </span>
					<span class="time_g">2012.03.04. 12:00</span>
				</span>
			</div>
		</li>
		<li class="item_other"><!-- other형 -->
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=159" width="57" height="57" class="thumb_img" alt="이미지정보" />
				<span class="frame_g"></span>
			</a>
			<div class="cont_info">
				<span class="txt_talk">
					<a href="#none" class="link_txt">CNK "본격생산"</a>
					<span class="img_sample ico_arrow"></span>
				</span>
				<span class="info_append">
					<a href="#none" class="link_user">김대식</a>
					<span class="txt_bar"> | </span>
					<a href="#none" class="link_district">서울은평을</a>
					<span class="txt_bar"> | </span>
					<span class="time_g">2012.03.04. 12:00</span>
				</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=159" width="57" height="57" class="thumb_img" alt="이미지정보" />
				<span class="frame_g"></span>
			</a>
			<div class="cont_info">
				<span class="txt_talk">
					<a href="#none" class="link_txt">한명숙 “야권연대 위해 이정희 만날 것”, 이정희 “이번주 중반까지 끝내야”</a>
					<span class="img_sample ico_arrow"></span>
				</span>
				<span class="info_append">
					<a href="#none" class="link_user">김대식</a>
					<span class="txt_bar"> | </span>
					<a href="#none" class="link_district">서울은평을</a>
					<span class="txt_bar"> | </span>
					<span class="time_g">2012.03.04. 12:00</span>
				</span>
			</div>
		</li>
		<li class="item_other"><!-- other형 -->
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=159" width="57" height="57" class="thumb_img" alt="이미지정보" />
				<span class="frame_g"></span>
			</a>
			<div class="cont_info">
				<span class="txt_talk">
					<a href="#none" class="link_txt">한명숙 “야권연대 위해 이정희 만날 것”, 이정희 “이번주 중반까지 끝내야”</a>
					<span class="img_sample ico_arrow"></span>
				</span>
				<span class="info_append">
					<a href="#none" class="link_user">김대식</a>
					<span class="txt_bar"> | </span>
					<a href="#none" class="link_district">서울은평을</a>
					<span class="txt_bar"> | </span>
					<span class="time_g">2012.03.04. 12:00</span>
				</span>
			</div>
		</li>
		<li class="item_other"><!-- other형 -->
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=159" width="57" height="57" class="thumb_img" alt="이미지정보" />
				<span class="frame_g"></span>
			</a>
			<div class="cont_info">
				<span class="txt_talk">
					<a href="#none" class="link_txt">CNK "본격생산" CNK "본격생산" CNK "본격생산"</a>
					<span class="img_sample ico_arrow"></span>
				</span>
				<span class="info_append">
					<a href="#none" class="link_user">김대식</a>
					<span class="txt_bar"> | </span>
					<a href="#none" class="link_district">서울은평을</a>
					<span class="txt_bar"> | </span>
					<span class="time_g">2012.03.04. 12:00</span>
				</span>
			</div>
		</li>
	</ul>
</div>
CSS
/* Background Image */
.img_sample {background:url(/snippet/image?idx=283) no-repeat}

/* 공통클래스 */
.frame_g {display:block;position:absolute;top:0;left:0;border:1px solid #000;opacity:0.1;filter:alpha(opacity=10);cursor:pointer;z-index:10}

/* [list_thumb] 말풍선형 목록 (섬네일+말풍선형태의 텍스트) */
.thumb_comm {position:relative;width:590px;height:300px;padding:0 20px 0 30px;clear:both}
.list_thumb {overflow:hidden;width:100%}
.list_thumb li {overflow:hidden;float:left;width:461px;padding-bottom:10px}
.list_thumb .link_thumb {float:left;overflow:hidden;position:relative;width:57px;height:57px;margin-right:6px;cursor:pointer}
.link_thumb .thumb_img {display:block}
.list_thumb .link_thumb .frame_g {width:55px;height:55px}
.list_thumb .cont_info {float:left;width:385px;padding-left:9px}
.list_thumb .txt_talk {display:inline;float:left;position:relative;padding:9px 15px 8px 15px;border:1px solid #c1c2c6;background-color:#fff}
.list_thumb .txt_talk .link_txt {font-size:14px;color:#333641;font-weight:bold;letter-spacing:-1px}
.list_thumb .txt_talk .txt {display:block;}
.list_thumb .txt_talk .img_sample {position:absolute;top:14px;width:10px;height:9px}
.list_thumb .txt_talk .ico_arrow {left:-10px;background-position:0 0}
.list_thumb .info_append {display:block;padding-top:4px;font-size:11px;line-height:15px;color:#75798f;letter-spacing:-1px;clear:both}
.list_thumb .txt_bar {padding:0 3px 0 2px;color:#c1c2c6}
.list_thumb .link_district {color:#75798f}
.list_thumb .time_g {font-size:10px;font-family:Tahoma;letter-spacing:0}
.list_thumb .info_append .link_user {font-weight:bold;color:#66697c}
.list_thumb .item_other {padding:0 63px 10px 46px}
.list_thumb .item_other .link_thumb {float:right;margin:0 0 0 6px}
.list_thumb .item_other .cont_info {float:right;padding:0 9px 0 0}
.list_thumb .item_other .txt_talk {float:right}
.list_thumb .item_other .info_append {overflow:hidden;text-align:right}
.list_thumb .item_other .link_user {float:right}
.list_thumb .item_other .link_district {float:right}
.list_thumb .item_other .time_g {float:right}
.list_thumb .item_other .txt_bar {float:right;padding:0 4px}
.list_thumb .item_other .ico_arrow {left:auto;right:-10px;background-position:0 -25px}

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