UI/UX 실무
2017.05.23 17:58

실무프로젝트 - 5일차

조회 수 54 추천 수 0 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

- 서브페이지 

- 회사소개 (Kibos 소개 / 인사말 / 연혁 / 찾아오시는 길)

  • ?
    콘디쌤 2017.05.24 09:40

    .content {
        overflow: hidden;
        background-color: #f4f4f4;
    }
    
    .content .sign {
        position: absolute;
        left: 0; right: 0;
        top: 0; height: 178px;
        background-image: url(../img/top-banner.jpg);
        background-position: center top;
        min-width: 980px;
    }
    
    .content .inner {
        width: 980px;
        margin: 0 auto;
        min-height: 850px;
        
    }
    
    .content aside {
        position: absolute;
        top: -178px; left: 0;
        width: 203px;
        bottom: 0;
    
        background-color: #4b3229;
        border-bottom: 1px solid #3e562d;
    }
    
    .content article {
        margin: 178px 0 0 203px;
        
    }
    .content article .title {
        position: absolute;
        top: 60px; left: 60px;
    }
    .content article .info {
        position: absolute;
        top: 0px; right: 0;
    }
    .content article .cont {
        
        position: absolute;
        top: 150px; left: 60px;
    }
    .content article .bottom {
        position: absolute;
        right: 0; 
        top: 700px;
    }
    .content aside .title {
        background-position: center center;
        background-repeat: no-repeat;
        background-color: #6d4d41;
        width: 203px;
    }
    .content aside .snb-wrap {
        margin-top: 14px;
        background-color: rgba(0, 0, 0, 0.1);
        height: 400px;
    }
    .content aside .snb {
        margin: 0 auto 1px;
        width: 189px;
        height: 44px;
        background-color: #60453b;
        border: 1px solid #805f53;
        
        background-repeat: no-repeat;
        background-position-x: 10px;
    }
    .content aside .snb a {
        display: block;
        line-height: 44px;
        text-indent: -9999px;
    }
    
    .content aside .snb:nth-child(1) {
        background-position-y: 14px;
    }
    .content aside .snb:nth-child(2) {
        background-position-y: -32px;
    }
    .content aside .snb:nth-child(3) {
        background-position-y: -78px;
    }
    .content aside .snb:nth-child(4) {
        background-position-y: -124px;
    }
    .content aside .snb:hover {
        background-position-x: -190px;
    }
    .content aside .snb.sel {
        background-position-x: -190px;
    }
    
    
    
    

    .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.kibos aside .title {
        height: 178px;
        background-image: url(../img/h3-company.png);
    }
    .content.kibos aside .snb {
        background-image: url(../img/lnb-company.png);
    }
    
    

    <!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 kibos">
            <div class="sign"></div>
            <div class="inner">
                <aside>
                    <div class="title"></div>
                    
                    <div class="snb-wrap">
                        <div class="snb sel"><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"><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 kibos">
            <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 kibos">
            <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>
                    <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 kibos">
            <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>
                    <div class="bottom"></div>
                </article>
            </div>
        </div>
         
        <footer></footer>
    </body>
    </html>





  • ?
    콘디쌤 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");
        });
                      
    });





?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
2163 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 22
2162 UI/UX 실무 실무프로젝트 - kibos 완료 콘디쌤 2017.06.01 31
2161 소스자료실 스크롤 클리핑 콘디쌤 2017.05.31 26
2160 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
2159 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
2158 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
2157 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
2156 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
2155 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
2154 UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
» UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
2152 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
2151 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
2150 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
2149 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
2148 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 102
2147 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
2146 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
2145 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
2144 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109