Snippet 본문

기본형 댓글

등록
(등록일 : 2011/08/30    최종수정일 : 2013/03/08)
Type
PC
설명
. 상단 댓글 쓰기 & 하단 댓글 리스트 - 기본형 댓글 . 댓글 리스트는 cmt_head, cmt_body, cmt_foot 삼단 구조로 이루어짐
미리보기
Html
<div class="cmt_comm">
	<form action="#">
		<fieldset class="fld_cmt">
			<legend class="screen_out">댓글 작성</legend>
			<textarea class="tf_cmt" cols="90" rows="5" title="한줄 토크를 달아주세요">한줄 토크를 달아주세요! (300자)</textarea>
			<button type="submit" class="img_sample btn_cmt">등록</button>
			<p class="info_append">
				<span class="screen_out">입력된 바이트 수 : </span>
				<span class="txt_byte">55</span> / 300자
				<span class="txt_bar">|</span>
				<a href="#none">댓글 운영원칙</a>
			</p>
		</fieldset>
	</form>
	<strong class="screen_out">전체 댓글</strong>
	<div class="list_cmt">
		<div class="cmt_head"></div>
		<div class="cmt_body">
			<span class="info_append">
				<span class="txt_name">글쓴이</span>
				<span class="txt_bar">|</span>
				<span class="txt_time">2013.01.01 14:22</span>
			</span>
			<p class="txt_desc">
				댓글 내용이 나오는 곳...댓글댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...
			</p>
		</div>
		<div class="cmt_foot">
			<a href="#none">답글</a><span class="txt_bar">|</span><a href="#none">수정</a><span class="txt_bar">|</span><a href="#none">삭제</a><span class="txt_bar">|</span><a href="#none">신고</a>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_head"></div>
		<div class="cmt_body">
			<span class="info_append">
				<span class="txt_name">글쓴이</span>
				<span class="txt_bar">|</span>
				<span class="txt_time">2013.01.01 14:22</span>
			</span>
			<p class="txt_desc">
				댓글 내용이 나오는 곳...댓글댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...
			</p>
		</div>
		<div class="cmt_foot">
			<a href="#none">답글</a><span class="txt_bar">|</span><a href="#none">수정</a><span class="txt_bar">|</span><a href="#none">삭제</a><span class="txt_bar">|</span><a href="#none">신고</a>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_head"></div>
		<div class="cmt_body">
			<span class="info_append">
				<span class="txt_name">글쓴이</span>
				<span class="txt_bar">|</span>
				<span class="txt_time">2013.01.01 14:22</span>
			</span>
			<p class="txt_desc">
				댓글 내용이 나오는 곳...댓글댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...
			</p>
		</div>
		<div class="cmt_foot">
			<a href="#none">답글</a><span class="txt_bar">|</span><a href="#none">수정</a><span class="txt_bar">|</span><a href="#none">삭제</a><span class="txt_bar">|</span><a href="#none">신고</a>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_head"></div>
		<div class="cmt_body">
			<span class="info_append">
				<span class="txt_name">글쓴이</span>
				<span class="txt_bar">|</span>
				<span class="txt_time">2013.01.01 14:22</span>
			</span>
			<p class="txt_desc">
				댓글 내용이 나오는 곳...댓글댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...
			</p>
		</div>
		<div class="cmt_foot">
			<a href="#none">답글</a><span class="txt_bar">|</span><a href="#none">수정</a><span class="txt_bar">|</span><a href="#none">삭제</a><span class="txt_bar">|</span><a href="#none">신고</a>
		</div>
	</div>
	<div class="list_cmt">
		<div class="cmt_head"></div>
		<div class="cmt_body">
			<span class="info_append">
				<span class="txt_name">글쓴이</span>
				<span class="txt_bar">|</span>
				<span class="txt_time">2013.01.01 14:22</span>
			</span>
			<p class="txt_desc">
				댓글 내용이 나오는 곳...댓글댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...댓글 내용이 나오는 곳...
			</p>
		</div>
		<div class="cmt_foot">
			<a href="#none">답글</a><span class="txt_bar">|</span><a href="#none">수정</a><span class="txt_bar">|</span><a href="#none">삭제</a><span class="txt_bar">|</span><a href="#none">신고</a>
		</div>
	</div>
</div>
CSS
.img_sample {background:url(/snippet/image?idx=34) no-repeat}
.txt_bar {color:#ccc;margin:0 3px}
 
.cmt_comm {overflow:hidden;width:610px;padding:0 20px}
.cmt_comm .fld_cmt {overflow:hidden;width:100%;padding-top:20px}
.cmt_comm .fld_cmt .tf_cmt {width:505px;height:35px;padding:10px;border:1px solid #c9c9c9}
.cmt_comm .fld_cmt .btn_cmt {overflow:hidden;width:79px;height:57px;border:0;text-indent:-9999px;cursor:pointer}
.cmt_comm .fld_cmt .info_append {height:25px;font-size:11px;line-height:25px;color:#666;text-align:right}
.cmt_comm .fld_cmt .txt_byte {font-weight:bold;color:#17439c}
 
.cmt_comm .list_cmt {overflow:hidden;position:relative;width:100%;padding:15px 0;border-bottom:1px solid #ccc}
.cmt_comm .list_cmt .cmt_head {position:absolute;top:18px;left:0;width:100px;height:50px;margin-right:15px;background-color:#d88}
.cmt_comm .list_cmt .cmt_body {margin:0 150px 0 120px}
.cmt_comm .list_cmt .info_append {display:block;height:20px}
.cmt_comm .list_cmt .txt_name {font-weight:bold;color:#888}
.cmt_comm .list_cmt .txt_time {color:#b1b1b1}
.cmt_comm .list_cmt .txt_desc {font-size:12px;line-height:18px}
.cmt_comm .list_cmt .link_reply {display:inline-block;margin-top:5px;font-weight:bold;color:#17439c}
.cmt_comm .list_cmt .cmt_foot {overflow:hidden;position:absolute;top:15px;right:0;height:40px;font-size:11px}

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