안녕하세요. 이윰MOUNT 입니다.^^

현재 리뉴얼된 이윰넷 사이트의 메인에 탭을 이용하여 여러 정보를 전달할 수 있도록 구성되어 있습니다.

기본적인 스크립트와 CSS는 테마 내 이미 구성되어 있으므로 간단한 소스로 표현이 가능합니다.

현재 비반응형 테마로 배포하고 있는 pc_basic테마와 pc_community테마에 적용 가능하며, 테마 내 /main/index_pc.html 파일을 열어 원하시는 위치에 아래의 소스를 붙여넣습니다.

<div class="eb-main-tab margin-bottom-20">
    <div class="tab-e2">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#main-tab-1" data-toggle="tab">1번탭</a></li>
            <li><a href="#main-tab-2" data-toggle="tab">2번탭</a></li>
            <li><a href="#main-tab-3" data-toggle="tab">3번탭</a></li>
            <li class="last"><a href="#main-tab-4" data-toggle="tab">4번탭</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade active in" id="main-tab-1">
                <div class="tab-content-wrap">
                    1번탭 내용
                </div>
            </div>
            <div class="tab-pane fade in" id="main-tab-2">
                <div class="tab-content-wrap">
                    2번탭 내용
                </div>
            </div>
            <div class="tab-pane fade in" id="main-tab-3">
                <div class="tab-content-wrap">
                    3번탭 내용
                </div>
            </div>
            <div class="tab-pane fade in" id="main-tab-4">
                <div class="tab-content-wrap">
                    4번탭 내용
                </div>
            </div>
        </div>
    </div>
</div>

그리고 약간의 CSS 변형이 필요한데... 아래의 소스를 테마 내 /css/custom.css 파일에 넣어줍니다.

.eb-main-tab .nav-tabs > li > a {margin-right:0}
.eb-main-tab .tab-e2 .nav-tabs li a {padding:7px 15px;background:none;border:solid 1px #e5e5e5;border-bottom:none;border-right:none;font-weight:bold;color:#555;text-align:center;width:149px}
.eb-main-tab .tab-e2 .nav-tabs li.last a {width:148px}
.eb-main-tab .tab-e2 .nav-tabs li.active a {background:#31313b;color:#fff; padding:8px 15px 7px;border:0}
.eb-main-tab .tab-e2 .nav-tabs li.last {border-right:1px solid #e5e5e5}
.eb-main-tab .tab-e2 .nav-tabs li.active.last {border-right:1px solid #31313b}
.eb-main-tab .tab-e2 .tab-content {position:relative;overflow:hidden;margin-top:1px;margin-bottom:0;padding:0;border:solid 1px #e5e5e5;border-top:1px solid #31313b;height:680px}
.eb-main-tab .tab-e2 .tab-content-wrap {position:relative;display:block;overflow:hidden;padding:10px}

그럼 아래와 같이 적용이 되며 탭명과 탭내용을 넣어 원하시는 정보를 전달하시면 됩니다. 간단하죠.^^