Snippet 본문

말풍선형 - 썸네일 리스트

등록
민소라, 신예호 (등록일 : 2013/03/07    최종수정일 : 2013/05/29)
Type
Mobile
설명
말픙선형의 썸네일 리스트
미리보기
Html
<div class="thumb_comm scroll_g ">
	<ul class="list_thumb">
		<li>
			<a href="#none" class="link_cmt">
				<img src="http://snippet.ftdev.daum.net/rest/image/load.php?idx=161" width="50" height="50" class="thumb_cmt" alt="이미지대체내용">
				<span class="frame_g"></span>
				<strong class="tit_writer">아무개</strong>
			</a>
			<p class="desc_cmt">
				<a href="#none" class="link_bubble">
					<span class="txt_desc">댓글나오는곳 댓글나오는곳 댓글나오는곳~</span>
					<span class="txt_time">50분 전 제주에서</span>
					<span class="ico_arr ico_arrleft"></span>
				</a>
			</p>
		</li>
		<li class="talk_right">
			<a href="#none" class="link_cmt">
				<img src="http://snippet.ftdev.daum.net/rest/image/load.php?idx=161" width="50" height="50" class="thumb_cmt" alt="이미지대체내용">
				<span class="frame_g"></span>
				<strong class="tit_writer">아무개</strong>
			</a>
			<p class="desc_cmt">
				<a href="#none" class="link_bubble">
					<span class="txt_desc">댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳</span>
					<span class="txt_time">50분 전 제주에서</span>
					<span class="ico_arr ico_arright"></span>
				</a>
			</p>
		</li>
		<li>
			<a href="#none" class="link_cmt">
				<img src="http://snippet.ftdev.daum.net/rest/image/load.php?idx=161" width="50" height="50" class="thumb_cmt" alt="이미지대체내용">
				<span class="frame_g"></span>
				<strong class="tit_writer">아무개</strong>
			</a>
			<p class="desc_cmt">
				<a href="#none" class="link_bubble">
					<span class="txt_desc">댓글나오는곳 댓글나오는곳 댓글나오는곳~</span>
					<span class="txt_time">50분 전 제주에서</span>
					<span class="ico_arr ico_arrleft"></span>
				</a>
			</p>
		</li>
		<li class="talk_right">
			<a href="#none" class="link_cmt">
				<img src="http://snippet.ftdev.daum.net/rest/image/load.php?idx=161" width="50" height="50" class="thumb_cmt" alt="이미지대체내용">
				<span class="frame_g"></span>
				<strong class="tit_writer">아무개</strong>
			</a>
			<p class="desc_cmt">
				<a href="#none" class="link_bubble">
					<span class="txt_desc">댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳 댓글나오는곳</span>
					<span class="txt_time">50분 전 제주에서</span>
					<span class="ico_arr ico_arright"></span>
				</a>
			</p>
		</li>
		<li>
			<a href="#none" class="link_cmt">
				<img src="http://snippet.ftdev.daum.net/rest/image/load.php?idx=161" width="50" height="50" class="thumb_cmt" alt="이미지대체내용">
				<span class="frame_g"></span>
				<strong class="tit_writer">아무개</strong>
			</a>
			<p class="desc_cmt">
				<a href="#none" class="link_bubble">
					<span class="txt_desc">댓글나오는곳 댓글나오는곳 댓글나오는곳~</span>
					<span class="txt_time">50분 전 제주에서</span>
					<span class="ico_arr ico_arrleft"></span>
				</a>
			</p>
		</li>
	</ul>
</div>
CSS
.list_thumb li {overflow:hidden;padding:11px 8px 10px}
.list_thumb .link_cmt {display:block;float:left;position:relative;width:50px}
.list_thumb .thumb_cmt {vertical-align:top}
.list_thumb .link_cmt .tit_writer {display:block;margin-top:5px;font-size:12px;color:#000;line-height:14px;text-align:center}
.list_thumb .frame_g {position:absolute;top:0;left:0;width:48px;height:48px;border:1px solid rgba(0,0,0,0.1)}
.list_thumb .desc_cmt {overflow:hidden;font-weight:bold;color:#000}
.list_thumb .desc_cmt .link_bubble {display:inline-block;position:relative;margin-left:13px;padding:8px 8px 8px 10px;border:1px solid #cecece;border-radius:4px;font-size:14px;color:#333;line-height:15px;background-color:#fff;letter-spacing:-1px}
.list_thumb .desc_cmt .txt_time {display:block;margin-top:3px;font-weight:normal;font-size:12px;color:#8e8d8d}
.list_thumb .desc_cmt .txt_desc {display:inline-block;line-height:18px;text-align:left}
.list_thumb .box_info {display:block;margin:3px 11px 0 11px;font-size:12px;color:#9f9f9f;line-height:16px}
.list_thumb .ico_arr {position:absolute;top:36%;font-size:0;line-height:0}
.list_thumb .ico_arr::before {content:"";position:absolute;width:0;height:0;border:solid transparent;pointer-events:none}
.list_thumb .ico_arr::after {content:"";position:absolute;width:0;height:0;border:solid transparent;pointer-events:none}
.list_thumb .ico_arrleft {left:0}
.list_thumb .ico_arrleft::before {left:-18px;margin-top:-4px;border-right-color:#cecece;border-width:6px 9px}
.list_thumb .ico_arrleft::after {left:-16px;margin-top:-3px;border-right-color:#fff;border-width:5px 8px}
.list_thumb .ico_arright {right:0}
.list_thumb .ico_arright::before {right:-18px;margin-top:-4px;border-left-color:#cecece;border-width:6px 9px}
.list_thumb .ico_arright::after {right:-16px;margin-top:-3px;border-left-color:#fff;border-width:5px 8px}

/* talk_right */
.thumb_comm .talk_right .link_cmt {float:right}
.thumb_comm .talk_right .desc_cmt .link_bubble {float:right;margin:0 13px 0 0}
.thumb_comm .talk_right .desc_cmt .inner_desc {float:right;margin-right:13px}

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