Snippet 본문

SNS List - 하단 더보기 버튼형

등록
박민지 (등록일 : 2011/12/27    최종수정일 : 2013/05/29)
Type
PC
설명
- 리스트 하단 더보기 버튼. - 리스트 + 더보기 버튼 영역의 상하 스크롤.
미리보기
Html
<div class="thumb_comm scroll_g">
	<h3 class="screen_out">실시간 sns 목록</h3>
	<a href="#none" class="ico_sample btn_refresh">새로고침</a>
	<ul class="list_thumb">
		<li>
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=158" width="32" height="32" class="thmub_img"  alt=""/>
			</a>
			<div class="cont_info">
				<span class="tit_subject">
					박지성이 얼마나 힘들었겠습니까. 줍시다,박지성 힘내세요!
				</span>
				<span class="info_append">
					<a href="#none" class="link_txt">3분전</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="link_txt">aukishinki6002</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="btn_sample btn_yozm">요즘</a>
				</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=159" width="32" height="32" class="thmub_img"  alt=""/>
			</a>
			<div class="cont_info">
				<span class="tit_subject">
					국가대표축구 시청중인데 왜이렇게 방금수업시간에아슬아슬책가리 블라고 다봣어ㅋ요거왤케재밋음ㅜㅜ <a href="#none" class="link_txt">http://t.co/UdNlTzxE</a>
				</span>
				<span class="info_append">
					<a href="#none" class="link_txt">3분전</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="link_txt">aukishinki6002</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="btn_sample btn_twitter">트위터</a>
				</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=160" width="32" height="32" class="thmub_img"  alt=""/>
			</a>
			<div class="cont_info">
				<span class="tit_subject">
					박지성이 얼마나 힘들었겠습니까. 줍시다,박지성 힘내세요!
				</span>
				<span class="info_append">
					<a href="#none" class="link_txt">3분전</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="link_txt">aukishinki6002</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="btn_sample btn_yozm">요즘</a>
				</span>
			</div>
		</li>
		<li>
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=161" width="32" height="32" class="thmub_img"  alt=""/>
			</a>
			<div class="cont_info">
				<span class="tit_subject">
					국가대표축구 시청중인데 왜이렇게 방금수업시간에아슬아슬책가리 블라고 다봣어ㅋ요거왤케재밋음ㅜㅜ <a href="#none" class="link_txt">http://t.co/UdNlTzxE</a>
				</span>
				<span class="info_append">
					<a href="#none" class="link_txt">3분전</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="link_txt">aukishinki6002</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="btn_sample btn_twitter">트위터</a>
				</span>
			</div>
		</li>
		<li class="lst">
			<a href="#none" class="link_thumb">
				<img src="/snippet/image?idx=162" width="32" height="32" class="thmub_img"  alt=""/>
			</a>
			<div class="cont_info">
				<span class="tit_subject">
					박지성이 얼마나 힘들었겠습니까. 줍시다,박지성 힘내세요!
				</span>
				<span class="info_append">
					<a href="#none" class="link_txt">3분전</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="link_txt">aukishinki6002</a>
					<span class="txt_bar">|</span>
					<a href="#none" class="btn_sample btn_yozm">요즘</a>
				</span>
			</div>
		</li>
	</ul>
	<button type="button" class="btn_more"><span class="ico_sample">더보기</span></button>
</div>
CSS
.scroll_g {scrollbar-face-color:#363637;scrollbar-3dlight-color:#4a4a4b;scrollbar-highlight-color:#363637;scrollbar-shadow-color:#363637;scrollbar-darkshadow-color:#2a2a2a;scrollbar-arrow-color:#868687;scrollbar-track-color:#181818}

/* Background Image */
.btn_sample {background-image:url(/snippet/image?idx=284);background-repeat:no-repeat}
.ico_sample {background-image:url(/snippet/image?idx=285);background-repeat:no-repeat}

.thumb_comm {overflow-x:hidden;overflow-y:scroll;width:294px;height:413px;padding-top:14px;letter-spacing:-1px;background-color:#1b1b1c}
.thumb_comm .btn_sample {display:block;overflow:hidden;font-size:0px;line-height:0;text-indent:-9999px}
.thumb_comm .btn_refresh {display:block;width:43px;height:15px;margin:0 0 4px 13px;padding:1px 0 0 21px;font-size:11px;line-height:14px;color:#777}
.thumb_comm .list_thumb {float:left}
.list_thumb li {float:left;width:261px;padding:10px 0 10px 15px;background:url(/snippet/image?idx=286) repeat-x 0 100%}
.list_thumb .lst {background:none}
.list_thumb .link_thumb {float:left;width:32px;height:32px;margin-right:15px;border:1px solid #000}
.list_thumb .thmub_img {display:block}
.list_thumb .cont_info {float:left;width:185px;padding-top:2px}
.list_thumb .tit_subject {display:block;font-weight:normal;line-height:18px;color:#bbb}
.list_thumb .tit_subject .link_txt {color:#58a3bb}
.list_thumb .info_append {display:block;overflow:hidden;width:100%;margin-top:9px}
.list_thumb .info_append .link_txt {float:left;margin-top:2px;font-size:11px;color:#777}
.list_thumb .txt_bar {display:block;float:left;margin:2px 4px 0;font-size:11px;color:#444}
.list_thumb .info_append .btn_sample {float:left;width:17px;height:15px}
.list_thumb .info_append .btn_yozm {background-position:-130px -190px}
.list_thumb .info_append .btn_twitter {background-position:-150px -190px}
.thumb_comm .btn_more {float:left;width:277px;height:27px;border:0 none;border-top:1px solid #141415;background-color:#222223}
.thumb_comm .btn_more .ico_sample {padding-right:15px;font-size:11px;color:#777;background-position:100% -22px}

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