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="cmt_write">
		<form action="#none">
			<fieldset>
				<legend class="screen_out">댓글 작성</legend>
				<strong class="tit_reply">댓글쓰기</strong>
				<textarea required="" placeholder="내용을 입력하세요." cols="90" rows="5" class="tf_cmt"></textarea>
				<div class="info_append">
					<span class="screen_out">입력된 바이트 수 : </span><span class="txt_byte">0</span>/600 bytes
				</div>
				<div class="write_btn">
					<button type="submit" class="bround btn_submit">등록</button>
					<button type="reset" class="bround btn_cancel">취소</button>
				</div>
			</fieldset>
		</form>
	</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 {display:inline-block;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 {overflow:hidden}
.cmt_comm .cmt_tit {overflow:hidden;height:100%;padding:12px 12px 8px 12px;border-bottom:1px solid #e7e4df}

.cmt_tit .tit_cmt {width:100%;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 .info_append .txt_info {display:block}
.cmt_tit .info_append .txt_bar {padding-right:1px;color:#B6B6B6}
.cmt_tit .ico_recom {display:inline-block;overflow:hidden;width:12px;height:14px;background-position:0 1px;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_write {overflow:hidden;padding:0 14px 0 12px;clear:both}
.cmt_write .tit_reply {display:block;margin:11px 0 8px}
.cmt_write .tf_cmt {width:100%;height:136px;padding:4px 0;border:1px solid #a9aaaf;border-radius:5px;box-shadow:rgba(0, 0, 0, 0.367188) 1px 2px 2px inset, white 1px 2px 2px inset;-webkit-box-shadow:rgba(0, 0, 0, 0.367188) 1px 2px 2px inset, white 1px 2px 2px inset}
.cmt_write .info_append {margin-top:5px;font-size:10px;color:#999;text-align:right}
.cmt_write .txt_byte {color:#da3e42}
.cmt_write .write_btn {margin-top:7px;text-align:center}
.write_btn .bround {width:50px;height:31px;font-size:13px;line-height:29px}
.write_btn .btn_submit {border-color:#d23f30;color:#fff;background-color:#f46651;background-image:-webkit-gradient(linear, left top, left bottom, from(#f87863), to(#f05742));background-image:-moz-linear-gradient(top, #f87863, #f05742);background-image:-o-linear-gradient(top, #f87863, #f05742);background-image:linear-gradient(to bottom, #f87863, #f05742);-webkit-box-shadow:inset 1px 1px 0px rgba(255,255,255,0.1), inset -1px -1px 0px rgba(255,255,255,0.1);box-shadow:inset 1px 1px 0px rgba(255,255,255,0.1), inset -1px -1px 0px rgba(255,255,255,0.1)}
.write_btn .btn_cancel {border-color:#aaa;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);box-shadow:inset 1px 1px 0px rgba(255,255,255,0.7), inset -1px -1px 0px rgba(255,255,255,0.7)}

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