Snippet 본문

댓글 리스트

등록
박민지 (등록일 : 2011/09/26    최종수정일 : 2013/03/08)
Type
Mobile
설명
. 상단 - 본문 제목 및 정보 위치. . 하단 - 기본형 댓글 리스트 . 작성자가 본인일 경우 삭제버튼 제공
미리보기
Html
<div class="cmt_comm">
	<div class="cmt_tit">
		<h3 class="tit_cmt">제목입니다.</h3>
		<div class="info_append">
			<span class="txt_info">출처<span class="txt_bar"> | </span>2013.01.01</span>
			<span class="txt_click">조회 12345<span class="txt_bar"> | </span><span class="img_sample ico_recom">추천수</span>12345</span>
		</div>
		<a href="#none" class="bround btn_view">본문보기</a>
	</div>

	<div class="sort_link">
		<a href="#none" class="link_txt">댓글 <span class="txt_num">8205</span></a><span class="txt_bar"> | </span><a href="#none" class="link_txt">댓글쓰기</a>
	</div>

	<strong class="screen_out">전체 댓글</strong>
	<div class="list_cmt">
		<div class="cmt_body">
			<p class="txt_desc">댓글 내용입니다. 댓글 내용입니다. 댓글 내용입니다. 댓글 내용입니다. 댓글 내용입니다.</p>
			<span class="info_append">아무개님<span class="txt_bar"> | </span>20:55</span>
			<button type="button" class="bround btn_delete"><span class="img_sample ico_delete"></span> 삭제</button>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_body">
			<p class="txt_desc">댓글 내용입니다. 댓글 내용입니다.</p>
			<span class="info_append">아무개님<span class="txt_bar"> | </span>20:55</span>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_body">
			<p class="txt_desc">댓글 내용입니다. 댓글 내용입니다. 댓글 내용입니다. 댓글 내용입니다. 댓글 내용입니다.</p>
			<span class="info_append">아무개님<span class="txt_bar"> | </span>20:55</span>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_body">
			<p class="txt_desc">댓글 내용입니다. 댓글 내용입니다.</p>
			<span class="info_append">아무개님<span class="txt_bar"> | </span>20:55</span>
			<button type="button" class="bround btn_delete"><span class="img_sample ico_delete"></span> 삭제</button>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_body">
			<p class="txt_desc">댓글 내용입니다. 댓글 내용입니다.</p>
			<span class="info_append">아무개님<span class="txt_bar"> | </span>20:55</span>
		</div>
	</div>
	<div class="fold_cmt">
		<a href="#none" class="link_fold">댓글 더보기 <span class="img_sample ico_more"></span></a>
		<a href="#none" class="link_top"><span class="img_sample ico_top"></span> 맨위로</a>
	</div>
</div>
CSS
/* border round 3px button style */
.bround {display:inline-block;padding:0;border:1px solid;border-radius:3px;-webkit-border-radius:3px;font-size:12px;text-decoration:none;text-align:center}

/* background image */
.img_sample {background:url(/snippet/image?idx=39) no-repeat}

/* high resolution image */
/* ratio 1.5 */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.img_sample {background-image:url(/snippet/image?idx=40);background-size:22px 26px;-webkit-background-size:22px 26px}
}
/* ratio 2 */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.img_sample {background-image:url(/snippet/image?idx=168);background-size:22px 26px;-webkit-background-size:22px 26px}
}

.cmt_comm .cmt_tit {overflow:hidden;padding:12px 12px 8px 12px;border-bottom:1px solid #e7e4df}
.cmt_tit .tit_cmt {font-size:15px;line-height:18px;color:#010101}
.cmt_tit .info_append {float:left;width:76%;margin-top:5px;font-size:12px;color:#888;clear:both}
.cmt_tit .txt_bar {padding-right:1px;color:#B6B6B6}
.cmt_tit .txt_info {display:block}
.cmt_tit .ico_recom {display:inline-block;overflow:hidden;width:12px;height:14px;background-position:0 0;text-indent:-9999px}
.cmt_tit .btn_view {float:right;width:69px;height:25px;margin-top:5px;border-color:#bbb;font-size:13px;line-height:25px;color:#333;background-color:#f9f9f9;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #fff, #f5f5f5);background-image:-o-linear-gradient(top, #fff, #f5f5f5);background-image:linear-gradient(to bottom, #fff, #f5f5f5);-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(255,255,255,0.7);box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(255,255,255,0.7)}

.cmt_comm .sort_link {height:38px;padding:0 7px;border-bottom:1px solid #eaeaea;line-height:38px;background-color:#f7f7f7}
.sort_link .link_txt {display:inline-block;height:38px;padding:0 5px;color:#000}
.sort_link .txt_bar {color:#B6B6B6}
.sort_link .txt_num {font-size:13px;color:#c00}

.cmt_comm .list_cmt {position:relative;width:100%;border-bottom:1px solid #eaeaea}
.list_cmt .cmt_body {padding:12px 12px 11px;font-size:12px;color:#999}
.list_cmt .txt_desc {display:block;padding-bottom:4px;font-size:14px;line-height:18px;color:#000}
.list_cmt .txt_bar {padding-left:1px;font-size:14px;color:#B6B6B6}
.list_cmt .btn_delete {position:absolute;bottom:7px;right:12px;width:51px;height:27px;border-color:#bbb;font-size:13px;line-height:1;color:#333;background-color:#f9f9f9;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f5f5f5));background-image:-moz-linear-gradient(top, #fff, #f5f5f5);background-image:-o-linear-gradient(top, #fff, #f5f5f5);background-image:linear-gradient(to bottom, #fff, #f5f5f5);-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(255,255,255,0.7);box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(255,255,255,0.7)}
.list_cmt .ico_delete {display:inline-block;overflow:hidden;width:7px;height:7px;margin-top:3px;background-position:-15px 0;vertical-align:top}

.cmt_comm .fold_cmt {position:relative;width:100%;height:38px;border-bottom:1px solid #eaeaea;font-weight:bold;font-size:12px;color:#666;background-color:#f7f7f7;letter-spacing:-1px}
.fold_cmt .link_fold {display:block;padding:13px 0 11px 16px;margin-right:71px;font-size:14px;line-height:1;color:#000;text-decoration:none}
.fold_cmt .ico_more {display:inline-block;overflow:hidden;width:7px;height:6px;margin:4px 0 0 3px;background-position:0 -15px;vertical-align:top}
.fold_cmt .link_top {display:block;position:absolute;top:-1px;right:0;width:69px;padding:15px 1px 11px;border-left:1px solid #e3e3e3;line-height:1;color:#666;text-align:center;text-decoration:none}
.fold_cmt .ico_top {display:inline-block;overflow:hidden;width:9px;height:11px;background-position:-10px -15px;vertical-align:top}

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