Snippet 본문

문구 추가형

등록
이동원 (등록일 : 2013/03/08    최종수정일 : 2013/12/18)
Type
Mobile
설명
Footer 기본형에서 문구가 추가되는 경우
미리보기
Html
<footer class="footer_comm" role="contentinfo">
	<ul class="list_foot">
		<li><a href="http://m.daum.net/?t__nil_footer=daum" class="btn_foot">Daum</a></li>
		<li><a href="#" class="btn_foot">로그인</a></li>
		<li><span class="btn_foot btn_off">PC화면</span></li> <!-- 비활성 상태인 경우 btn_off 클래스 추가 및 span태그로 변경 -->
		<li><a href="http://m.daum.net/site.daum?t__nil_footer=sitemap" class="btn_foot">전체보기</a></li>
	</ul>
	<small class="copr_info">
		<span class="info_policy">
			<a href="#" class="link_policy"> 법적고지</a>
			<a href="#" class="link_policy"> 통신판매중개 사업정보</a>
		</span>
		<a href="http://www.daumcorp.com/main.daum?t__nil_footer=daumcorp" class="link_daumcorp">&copy; Daum</a>
	</small>
</footer>
CSS
.footer_comm {width:100%;margin:0 auto;padding-top:10px;border-top:1px solid #d9d9d9;font-family:sans-serif;background-color:#f1f1f1;text-align:center;clear:both}
.footer_comm .list_foot {display:inline-block;width:auto;height:28px;margin:0 auto;text-align:center;*zoom:1}
.footer_comm .list_foot li {display:inline}
.footer_comm .btn_foot {display:inline-block;width:64px;height:25px;border:1px solid #c4c4c4;border-radius:3px;font-size:13px;line-height:26px;background-color:#fbfbfb;background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#f6f6f6));background-image:-moz-linear-gradient(top, #fff, #f6f6f6);background-image:-o-linear-gradient(top, #fff, #f6f6f6);background-image:linear-gradient(to bottom, #fff, #f6f6f6);color:#444;letter-spacing:-1px;vertical-align:top}
.footer_comm .btn_off {color:#8b8b8b;cursor:default}
.footer_comm .copr_info {display:block;padding:4px 0 6px;font-size:11px;color:#888;clear:both}
.footer_comm .info_policy {display:block;padding:6px 0 8px;font-weight:bold;font-size:10px;line-height:10px}
.footer_comm .link_policy {margin:0 5px;color:#888;text-decoration:underline}
.footer_comm .link_daumcorp {color:#888}

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