어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.
본문 바로가기주메뉴 바로가기부메뉴 바로가기
현재위치
- HOME
- >배우기
- > 스타일시트(CSS)
본문 영역
텝박스 상세보기
/* 텝박스 공용 */
/* 버튼(클릭시) */
.tab-btn-on{z-index:5;font-size:100%;color:#000;font-weight:bold;text-align:center;line-height:35px;text-shadow:0px 1px 0px #fff;background-color:#fff}
/* 버튼(평상시) */
.tab-btn-off{z-index:3;font-size:100%;color:#333;font-weight:bold;text-align:center;line-height:35px;text-shadow:0px 1px 0px #fff;background:#eee url(http://image.mong9.com/m9_img/etc/gradient/btn_on.png) repeat-x}
/* 내용박스 */
.tab-content{z-index:4;padding:10px;background:#fff;border-width:1px;border-style:solid}
.tab-1{width:100%;min-height:43px;margin-bottom:35px}
.tab-1:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-1 ul{position:relative}
.tab-1 ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-1 ul li{float:left}
.tab-1 li a{
position:relative;display:block;min-width:120px;height:35px;padding:0 10px;margin-right:-1px;
border-width:1px;border-style:solid;border-bottom:none;
}
.tab-1 .tab-btn-on{background-image:url(http://image.mong9.com/m9_img/etc/gradient/btn_off.png);background-repeat:repeat-x}
.tab-1 .tab-content{position:absolute;top:35px;left:0;width:100%;min-height:100%}
<div class="tab-1" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off')">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[상단형 tab-1] 예제소스보기
.tab-2{padding-left:120px}
.tab-2:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-2 ul{position:relative}
.tab-2 ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-2 ul li{float:none}
.tab-2 ul li a{
position:relative;display:block;width:120px;padding:0;margin-left:-120px;
border-width:1px;border-style:solid;border-right:none;border-top-width:0;
}
.tab-2 ul li:first-child a{border-top-width:1px;border-top-style:solid}
.tab-2 .tab-btn-on{background-image:url(http://image.mong9.com/m9_img/etc/gradient/btn_off_left.png);background-repeat:repeat-y}
.tab-2 .tab-content{position:absolute;top:0;left:0;display:block;width:100%;min-height:100%}
<div class="tab-2" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off')">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[좌측형 tab-2] 예제소스보기
.tab-3{padding-right:120px;display:block}
.tab-3:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-3 ul{position:relative;margin:0;padding:0;list-style:none;*zoom:1}
.tab-3 ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-3 ul li{float:none}
.tab-3 ul li a{
position:relative;display:block;width:120px;padding:0;margin-left:-1px;left:100%;
border-width:1px;border-style:solid;border-left:none;border-top-width:0;
}
.tab-3 ul li:first-child a{border-top-width:1px;border-top-style:solid}
.tab-3 .tab-btn-on{background-image:url(http://image.mong9.com/m9_img/etc/gradient/btn_off_right.png);background-position:100% 0%;background-repeat:repeat-y}
.tab-3 .tab-content{position:absolute;top:0;left:0;display:block;width:100%;min-height:100%}
<div class="tab-3" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off')">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[우측형 tab-3] 예제소스보기
.tab-4{position:relative;width:100%;min-height:43px;margin-top:35px}
.tab-4:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-4 ul{position:absolute;margin:0;padding:0;list-style:none;bottom:0;display:block;width:100%}
.tab-4 ul:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.tab-4 ul li{float:left}
.tab-4 li a{
position:relative;display:block;min-width:120px;height:35px;padding:0 10px;margin-right:-1px;
border-width:1px;border-style:solid;border-top:none;
}
.tab-4 .tab-btn-on{background-image:url(http://image.mong9.com/m9_img/etc/gradient/btn_off_bottom.png);background-position:0% 100%;background-repeat:repeat-x}
.tab-4 .tab-content{position:absolute;bottom:35px;left:0;width:100%;min-height:100%}
<div class="tab-4" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off')">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[하단형 tab-4] 예제소스보기
버튼 클릭시, 버튼은 서서히 색상이 변하고, 내용은 방향을 가지고 슬라이드 됩니다.
<div class="tab-1" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off',slide:down,color_effect:1)">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[상단형 tab-1 + 슬라이드 응용] 예제소스보기
<div class="tab-2" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off',slide:right,color_effect:1)">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[좌측형 tab-2 + 슬라이드 응용] 예제소스보기
<div class="tab-3" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off',slide:left,color_effect:1)">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[우측형 tab-3 + 슬라이드 응용] 예제소스보기
<div class="tab-4" ani_type="tab(on_class:'tab-btn-on',off_class:'tab-btn-off',slide:down,color_effect:1)">
<ul>
<li>
<a href="#" class="tab-btn-on" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[하단형 tab-4 + 슬라이드 응용] 예제소스보기
<div class="tab-1" ani_type="tab(on_class:'tab-btn-on olive-green',off_class:'tab-btn-off green',slide:down,color_effect:1)">
<ul>
<li>
<a href="#" class="tab-btn-on round6 olive-green" tab_type="btn(id:tab1)"><span class="icon icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized round9 olive-green" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off round6 green" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized round9 olive-green" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off round6 green" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized round9 olive-green" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[상단버튼 색상 입히기1] 예제소스보기
<div class="tab-1" ani_type="tab(on_class:'tab-btn-on light-blue',off_class:'tab-btn-off blue',slide:down,color_effect:1)">
<ul>
<li>
<a href="#" class="tab-btn-on round13 light-blue" tab_type="btn(id:tab1)"><span class="icon icon-speaker" icon_change="icon2 icon-speaker"></span>공지사항</a>
<div class="tab-content boxSized round9 light-blue" tab_type="content(id:tab1)">
공지사항 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off blue" tab_type="btn(id:tab2)"><span class="icon icon-question2"></span>묻고답하기</a>
<div class="tab-content boxSized round9 light-blue" style="display:none;" tab_type="content(id:tab2)">
묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다. <br /> 묻고답하기 탭 내용입니다.
</div>
</li>
<li>
<a href="#" class="tab-btn-off round14 blue" tab_type="btn(id:tab3)"><span class="icon icon-polder"></span>자료실</a>
<div class="tab-content boxSized round9 light-blue" style="display:none;" tab_type="content(id:tab3)">
자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다. <br /> 자료실 탭 내용입니다.
</div>
</li>
</ul>
</div>
[상단버튼 색상 입히기2] 예제소스보기
TOP
등록일:
마지막 수정일:
스타일시트(CSS)
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
| 글순서NO |
*(첨부파일) |
제목 |
추천 |
조회 |
작성일↑ |
| 12 |
없음 |
레이아웃 구조 |
추천:0 |
조회:5908 |
|
| 11 |
없음 |
색상표 |
추천:0 |
조회:5673 |
|
| 10 |
없음 |
버튼 |
추천:0 |
조회:9219 |
|
| 9 |
없음 |
하이라이트 |
추천:0 |
조회:4973 |
|
| 8 |
없음 |
인용구 |
추천:0 |
조회:3669 |
|
| 7 |
없음 |
테이블(표) |
추천:0 |
조회:3823 |
|
| 6 |
없음 |
박스 리스트 |
추천:0 |
조회:4256 |
|
| 5 |
없음 |
현재글:텝박스 |
추천:0 |
조회:4536 |
|
| 4 |
없음 |
아이콘 |
추천:0 |
조회:6826 |
|
| 3 |
없음 |
반응형 기타 |
추천:0 |
조회:3681 |
|
