어디에서나 바로가기 기능을 사용하실 수 있습니다. 주메뉴 이동은 알트 키 플러스 1 키이고, 부메뉴 이동은 알트 키 플러스 2 키이고, 본문 이동은 알트 키 플러스 3 키입니다. 알트 키 플러스 J 키는 일반모드와 텍스트모드로 전환합니다.

현재위치
  1. HOME
  2. >배우기
  3. > 스타일시트(CSS)

본문 영역

텝박스 상세보기

작성자: 관리자 추천: 0  조회: 4454

텝박스


/* 텝박스 공용 */ /* 버튼(클릭시) */ .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)


.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%}

  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[상단형 tab-1] 예제소스보기


좌측형(tab-2)


.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%}

  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[좌측형 tab-2] 예제소스보기


우측형(tab-3)


.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%}

  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[우측형 tab-3] 예제소스보기


하단형(tab-4)


.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%}

  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[하단형 tab-4] 예제소스보기


애니메이션 응용


버튼 클릭시, 버튼은 서서히 색상이 변하고, 내용은 방향을 가지고 슬라이드 됩니다.

상단형(tab-1)


  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[상단형 tab-1 + 슬라이드 응용] 예제소스보기


좌측형(tab-2)


  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[좌측형 tab-2 + 슬라이드 응용] 예제소스보기


우측형(tab-3)


  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[우측형 tab-3 + 슬라이드 응용] 예제소스보기


하단형(tab-4)


  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[하단형 tab-4 + 슬라이드 응용] 예제소스보기


색상 입히기


  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[상단버튼 색상 입히기1] 예제소스보기


  • 공지사항
    공지사항 탭 내용입니다.
  • 묻고답하기
  • 자료실

[상단버튼 색상 입히기2] 예제소스보기

TOP

등록일:
마지막 수정일:
답변
목록

스타일시트(CSS)

총글수: 12
스타일시트(CSS) 목록 : 이표는 글순서,첨부파일,제목,추천수,조회수,작성일을 확인할 수 있습니다
글순서NO *(첨부파일) 제목 추천 조회 작성일↑
12 없음 레이아웃 구조 추천:0 조회:5885
11 없음 색상표 추천:0 조회:5647
10 없음 버튼 추천:0 조회:9193
9 없음 하이라이트 추천:0 조회:4949
8 없음 인용구 추천:0 조회:3653
7 없음 테이블(표) 추천:0 조회:3805
6 없음 박스 리스트 추천:0 조회:4233
5 없음 현재글:텝박스 추천:0 조회:4454
4 없음 아이콘 추천:0 조회:6803
3 없음 반응형 기타 추천:0 조회:3664
초기화 
스타일시트(CSS) 검색