Snippet 본문

소셜쉐어 기본형B

등록
신예호 (등록일 : 2012/02/06    최종수정일 : 2013/04/03)
Type
PC
설명
소셜쉐어 기본형 + 추천 - 더보기 레이어
미리보기
Html
<div class="img_sns sns_comm sns_open"> <!-- sns_open 클래스추가로 레이어 활성화 -->
	<div class="img_sns sns_comm_inner">
		<strong class="screen_out">SNS로 공유하기</strong>
		<ul class="list_sns">
			<li class="mp"><a href="#none" class="link_sns"><span class="img_sns ico_mp"></span><span class="txt_sns">마이피플</span></a></li>
			<li class="twi"><a href="#none" class="link_sns"><span class="img_sns ico_twi"></span><span class="txt_sns">트위터</span></a></li>
			<li class="face"><a href="#none" class="link_sns"><span class="img_sns ico_face"></span><span class="txt_sns">페이스북</span></a></li>
		</ul>
		<span class="img_sns txt_bar"></span>
		<a href="#none" class="link_more"><span class="txt_more">더보기</span><span class="img_sns sns_more"></span></a>
		<div class="img_sns lay_sns show">
			<div class="img_sns lay_sns_inner">
				<ul class="list_snsmore outside">
					<li class="cy"><a href="#none" class="link_sns"><span class="img_sns ico_cy"></span><span class="txt_sns">싸이월드</span></a></li>
					<li class="me"><a href="#none" class="link_sns"><span class="img_sns ico_me"></span><span class="txt_sns">미투데이</span></a></li>
				</ul>
				<ul class="list_snsmore inside">
					<li class="cafe"><a href="#none" class="link_sns"><span class="img_sns ico_cafe"></span><span class="txt_sns">카페</span></a></li>
					<li class="blog"><a href="#none" class="link_sns"><span class="img_sns ico_blog"></span><span class="txt_sns">블로그</span></a></li>
				</ul>
			</div>
		</div>
		<a href="#none" class="btn_good"><span class="img_sns ico_good"></span><span class="txt_good">추천</span> <span class="count">78</span></a>
	</div>
</div>
CSS
.img_sns, 
.sns_comm .list_snsmore .link_sns:hover {display:block;background:url(/snippet/image?idx=226) no-repeat}

.sns_comm {position:relative;float:left;height:24px;padding-left:2px;background-position:0 -80px;font-family:'돋움', Dotum}
.sns_comm .sns_comm_inner {float:left;padding:1px 0 1px 0;background-position:100% -80px}
.sns_comm .list_sns {float:left;width:208px}
.sns_comm .list_sns li {float:left}
.sns_comm .list_sns .link_sns {float:left;width:100%;height:19px;padding:3px 0 0 0;font-size:11px;line-height:11px;letter-spacing:-1px;text-decoration:none;color:#4c4c4c;cursor:pointer;vertical-align:-2px}
.sns_comm .list_sns .txt_sns {float:left;padding:3px 0 0 0}
.sns_comm .list_sns .mp {width:74px}
.sns_comm .list_sns .twi {width:63px}
.sns_comm .list_sns .face {width:71px}
.sns_comm .list_sns .img_sns {display:inline;float:left;margin:1px 4px 0 7px;vertical-align:top}
.sns_comm .list_sns .ico_mp {width:13px;height:13px;margin:2px 5px 0 10px;background-position:-90px -40px}
.sns_comm .list_sns .ico_twi {width:16px;height:16px;margin:0 2px 0 7px;background-position:-20px 0}
.sns_comm .list_sns .ico_face {width:13px;height:13px;margin:2px 5px 0 6px;background-position:-45px -40px}
.sns_comm .txt_bar {float:left;width:1px;height:22px;background-position:-100px -105px}
.sns_comm .link_more {float:left;width:53px;height:19px;padding:3px 0 0 0;font-size:11px;line-height:11px;letter-spacing:-1px;text-decoration:none;vertical-align:-2px;cursor:pointer}
.sns_comm .link_more:hover {text-decoration:none}
.sns_comm .link_more .txt_more {display:inline;float:left;margin:3px 0 0 9px}
.sns_comm .link_more .sns_more {display:inline;overflow:hidden;float:left;width:5px;height:3px;margin:6px 0 0 3px;background-position:-10px -70px}
.sns_comm .btn_good {float:left;height:22px;border-left:1px solid #d2d2d2;font-size:11px;line-height:11px;vertical-align:top;text-decoration:none;cursor:pointer}
.sns_comm .btn_good:hover {text-decoration:none}
.sns_comm .btn_good .ico_good {display:inline;float:left;width:10px;height:14px;margin:4px 0 0 7px;background-position:-145px -40px}
.sns_comm .btn_good .txt_good {display:inline;float:left;margin:6px 7px 0 4px;letter-spacing:-1px}
.sns_comm .btn_good .count {display:inline;float:left;margin:6px 9px 0 0;font-weight:bold;color:#6666ff}

.sns_comm .lay_sns {display:none;position:absolute;left:162px;top:23px;width:103px;padding:2px 0 0 0;background-position:0 -220px}
.sns_open .lay_sns {display:block;}
.sns_comm .lay_sns_inner {padding:0 1px 2px 1px;background-position:0 100%}
.sns_comm .list_snsmore {width:97px;padding:1px 2px 0 2px}
.sns_comm .list_snsmore li {width:100%;margin:0 0 1px 0;vertical-align:top}
.sns_comm .list_snsmore .link_sns {display:block;width:97px;height:21px;font-size:11px;line-height:11px;color:#4c4c4c;letter-spacing:-1px;text-decoration:none;cursor:pointer}
.sns_comm .list_snsmore .link_sns:hover {background-position:0 -105px}
.sns_comm .list_snsmore .txt_sns {float:left;margin:6px 0 0 0}
.sns_comm .list_snsmore .img_sns {display:inline;float:left;width:13px;height:13px;margin:4px 6px 0 4px}
.sns_comm .list_snsmore .ico_cy {background-position:-30px -40px}
.sns_comm .list_snsmore .ico_me {background-position:-60px -40px}
.sns_comm .list_snsmore .ico_yz {margin:4px 5px 0 5px;background-position:0 -40px}
.sns_comm .list_snsmore .ico_tis {background-position:-75px -40px}
.sns_comm .list_snsmore .ico_cafe {background-position:-110px -40px}
.sns_comm .list_snsmore .ico_blog {margin: 4px 7px 0 3px;background-position:-125px -40px}
.sns_comm .outside {padding-bottom:1px}
.sns_comm .inside {padding-top:2px;border-top:1px solid #e9e9e9}

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