UI/UX 실무
2017.05.23 08:03

실무프로젝트 - 4일차

조회 수 77 추천 수 0 댓글 4
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- 서브페이지 

- GNB / SNB


- 캐러셀 슬라이더

- 도넛 파이차트


  • ?
    콘디쌤 2017.05.23 10:06

    <!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/content.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></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>

    .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: 0; left: 0;
        width: 203px;
        bottom: 0;
    
    }
    
    .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.kibos .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;
    }
    
    





  • ?
    콘디쌤 2017.05.23 10:37

    <!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/content.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"></div>
                        <div class="snb"></div>
                        <div class="snb"></div>
                        <div class="snb"></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>

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

    .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);
        background-repeat: no-repeat;
        background-position-x: 10px;
        cursor: pointer;
    }
    .content.kibos aside .snb:hover {
        background-position-x: -190px;
    }
    .content.kibos aside .snb:nth-child(1) {
        background-position-y: 14px;
    }
    .content.kibos aside .snb:nth-child(2) {
        background-position-y: -32px;
    }
    .content.kibos aside .snb:nth-child(3) {
        background-position-y: -78px;
    }
    .content.kibos aside .snb:nth-child(4) {
        background-position-y: -124px;
    }
    





  • ?
    콘디쌤 2017.05.23 11:19
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     
    <title>슬라이더</title>
     
    <style>
        
        div {
            position: relative;
        }
        
        img {
            vertical-align: top;
        }
        
        .slider {
            width: 1024px;
            height: 768px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .slider .inner {
            position: absolute;
            width: 500%;
            height: inherit;
        }
        
        .slider .slide {
            width: 1024px;
            height: 768px;
            float: left;
        }
        
    </style>
         
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        
    $(document).ready(function(){
        
        
        var sn = 0;
        
        $(".slider").click(function(){
            
            sn++;
            
            $(".slider .inner").stop().animate({
                left: -1024 * sn
            },1000, function(){
                
                if (sn == 4) {
                    sn = 0;
                    $(".slider .inner").css("left", sn);
                }
                
            });
            
        });
        
        
    });    
        
    </script>    
     
    </head>
    <body>
        
        <div class="slider">
            
            <div class="inner">
            
                <div class="slide"><img src="img/Chrysanthemum.jpg" /></div>
                <div class="slide"><img src="img/Desert.jpg" /></div>
                <div class="slide"><img src="img/Hydrangeas.jpg" /></div>
                <div class="slide"><img src="img/Jellyfish.jpg" /></div>
                <div class="slide"><img src="img/Chrysanthemum.jpg" /></div>
                
            </div>
            
        </div>
        
    </body>
    </html>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  • ?
    콘디쌤 2017.05.23 14:27
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
    <title></title>
    
    <style>
        body {
            margin: 0;
        }
        div, header, footer {
            position: relative;
        }
        
        .pie {
            float: left;
            width: 200px;
            height: 200px;
            margin-right: 50px;
            
        }
        
        .pie:before {
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0;
            bottom: 0;
            border: 30px solid #1abc9c;
            border-radius: 50%;
            transform: rotate(0deg);
            clip: rect(auto, 100px, auto, auto);
            transition: transform 1s linear;
        }
        
        .pie.rotate:before {
            transform: rotate(180deg);
        }
        
        .pie .cover {
            
            position: absolute;
            top: 0; left: 0;
            width: 50%; bottom: 0;
            background-color: #fff;
        }
        
        .pie .deg {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0;
            bottom: 0;
            border: 20px solid #1abc9c;
            border-radius: 50%;
            transform: rotate(0deg);
            clip: rect(auto, 100px, auto, auto);
            
            transition-property : transform;
            
            transition-timing-function: linear;
        }
        
        .pie .score {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            color: #ccc;
            z-index: 999;
        }
        .pie .score:after {
            content: '%';
        }
        
       
    </style>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(e) {
        
        
        pieAni( $(".pie").eq(0) );
        pieAni( $(".pie").eq(1) );
        pieAni( $(".pie").eq(2) );
        
        
        function pieAni($pie) {
            
            var score = $pie.attr("score");
            
            var duration = score / 50;
            var deg = score * 3.6 ;
            
            $pie.addClass("rotate");
            $pie.find(".deg").css("transition-duration", duration+"s");
            $pie.find(".deg").css("transform", "rotate("+deg+"deg)");
            
            var $cover = $pie.find(".cover");
            
            setTimeout(function(){
                $cover.fadeOut(0);
            }, 1000);
            
            
            increase($pie, 1, 1, score);
            
        }
        
        function increase($pie, start, next, end) {
            
            
            $pie.find(".score").text( next );
            
            var st = setTimeout(function(){
                if (next < end) {
                    increase($pie, start, next+1, end) ;
                }
            }, 20  );
                
        }
    
    });
    </script>
        
    </head>
    <body>
        <div class="pie" score="90">
            
            <div class="deg"></div>
            <div class="cover"></div>
            <div class="score">0</div>
        </div>
        <div class="pie" score="75">
            
            <div class="deg"></div>
            <div class="cover"></div>
            <div class="score">0</div>
        </div>
        
        <div class="pie" score="85">
            
            <div class="deg"></div>
            <div class="cover"></div>
            <div class="score">0</div>
        </div>
    </body>
    </html>
    
    
    
    
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
2163 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 21
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
2153 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
» 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 101
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