콘디쌤2017.05.24 10:46

.content.company aside .title {
    background-image: url(../img/h3-company.png);
}
.content.company aside .snb {
    background-image: url(../img/lnb-company.png);
}

.content.kibos article .title {
    background-image: url(../img/h4-tit1-01.gif);
    width: 142px;
    height: 30px;
}
.content.kibos .info {
    background-image: url(../img/pic-info.jpg); 
    width: 448px;
    height: 296px;
}
.content.kibos .cont {
    background-image: url(../img/kibos-info.png); 
    width: 691px;
    height: 600px;
}
.content.kibos .bottom {
    background-image: url(../img/info-img.jpg); 
    width: 448px;
    height: 163px;
}

.content.greeting article .title {
    background-image: url(../img/h4-tit1-02.gif);
    width: 82px;
    height: 30px;
}
.content.greeting .cont {
    background-image: url(../img/greeting-img.jpg); 
    width: 678px;
    height: 800px;
}
.content.history article .title {
    background-image: url(../img/h4-tit1-03.gif);
    width: 52px;
    height: 31px;
}
.content.kibosWay article .title {
    background-image: url(../img/h4-tit1-04.gif);
    width: 168px;
    height: 31px;
}
.content.history .tab-wrap {
    overflow: hidden;
}
.content.history .tab {
    width: 348px;
    height: 42px;
    float: left;
    cursor: pointer;
    background-image: url(../img/stroy-tab.gif);
    border-bottom: 2px solid #ffd345;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.content.history .tab:nth-child(2) {
    background-position-x: right;
}
.content.history .tab.sel {
    background-position-y: bottom;
}
.content.history .tview {
    display: none;
}
.content.history .tview.sel {
    display: block;
}
.content.history .tview:nth-child(1) {
    width: 700px;
    height: 1096px;
    background-image: url(../img/history01.jpg);
}
.content.history .tview:nth-child(2) {
    width: 700px;
    height: 874px;
    background-image: url(../img/history02.jpg);
}

.content.kibosWay .tab-wrap {
    overflow: hidden;
}
.content.kibosWay .tab {
    width: 348px;
    height: 42px;
    float: left;
    cursor: pointer;
    background-image: url(../img/way-tab.gif);
    border-bottom: 2px solid #ffd345;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.content.kibosWay .tab:nth-child(2) {
    background-position-x: right;
}
.content.kibosWay .tab.sel {
    background-position-y: bottom;
}
.content.kibosWay .tview {
    display: none;
}
.content.kibosWay .tview.sel {
    display: block;
}



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content company greeting">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb sel"><a href="greeting.html">인사말</a></div>
                    <div class="snb"><a href="history.html">연혁</a></div>
                    <div class="snb"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont"></div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content company history">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb"><a href="greeting.html">인사말</a></div>
                    <div class="snb sel"><a href="history.html">연혁</a></div>
                    <div class="snb"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont">
                
                    <div class="tab-wrap">
                        <div class="tab sel"></div>
                        <div class="tab"></div>
                    </div>
                    <div class="tview-wrap">
                        <div class="tview sel">
                        </div>
                        <div class="tview">
                        </div>
                    </div>
                
                </div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>KIBOS</title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/sub.css" />
<link rel="stylesheet" href="css/company.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content company kibosWay">
        <div class="sign"></div>
        <div class="inner">
            <aside>
                <div class="title"></div>
                
                <div class="snb-wrap">
                    <div class="snb"><a href="kibos.html">Kibos 소개</a></div>
                    <div class="snb"><a href="greeting.html">인사말</a></div>
                    <div class="snb"><a href="history.html">연혁</a></div>
                    <div class="snb sel"><a href="kibosWay.html">찾아오시는길</a></div>
                </div>
            </aside>
            <article>
                <div class="title"></div>
                <div class="info"></div>
                <div class="cont">
                
                    <div class="tab-wrap">
                        <div class="tab sel"></div>
                        <div class="tab"></div>
                    </div>
                    <div class="tview-wrap">
                        <div class="tview sel">
                        </div>
                        <div class="tview">
                        </div>
                    </div>
                    
                </div>
                <div class="bottom"></div>
            </article>
        </div>
    </div>
     
    <footer></footer>
</body>
</html>

$(document).ready(function(){
    
    $("header").load("header.html");
    $("footer").load("footer.html");
    
    $(".content.history .tab").click(function(){
        var tn = $(this).index();
        $(".content.history .tab.sel").removeClass("sel");
        $(this).addClass("sel");
        $(".content.history .tview.sel").removeClass("sel");
        $(".content.history .tview").eq(tn).addClass("sel");
    });
                  
    $(".content.kibosWay .tab").click(function(){
        var tn = $(this).index();
        $(".content.kibosWay .tab.sel").removeClass("sel");
        $(this).addClass("sel");
        $(".content.kibosWay .tview.sel").removeClass("sel");
        $(".content.kibosWay .tview").eq(tn).addClass("sel");
    });
                  
});





문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)