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
23 UI/UX 실무 모바일 앱 제작 - 상세 페이지 / 팝업 3 콘디쌤 2017.04.26 73
22 iOS Probably this is either a connection problem, or platform spec is incorrect. 1 콘디쌤 2017.04.26 45
21 iOS [팁05] GCM으로 Android, iOS 둘다 push notification 을 할 수 있다. 콘디쌤 2017.04.26 58
20 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
19 UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
18 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
17 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
16 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 102
15 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
14 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
13 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
12 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
11 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
» UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
9 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
8 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
7 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
6 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
5 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
4 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
Board Pagination Prev 1 ... 100 101 102 103 104 105 106 107 108 109 Next
/ 109