Snippet 본문

기본형 (이미지타입)

등록
(등록일 : 2011/10/06    최종수정일 : 2013/12/20)
Type
PC
설명
이미지 타입의 기본형 탭 메뉴
미리보기
Html
<ul class="tab_comm">
	<li class="on"><a href="#none" class="link_tab link_top">Top10</a></li>
	<li><a href="#none" class="link_tab link_total">전체</a></li>
	<li><a href="#none" class="link_tab link_room">마이룸</a></li>
	<li><a href="#none" class="link_tab link_fantamon">판타몬</a></li>
	<li><a href="#none" class="link_tab link_item">아이템</a></li>
	<li><a href="#none" class="link_tab link_friend">판타친구</a></li>
	<li><a href="#none" class="link_tab link_etc">기타</a></li>
</ul>
CSS
.tab_comm {overflow:hidden;width:100%;height:32px;border-bottom:2px solid #2176b7}
.tab_comm li {float:left}
.tab_comm .link_tab {display:block;overflow:hidden;width:96px;height:32px;background:url(/snippet/image?idx=232) no-repeat 0 0;text-indent:-9999px}
.tab_comm .link_top {width:94px;background-position:0 0}
.tab_comm .link_total {background-position:-99px 0}
.tab_comm .link_room {background-position:-195px 0}
.tab_comm .link_fantamon {background-position:-291px 0}
.tab_comm .link_item {background-position:-387px 0}
.tab_comm .link_friend {background-position:-483px 0}
.tab_comm .link_etc {width:91px;background-position:-579px 0}
.tab_comm .on .link_top {background-position:0 -32px}
.tab_comm .on .link_total {background-position:-99px -32px}
.tab_comm .on .link_room {background-position:-195px -32px}
.tab_comm .on .link_fantamon {background-position:-291px -32px}
.tab_comm .on .link_item {background-position:-387px -32px}
.tab_comm .on .link_friend {background-position:-483px -32px}
.tab_comm .on .link_etc {background-position:-579px -32px}

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