UI/UX 실무
2017.05.17 19:47

실무프로젝트 - 1일차

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- 프로젝트 개요 설명

- 참조 사이트 http://www.kibos.co.kr/main/main.jsp

- brackets 사용하기


- 사이트 구조 분석

- 사이트 설계

- 프로젝트 일정 계획

- 기획 - 디자인 - 코딩 - 보완 - 런칭


- 레이아웃

- 페이지 구성

- 공용 컴포넌트 


  • ?
    콘디쌤 2017.05.17 20:02
    <!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="" />
        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src=""></script>    
    
    </head>
    <body>
        <header></header>
        
        <div class="content"></div>
        
        <footer></footer>
    </body>
    </html>
  • ?
    콘디쌤 2017.05.17 20:06

    Brackets Extention


    - Brackets Snippets (by zaggino)

    - Custom Work

    - Brackets Synapse



  • ?
    콘디쌤 2017.05.18 10:47
    <!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>
            </section> 
        
        </div>
         
        <footer></footer>
    </body>
    </html>


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

    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%);
    }



  • ?
    콘디쌤 2017.05.18 11:22
    $(document).ready(function(){
        
        var vsn = 0; 
            
        $("section.visual").click(function(){
            
            $("section.visual .slide").fadeOut(500);
            $("section.visual .slide").eq( ++vsn % 3 ).fadeIn(500);
            
        });
                      
    });
?

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