Snippet 본문

멀티숏컷 - 바로가기 추가형

등록
이동원 (등록일 : 2013/03/08)
Type
Mobile
설명
멀티숏컷 바로가기 추가형
미리보기
Html
<div class="footcontent_comm">
	<a href="#none" class="link_app" role="application">
		<img src="http://m1.daumcdn.net/svc/image/U03/common_icon/50D4416B0672EA0003" class="ico_app" width="27" height="27" alt="뉴스바로가기">
		<span class="txt_app"><em class="emph_app">뉴스</em> 바로가기 홈화면에 추가</span>
		<span class="img_g ico_down"></span>
	</a>
	<a href="#none" class="link_top"><span class="img_g ico_top"></span>맨위로</a>
</div>
CSS
/* background image */
.img_g {display:inline-block;overflow:hidden;background:url(http://m1.daumcdn.net/svc/image/U03/common_icon/50A9878E0649740001) no-repeat 0 0;text-indent:-9999px}

/* 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_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/50A987580645080001);-webkit-background-size:124px 108px;background-size:124px 108px}
}
/* ratio 2 */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/50A986B706453C0004);-webkit-background-size:124px 108px;background-size:124px 108px}
}


/* 멀티숏컷 */
.footcontent_comm {position:relative;width:100%;height:43px;border-top:1px solid #6d7076;background-color:#f1f1f1}
.footcontent_comm .link_app {display:block;overflow:hidden;height:43px;margin-right:73px;line-height:15px;color:#000;letter-spacing:-1px}
.footcontent_comm .link_app .ico_app {display:inline;float:left;margin:8px 7px 0 12px;border-radius:4px;-webkit-box-shadow:0 0 1px #c1c1c1;box-shadow:0 0 1px #c1c1c1}
.footcontent_comm .link_app .ico_down {display:inline;float:left;width:9px;height:13px;margin:15px 0 0 5px;background-position:-110px -36px}
.footcontent_comm .txt_app {float:left;margin-top:13px}
.iphone .footcontent_comm .txt_app {margin-top:14px}
.footcontent_comm .emph_app {color:#4b59dc}
.footcontent_comm .link_top {position:absolute;top:0;right:0;width:72px;height:29px;padding-top:14px;border-left:1px solid #dadada;font-size:13px;line-height:15px;color:#000;text-align:center;letter-spacing:-1px}
.footcontent_comm .link_top .ico_top {width:7px;height:9px;margin:3px 5px 0 0;background-position:-46px -38px;vertical-align:top}

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