Snippet 본문

댓글 리스트 - 다중선택형

등록
윤향재, 유낙동 (등록일 : 2013/03/18    최종수정일 : 2013/05/29)
Type
Mobile
설명
다중선택 댓글 리스트
미리보기
Html
<div class="cmt_comm">
	<ul class="list_cmt">
		<li class="on">
			<span class="box_check">
				<input type="checkbox" id="check_talk" class="screen_out">
				<label for="check_talk" class="img_sample lab_admin">선택 글 해제하기</label> 
			</span>
			<div class="txt_cmt">다크나이트 라이즈 진짜 최고네요!</div>
			<div class="cmt_info">
				<span class="info_g f_l">
					<span class="txt_owner">크리스토퍼놀란</span>
					<span class="txt_bar">|</span>
					<span class="timg_g">15:30</span>
				</span>
				<span class="f_l">
					<span class="txt_bar">|</span> <a href="#none" class="link_point">답글</a><span class="txt_bar">|</span> <a href="#none" class="link_point">수정</a><span class="txt_bar">|</span> <a href="#none" class="link_point">삭제</a><span class="txt_bar">|</span> <a href="#none" class="link_point">신고</a>
				</span>
			</div>
		</li>
		<li>
			<span class="box_check">
				<input type="checkbox" id="check_talk" class="screen_out">
				<label for="check_talk" class="img_sample lab_admin">글 선택하기</label><!-- 상태마다 내용이 변화됩니다. -->
			</span>
			<div class="txt_cmt">다크나이트 라이즈 진짜 최고네요!</div>
				<div class="cmt_info">
				<span class="info_g f_l">
					<span class="txt_owner">크리스토퍼놀란</span>
					<span class="txt_bar">|</span>
					<span class="timg_g">15:30</span>
				</span>
				<span class="f_l">
					<span class="txt_bar">|</span> <a href="#none" class="link_point">답글</a><span class="txt_bar">|</span> <a href="#none" class="link_point">수정</a><span class="txt_bar">|</span> <a href="#none" class="link_point">삭제</a><span class="txt_bar">|</span> <a href="#none" class="link_point">신고</a>
				</span>
			</div>
		</li>			
		<li class="list_reply">
			<span class="box_check">
				<input type="checkbox" id="check_talk" class="screen_out">
				<label for="check_talk" class="img_sample lab_admin">글 선택하기</label><!-- 상태마다 내용이 변화됩니다. -->
			</span>
			<div class="txt_cmt"><em class="img_sample ico_reple">[답변]</em>배트맨비긴즈는 보세요.안보셔도 상관은 없지만 꽤 연결됩니다.</div>
			<div class="cmt_info">
				<span class="info_g f_l">
					<span class="txt_owner">크리스토퍼놀란</span>
					<span class="txt_bar">|</span>
					<span class="timg_g">12.07.30</span>
				</span>
				<span class="f_l">
					<span class="txt_bar">|</span> <a href="#none" class="link_point">답글</a><span class="txt_bar">|</span> <a href="#none" class="link_point">수정</a><span class="txt_bar">|</span> <a href="#none" class="link_point">삭제</a><span class="txt_bar">|</span> <a href="#none" class="link_point">신고</a>
				</span>
			</div>
		</li>
		<li>
			<span class="box_check">
				<input type="checkbox" id="check_talk" class="screen_out">
				<label for="check_talk" class="img_sample lab_admin">글 선택하기</label><!-- 상태마다 내용이 변화됩니다. -->
			</span>
			<div class="txt_cmt"><em class="img_sample ico_lock">[비밀답변]</em>글쓴이와 운영자만 확인할 수 있는 비밀댓글입니다.</div>
				<div class="cmt_info">
				<span class="info_g f_l">
					<span class="txt_owner">크리스토퍼놀란</span>
					<span class="txt_bar">|</span>
					<span class="timg_g">15:30</span>
				</span>
				<span class="f_l">
					<span class="txt_bar">|</span> <a href="#none" class="link_point">답글</a><span class="txt_bar">|</span> <a href="#none" class="link_point">수정</a><span class="txt_bar">|</span> <a href="#none" class="link_point">삭제</a><span class="txt_bar">|</span> <a href="#none" class="link_point">신고</a>
				</span>
			</div>
		</li>
	</ul>
</div>
CSS
.img_sample {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px;background-image:url(/snippet/image?idx=210);background-repeat:no-repeat;vertical-align:middle}
.cmt_comm {position:relative;overflow:hidden}
.cmt_comm li {overflow:hidden;position:relative;width:auto;padding:8px 0 12px 38px;clear:both;border-bottom:1px solid #e6e6e6}
.cmt_comm .txt_owner {font-size:12px;color:#9e9fa4}
.cmt_comm .txt_cmt {padding:0;color:#222;line-height:23px}
.cmt_comm .list_cmt .cmt_info {overflow:hidden;width:auto;word-wrap:break-word}
.cmt_comm .info_g {margin-top:3px;font-size:12px;white-space:nowrap;color:#9e9fa4}
.cmt_comm .txt_bar {margin-left:3px;color:#d6d6d6}
.cmt_comm .link_point {font-size:13px;font-weight:normal;color:#05a1da}
.cmt_comm .list_reply {border-bottom:1px solid #e6e6e6}
.cmt_comm .list_reply .txt_cmt {position:relative;width:auto;padding-left:16px}
.cmt_comm .list_reply .info_g {padding-left:18px}
.cmt_comm .list_reply .ico_reple {position:absolute;top:4px;left:0;margin-left:0}
.cmt_comm li .box_check {position:absolute;top:11px;left:12px;width:19px;height:19px;background-position:-50px -110px}
.list_cmt .lab_admin {overflow:hidden;width:19px;height:19px;margin:0;background-position:0px 0px;line-height:14px;cursor:pointer;text-indent:-9999px}
.list_cmt .on .lab_admin {background-position:-20px 0}
.cmt_comm .ico_lock {display:inline-block;width:11px;height:13px;margin:0 7px 0 2px;line-height:24px;background-position:-20px -20px}
.cmt_comm .ico_reple {display:inline-block;width:12px;height:12px;background-position:0 -20px}

/* high resolution image */
@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=211);-webkit-background-size:38px 34px;background-size:38px 34px}
}

@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=212);-webkit-background-size:38px 34px;background-size:38px 34px}
}

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