Snippet 본문

소셜쉐어 기본형A (더보기 열림)

등록
신예호 (등록일 : 2013/01/29    최종수정일 : 2014/05/28)
Type
Mobile
설명
소셜쉐어 기본형 - Flexible
미리보기
Html
<div class="sns_comm sns_type1 open_sns"><!-- 숨김sns, 숨김url복사 활성화시 open_sns클래스 추가  -->
	<strong class="screen_out">SNS로 공유하기</strong>
	<div class="basis_sns">
		<ul class="list_sns">
			<li>
				<a href="#none" class="link_sns"><span class="img_g ico_sns_mp"></span>마플</a>
			</li>
			<li>
				<a href="#none" class="link_sns"><span class="img_g ico_sns_kt"></span>카톡</a>
			</li>
			<li>
				<a href="#none" class="link_sns"><span class="img_g ico_sns_twi"></span>트윗</a>
			</li>
			<li>
				<a href="#none" class="link_sns"><span class="img_g ico_sns_ks"></span>카스</a>
			</li>				
			<li>
				<a href="#none" class="link_sns"><span class="img_g ico_sns_face"></span>페북</a>
			</li>
		</ul>
	</div>
	<a href="#none" class="link_url"><span class="txt_url"><span class="txt_eng">URL</span>복사</span></a>
	<a href="#none" class="link_more"><span class="img_g ico_more">더보기</span></a>
</div>
<div class="sns_more" style="display:block">
	<div class="inner_more">
		<strong class="screen_out">SNS로 공유하기 더보기</strong>
		<ul class="list_snsmore">
			<li>
				<a href="#none" class="link_sns"><span class="img_g ico_sns_mail"></span>메일</a>
			</li>
			<li class="lst"><!-- 마지막 lst클래스 추가  -->
				<a href="#none" class="link_sns"><span class="img_g ico_sns_bd"></span>밴드</a>
			</li>
		</ul>
		<a href="#none" class="btn_close"><span class="img_g ico_close"></span><span class="txt_close">닫기</span></a>
	</div>
</div>		
<div class="sns_url" style="display:none">
	<div class="inner_url">
		<strong class="screen_out">URL복사</strong>
		<input type="text" class="tf_url" title="현재페이지 URL" value="http://media.daum.net/society/?newsId=2013">
		<em class="desc_url">위의 URL을 전체 선택하여 복사하세요.</em>
		<a href="#none" class="btn_close"><span class="img_g ico_close"></span><span class="txt_close">닫기</span></a>
	</div>
</div>
CSS
.img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/5385827D027D120003) no-repeat 0 0;text-indent:-9999px}
 
/* ratio 1.5 */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 1.5dppx) {
    .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/538582890237060001);-webkit-background-size:218px 228px;background-size:218px 228px}
}
 
/* ratio 2 */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
    .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/538582930230390003);-webkit-background-size:218px 228px;background-size:218px 228px}
}


/* 소셜쉐어 */
.ico_sns_mail {display:block;width:20px;height:15px;margin:9px auto 6px;background-position:0 -50px}
.ico_sns_face {display:block;width:22px;height:22px;margin:5px auto 3px;background-position:-26px -50px}
.ico_sns_bd {display:block;width:22px;height:22px;margin:5px auto 3px;background-position:-52px -50px}
.ico_sns_kt {display:block;width:22px;height:22px;margin:5px auto 3px;background-position:0 -76px}
.ico_sns_ks{display:block;width:22px;height:22px;margin:5px auto 3px;background-position:-26px -76px}
.ico_sns_mp {display:block;width:22px;height:21px;margin:5px auto 6px;background-position:-51px -76px}
.ico_sns_twi {display:block;width:22px;height:18px;margin:7px auto 5px;background-position:0 -102px}
  
.sns_comm {overflow:hidden;position:relative;margin:0 12px;letter-spacing:-1px}
.sns_comm .basis_sns {height:32px;border:1px solid #bbb;border-radius:2px;background-color:#fcfcfc;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fcfcfc));background-image:-moz-linear-gradient(top, #fff, #fcfcfc);background-image:-o-linear-gradient(top, #fff, #fcfcfc);background-image:linear-gradient(to bottom, #fff, #fcfcfc)}
.sns_comm .list_sns {float:left;width:100%}
.sns_comm .list_sns li {float:left;height:32px}
.sns_comm .list_sns .link_sns {display:block;overflow:hidden;height:100%;border-right:1px solid #e0e0e0;font-size:0;line-height:0;text-indent:-9999px}
.sns_comm .list_sns .link_sns:after {display:block;content:''}
.sns_comm .link_more {position:absolute;top:1px;right:1px;width:38px;height:32px;text-align:center}
.sns_comm .link_more:after {display:block;content:''}
.sns_comm .ico_more {width:13px;height:9px;margin-top:12px;background-position:-110px -76px;vertical-align:top}
.open_sns .link_more .ico_more {background-position:-110px -88px}
.sns_comm .link_url {position:absolute;top:1px;right:39px;width:60px;height:32px;border-right:1px solid #e0e0e0}
.sns_comm .link_url:after {display:block;content:''}
.sns_comm .link_url .txt_url {display:block;margin-top:10px;font-size:13px;line-height:14px;color:#4c546a;vertical-align:top;text-align:center;text-indent:-1px}
.os_android .sns_comm .link_url .txt_url {margin-top:10px}
.android .sns_comm .link_url .txt_url {margin-top:9px}
.sns_comm .link_url .txt_eng {font-weight:bold}
  
.sns_more {display:none;overflow:hidden;letter-spacing:-1px;clear:both}
.sns_more .inner_more {float:right;margin:3px 12px 0;border:1px solid #bbb;border-radius:2px}
.sns_more .btn_close {display:block;padding-right:13px;height:27px;border-top:1px solid #e0e0e0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;font-size:12px;line-height:14px;background-color:#f7f7f7;text-align:right}
.sns_more .ico_close {width:7px;height:7px;margin-top:10px;background-position:-90px -104px;vertical-align:top}
.sns_more .txt_close {display:inline-block;margin:6px 0 0 4px;vertical-align:top}
.sns_more .list_snsmore {overflow:hidden}
.sns_more .list_snsmore li {float:left;height:50px}
.sns_more .list_snsmore .link_sns {display:block;width:38px;height:48px;padding-top:2px;border-right:1px solid #e0e0e0;font-size:11px;line-height:14px;text-align:center}
.sns_more .lst .link_sns {border-right:0 none}
.sns_more .link_sns .txt_url {display:block;margin-top:9px;line-height:14px;vertical-align:top;text-align:center;text-indent:-1px}
.sns_more .link_sns .txt_eng {display:block;margin-bottom:6px;font-size:13px;line-height:15px;color:#4c546a;font-weight:bold}
.iphone .link_sns .txt_eng {margin-bottom:6px}
  
.sns_url {display:none;overflow:hidden;letter-spacing:-1px;clear:both}
.sns_url .inner_url {position:relative;margin:3px 12px 0;padding:10px 15px 0 13px;height:68px;border:1px solid #bbb;border-radius:2px;background-color:#f7f7f7}
.sns_url .tf_url {display:block;overflow:hidden;width:100%;height:30px;padding-top:2px;border:1px solid #e0e0e0;border-radius:2px;font-size:15px;line-height:17px;background-color:#fff;text-indent:8px}
.sns_url .desc_url {float:left;margin-top:10px;font-size:13px;color:#666;line-height:14px;text-indent:2px}
.os_android .sns_url .desc_url {margin-top:11px}
.android .sns_url .desc_url {margin-top:9px}
.sns_url .btn_close {position:absolute;right:0;height:24px;padding:10px 13px 0;font-size:13px;line-height:14px}
.sns_url .ico_close {width:7px;height:7px;margin-top:4px;background-position:-90px -104px;vertical-align:top}
.os_android .sns_url .ico_close {margin-top:3px}
.android .sns_url .ico_close {margin-top:5px}
.sns_url .txt_close {display:inline-block;margin-left:4px;vertical-align:top}
  
.sns_type1 .list_sns li {width:20%}
.sns_type1 .basis_sns {padding-right:99px}
.sns_type2 {float:right;margin-left:0}
.sns_type2 .list_sns li {width:39px}
.sns_type2 .basis_sns {float:right;padding-right:38px}
  
/* 소셜쉐어 Type C */
.sns_type3 {float:left;width:38px;height:34px;margin:0}
.sns_type3 .link_more {display:block;overflow:hidden;position:static;width:36px;height:32px;border:1px solid #bbb;border-radius:2px;background-color:#f9f9f9;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fcfcfc));background-image:-moz-linear-gradient(top, #fff, #fcfcfc);background-image:-o-linear-gradient(top, #fff, #fcfcfc);background-image:linear-gradient(to bottom, #fff, #fcfcfc)}
.sns_type3 .ico_share {width:14px;height:14px;margin-top:9px;background-position:-26px -102px;vertical-align:top}
.sns_type3.open_sns .ico_share {background-position:-52px -102px}
 
/* 소셜쉐어 Type C1 */
.sns_type3_1 {float:left;width:38px;height:32px;margin:0}
.sns_type3_1 .link_more {display:block;overflow:hidden;position:static;width:36px;height:30px;border:1px solid #bbb;border-radius:2px;background-color:#f9f9f9;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fcfcfc));background-image:-moz-linear-gradient(top, #fff, #fcfcfc);background-image:-o-linear-gradient(top, #fff, #fcfcfc);background-image:linear-gradient(to bottom, #fff, #fcfcfc)}
.sns_type3_1 .ico_share {width:14px;height:14px;margin-top:8px;background-position:-26px -102px;vertical-align:top}
.sns_type3_1.open_sns .ico_share {background-position:-52px -102px}
  
.more_type1 .inner_more {overflow:hidden;float:none}
.more_type1 .list_snsmore {width:100%}
.more_type1 .list_snsmore li {width:12.6%}
.more_type1 .list_snsmore .lst {overflow:hidden;float:none;width:auto}
.more_type1 .list_snsmore .ico_sns_mp {margin-bottom:4px}
.more_type1 .list_snsmore .link_sns {width:100%;border:0 none;-webkit-box-shadow:inset -1px 0 0 #e0e0e0;box-shadow:inset -1px 0 0 #e0e0e0}
.more_type1 .lst .link_sns {box-shadow:none}
.more_type1 .link_sns .txt_url {text-indent:0}

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