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
2163 카페24 일반/상품/갤러리 게시판 비밀글 보기 콘디쌤 2014.12.11 6143
2162 소스자료실 텍스팅 콘디쌤 2014.08.18 3683
2161 PHP PHP Write to File - fwrite() 콘디쌤 2014.07.21 3196
2160 소스자료실 Nanum Barun Gothic 나눔 바른 고딕 웹폰트 콘디쌤 2015.01.01 2333
2159 Android 데이터베이스 연결하기 with SQLite 콘디쌤 2014.07.03 2040
2158 PHP JSON 출력하기 콘디쌤 2014.07.13 1896
2157 Android Java : JSON 가져오기 콘디쌤 2014.07.03 1805
2156 jQuery jQuery parents() Method (2) 콘디쌤 2014.07.20 1472
2155 소스자료실 연산자 콘디쌤 2014.07.13 1464
2154 카페24 출석체크 달력형 콘디쌤 2014.12.11 1461
2153 웹퍼블리셔 [2기] 배현정 콘디쌤 2014.07.16 1428
2152 소스자료실 문자와 숫자 콘디쌤 2014.07.13 1404
2151 Android 화면 높이에 대한 비율 10% 만큼 높이 값 매기기 1 콘디쌤 2014.07.03 1326
2150 PHP PHP 1000단위 마다 (,콤마) 넣기 콘디쌤 2014.07.14 1276
2149 PHP MySQL 데이터 가져오기 콘디쌤 2014.07.14 1216
2148 Android 안드로이드 : 폰넘버(전화번호) 알아내기 콘디쌤 2014.07.26 1214
2147 소스자료실 스크롤바 플러그인 콘디쌤 2014.07.14 1198
2146 카페24 Layout_category : 페이지별 카테고리 선택 메뉴 표시하기 콘디쌤 2014.12.21 1182
2145 CSS Transform Rotate 콘디쌤 2014.08.25 1160
2144 웹퍼블리셔 [5일차] 슬라이더 기본 (M&B magazine) 콘디쌤 2014.07.14 1159
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109