UI/UX 실무
2017.05.25 09:12

실무프로젝트 - 6일차

조회 수 24 추천 수 0 댓글 6
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- header GNB

  • ?
    콘디쌤 2017.05.25 09:48
    $(document).ready(function(){
        
        $("header").load("header.html", function(){
            
            var url = location.href;
            var html = url.substr( url.lastIndexOf("/") + 1 ) ;
            
            if ( html == "kibos.html") {
                $("nav .gnb").eq(0).addClass("sel");
            }
            
        });
        
        $("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");
        });
                      
    });

    <div class="inner">
        <div class="logo"><img src="img/logo.png" /></div>
        <div class="util-wrap">
            <div class="util">LOGIN</div>
            <div class="util">JOIN</div>
            <div class="util">SITEMAP</div>
            <div class="util">제휴문의</div>
            <div class="util">공식쇼핑몰</div>
        </div>
    </div>
    
    <nav>
        <div class="gnb"><a href="#">회사소개</a></div>
        <div class="gnb"><a href="#">브랜드</a></div>
        <div class="gnb"><a href="#">고객센터</a></div>
        <div class="gnb"><a href="#">커뮤니티</a></div>
        <div class="gnb"><a href="#">홍보센터</a></div>
    </nav>

    header {
        height: 176px;
        background-image: url(../img/top.gif);
    }
    
    header .inner {
        width: 960px;
        margin: 0 auto;
        height: 113px;
    }
    
    header .logo {
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
    }
    header .util-wrap {
        position: absolute;
        top: 50px;
        right: 0;
    }
    .util-wrap .util {
        float: left;
        color: #fff;
    }
    header nav {
        height: 63px;
        background-color: #4c4c4e;
        border-top: 1px solid #575758;
        text-align: center;
    }
    
    nav .gnb {
        height: 19px;
        display: inline-block;
        background-image: url(../img/gnb-mu.gif);
        margin-top: 20px;
    }
    nav .gnb:nth-child(1) {
        width: 103px;
    }
    nav .gnb:nth-child(2) {
        width: 92px;
        background-position: -103px 0;
    }
    nav .gnb:nth-child(3) {
        width: 106px;
        background-position: -195px 0;
    }
    nav .gnb:nth-child(4) {
        width: 101px;
        background-position: -301px 0;
    }
    nav .gnb:nth-child(5) {
        width: 98px;
        background-position: -402px 0;
    }
    
    nav .gnb a {
        display: block;
        text-indent: -9999px;
    }
    nav .gnb.sel {
        background-image: url(../img/gnb-mu-over.gif);
    }
    
    
    
    
    
    
    
  • ?
    콘디쌤 2017.05.25 10:35

    http://crlog.com/kibos/


    오른쪽 마우스 눌러서 소스보기

  • ?
    콘디쌤 2017.05.25 12:18
    .circle {
        border-radius: 50%;
        display: inline-block;
        position: relative;
    }
    .circle img {
        border-radius: 50%;
        display: block;
        border:1px solid #fff;
    }
    .circle:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%,rgba(255,255,255,1) 100%);
        border-radius: 50%;
        position: absolute;
        top: 0; left: 0;
    }
  • ?
    콘디쌤 2017.05.25 12:23
    <html>
      <style type='text/css'>
        div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
        img {
          -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
        }
      </style>
      <body>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
        <img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' />
      </body>
    </html>
  • ?
    콘디쌤 2017.05.25 12:39
    http://crlog.com/2017/05251233.html
  • ?
    콘디쌤 2017.05.25 17:16
    TEXT CLIPPING
    파이차트 업그레이드
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
319 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 21
318 UI/UX 실무 실무프로젝트 - kibos 완료 콘디쌤 2017.06.01 31
317 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
316 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
315 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
314 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
» UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
312 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
311 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
310 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
309 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
308 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 101
307 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
306 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
305 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
304 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
303 UI/UX 실무 모바일 앱 제작 - 상세 페이지 / 팝업 3 콘디쌤 2017.04.26 73
302 UI/UX 실무 모바일 앱 제작 기초 4 콘디쌤 2017.04.25 82
301 UI/UX 실무 반응형 - 아모레퍼시픽 설화수 7일차 (복습) 5 콘디쌤 2017.04.24 76
300 UI/UX 실무 반응형 - 아모레퍼시픽 설화수 6일차 (복습) 3 콘디쌤 2017.04.23 67
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 16 Next
/ 16