UI/UX 실무
2017.05.18 18:35

실무프로젝트 - 2일차

조회 수 59 추천 수 0 댓글 3
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
- 메인 페이지 구성 
- 서브 섹션
- 푸터
  • ?
    콘디쌤 2017.05.19 09:26

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
    <title></title>
     
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/index.css" />
         
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/common.js"></script>    
    <script src="js/index.js"></script>    
     
    </head>
    <body>
        <header></header>
         
        <div class="content">
        
            <section class="visual">
                <div class="slide">
                    <div class="image"><img src="img/main-A.jpg" /></div>
                    <div class="sign"><img src="img/main-top01_sub.png" /></div>
                </div>    
                <div class="slide">
                    <div class="image"><img src="img/main-B.jpg" /></div>
                    <div class="sign"><img src="img/main-top02_sub.png" /></div>
                </div>
                <div class="slide">
                    <div class="image"><img src="img/main-C.jpg" /></div>
                    <div class="sign"><img src="img/main-top03_sub.png" /></div>
                </div>
                
                <div class="page-wrap">
                    <div class="page sel"></div>
                    <div class="page"></div>
                    <div class="page"></div>
                </div>
                
            </section> 
        
        </div>
         
        <footer></footer>
    </body>
    </html>

    section.visual {
        padding-top: 47.4%;
        background-color: antiquewhite;
    }
    section.visual .slide {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: none;
    }
    section.visual .slide:first-child {
        display: block;
    }
    section.visual .slide .image img {
        width: 100%;
    }
    section.visual .slide .sign {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 220px;
        background-image: url(../img/main-top.png);
    }
    section.visual .slide .sign img {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page-wrap {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page {
        float: left;
        width: 13px;
        height: 21px;
        margin: 0 5px;
        background-image: url(../img/main-top-dot.png);
        background-position: -19px -72px; 
        cursor: pointer;
    }
    section.visual .page.sel {
        background-position: 0px -72px; 
    }
    
    
    
    
    
    
    
    
    
    
    
    




  • ?
    콘디쌤 2017.05.19 09:44

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
    <title></title>
     
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/index.css" />
         
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/common.js"></script>    
    <script src="js/index.js"></script>    
     
    </head>
    <body>
        <header></header>
         
        <div class="content">
        
            <section class="visual">
                <div class="slide">
                    <div class="image"><img src="img/main-A.jpg" /></div>
                    <div class="sign"><img src="img/main-top01_sub.png" /></div>
                </div>    
                <div class="slide">
                    <div class="image"><img src="img/main-B.jpg" /></div>
                    <div class="sign"><img src="img/main-top02_sub.png" /></div>
                </div>
                <div class="slide">
                    <div class="image"><img src="img/main-C.jpg" /></div>
                    <div class="sign"><img src="img/main-top03_sub.png" /></div>
                </div>
                
                <div class="page-wrap">
                    <div class="page sel"></div>
                    <div class="page"></div>
                    <div class="page"></div>
                </div>
                
                <div class="prev"></div>
                <div class="next"></div>
                
            </section> 
        
        </div>
         
        <footer></footer>
    </body>
    </html>

    section.visual {
        padding-top: 47.4%;
        background-color: antiquewhite;
    }
    section.visual .slide {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: none;
    }
    section.visual .slide:first-child {
        display: block;
    }
    section.visual .slide .image img {
        width: 100%;
    }
    section.visual .slide .sign {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 220px;
        background-image: url(../img/main-top.png);
    }
    section.visual .slide .sign img {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page-wrap {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page {
        float: left;
        width: 13px;
        height: 21px;
        margin: 0 5px;
        background-image: url(../img/main-top-dot.png);
        background-position: -19px -72px; 
        cursor: pointer;
    }
    section.visual .page.sel {
        background-position: 0px -72px; 
    }
    section.visual .prev {
        position: absolute;
        top: 80px;
        left: calc(50% - 440px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        cursor: pointer;
    }
    section.visual .next {
        position: absolute;
        top: 80px;
        left: calc(50% + 414px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        background-position: right top;
        cursor: pointer;
    }
    
    
    
    
    
    
    
    
    
    
    

    $(document).ready(function(){
        
        var vsn = 0; 
        
        $("section.visual .page").click(function(){
            
            if ( vsn == $(this).index() ) {
                return;
            }
            
            vsn = $(this).index();
            
            visualAni();
            
        });
        
        $("section.visual .next").click(function(){
            
            vsn++;
            
            if (vsn == 3)
                vsn = 0;
            
            visualAni();
            
        });
        
        $("section.visual .prev").click(function(){
            
            vsn--;
            
            if (vsn == -1)
                vsn = 2;
            
            visualAni();
            
        });
        
        
        function visualAni() {
            $("section.visual .slide").fadeOut(500);
            $("section.visual .slide").eq( vsn ).fadeIn(500);
            
            $("section.visual .page.sel").removeClass("sel");
            $("section.visual .page").eq( vsn ).addClass("sel");
        }
        
        
        
        
        
        
        
        
        
        
        
    });





  • ?
    콘디쌤 2017.05.19 10:44

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
    <title></title>
     
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/index.css" />
         
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/common.js"></script>    
    <script src="js/index.js"></script>    
     
    </head>
    <body>
        <header></header>
         
        <div class="content">
        
            <section class="visual">
                <div class="slide">
                    <div class="image"><img src="img/main-A.jpg" /></div>
                    <div class="sign"><img src="img/main-top01_sub.png" /></div>
                </div>    
                <div class="slide">
                    <div class="image"><img src="img/main-B.jpg" /></div>
                    <div class="sign"><img src="img/main-top02_sub.png" /></div>
                </div>
                <div class="slide">
                    <div class="image"><img src="img/main-C.jpg" /></div>
                    <div class="sign"><img src="img/main-top03_sub.png" /></div>
                </div>
                
                <div class="page-wrap">
                    <div class="page sel"></div>
                    <div class="page"></div>
                    <div class="page"></div>
                </div>
                
                <div class="prev"></div>
                <div class="next"></div>
                
            </section> 
            
            <section class="brand">
            
                <div class="tview-wrap">
                    <div class="tview sel">
                        <div class="tleft"><img src="img/main-brand04.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand05.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand01.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand02.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand03.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                </div>
                
                <div class="tab-wrap">
                    <div class="tab sel"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                </div>
            
            </section>
            
            
            
        
        </div>
         
        <footer></footer>
    </body>
    </html>

    section.visual {
        padding-top: 47.4%;
        background-color: antiquewhite;
    }
    section.visual .slide {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: none;
    }
    section.visual .slide:first-child {
        display: block;
    }
    section.visual .slide .image img {
        width: 100%;
    }
    section.visual .slide .sign {
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 220px;
        background-image: url(../img/main-top.png);
    }
    section.visual .slide .sign img {
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page-wrap {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page {
        float: left;
        width: 13px;
        height: 21px;
        margin: 0 5px;
        background-image: url(../img/main-top-dot.png);
        background-position: -19px -72px; 
        cursor: pointer;
    }
    section.visual .page.sel {
        background-position: 0px -72px; 
    }
    section.visual .prev {
        position: absolute;
        top: 80px;
        left: calc(50% - 440px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        cursor: pointer;
    }
    section.visual .next {
        position: absolute;
        top: 80px;
        left: calc(50% + 414px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        background-position: right top;
        cursor: pointer;
    }
    
    section.brand {
        min-width: 1992px;
        height: 933px;
        left: 50%;
        transform: translateX(-50%);
    } 
    section.brand .tview {
        display: none;
    }
    section.brand .tview.sel {
        display: block;
    }
    section.brand .tview .tleft {
        width: 50%;
        float: left;
    }
    section.brand .tview .tright {
        width: 50%;
        float: left;
    }
    section.brand .tview .tleft img {
        width: 100%;
    }
    section.brand .tab-wrap {
        position: absolute;
        top: 0;
        right: 50%;
    }
    section.brand .tab {
        width: 96px;
        height: 84px;
        float: left;
        background-image: url(../img/main-brand-select.png);
        margin-left: 1px;
        cursor: pointer;
    }
    section.brand .tab.sel {
        background-position-x: -140px;
    }
    
    section.brand .tab:nth-child(1) {
        background-position-y: -300px;
    }
    section.brand .tab:nth-child(2) {
        background-position-y: -500px;
    }
    section.brand .tab:nth-child(3) {
        background-position-y: 0px;
    }
    section.brand .tab:nth-child(4) {
        background-position-y: -100px;
    }
    section.brand .tab:nth-child(5) {
        background-position-y: -200px;
    }
    section.brand .tab:nth-child(6) {
        background-position-y: -400px;
    }
    
    
    
    
    
    

    $(document).ready(function(){
        
        var vsn = 0; 
        
        $("section.visual .page").click(function(){
            
            if ( vsn == $(this).index() ) {
                return;
            }
            
            vsn = $(this).index();
            
            visualAni();
            
        });
        
        $("section.visual .next").click(function(){
            
            vsn++;
            
            if (vsn == 3)
                vsn = 0;
            
            visualAni();
            
        });
        
        $("section.visual .prev").click(function(){
            
            vsn--;
            
            if (vsn == -1)
                vsn = 2;
            
            visualAni();
            
        });
        
        
        function visualAni() {
            $("section.visual .slide").fadeOut(500);
            $("section.visual .slide").eq( vsn ).fadeIn(500);
            
            $("section.visual .page.sel").removeClass("sel");
            $("section.visual .page").eq( vsn ).addClass("sel");
        }
        
        $("section.brand .tab").click(function(){
            $("section.brand .tab.sel").removeClass("sel");
            $(this).addClass("sel");
            
            $("section.brand .tview.sel").removeClass("sel");
            $("section.brand .tview").eq( $(this).index() ).addClass("sel");
        });
        
        
    });



?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
2163 소스자료실 흘러가는 슬라이더(배너) 콘디쌤 2016.01.13 98
2162 소스자료실 휠 커버 스핀 콘디쌤 2015.05.15 138
2161 소스자료실 회전하는 슬라이더 콘디쌤 2016.05.30 89
2160 소스자료실 회전 중심축 변경하기 콘디쌤 2014.10.29 370
2159 소스자료실 회전 : 지구, 태양, 달 ~ 돌고 돌고 콘디쌤 2014.07.14 439
2158 카페24 회원정보 수정 콘디쌤 2014.12.11 260
2157 카페24 회원가입 결과 콘디쌤 2014.12.10 168
2156 UI/UX 실무 회원가입 폼 1 콘디쌤 2017.02.23 27
2155 카페24 회원가입 콘디쌤 2014.12.10 332
2154 카페24 회사정보 / 푸터 콘디쌤 2014.12.09 261
2153 카페24 회사소개 콘디쌤 2014.12.11 129
2152 카페24 환불계좌등록 팝업 콘디쌤 2014.12.10 182
2151 Android 화면 높이에 대한 비율 10% 만큼 높이 값 매기기 1 콘디쌤 2014.07.03 1327
2150 소스자료실 현대자동차 기본 소스 : fixed 메뉴바, reel 자동차 회전 콘디쌤 2014.07.14 490
2149 소스자료실 현대자동차 reel 플러그인 2 file 콘디쌤 2014.07.14 487
2148 소스자료실 현대자동차 fixed 메뉴바 1 file 콘디쌤 2014.07.14 325
2147 소스자료실 현대자동차 fixed 메뉴바 콘디쌤 2014.07.14 462
2146 소스자료실 현대오토에버 슬라이더 기본 콘디쌤 2014.07.14 446
2145 소스자료실 현대 오토에버 연속 슬라이더 콘디쌤 2014.07.14 488
2144 카페24 현금영수증 신청양식 작성 팝업 콘디쌤 2014.12.10 546
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109