UI/UX 실무
2017.05.20 21:36

실무프로젝트 - 3일차

조회 수 54 추천 수 0 댓글 3
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- 메인페이지 

  • ?
    콘디쌤 2017.05.22 09:44


    <!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>
                
                <div class="page-wrap">
                    <div class="page sel"></div>
                    <div class="page"></div>
                    <div class="page"></div>
                </div>
                
                <div class="prev"></div>
                <div class="next"></div>
                
            </section> 
            
            <section class="brand">
            
                <div class="tview-wrap">
                    <div class="tview sel">
                        <div class="tleft"><img src="img/main-brand04.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand05.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand01.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand02.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                    <div class="tview">
                        <div class="tleft"><img src="img/main-brand03.jpg"/></div>
                        <div class="tright"></div>
                    </div>
                </div>
                
                <div class="tab-wrap">
                    <div class="tab sel"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                    <div class="tab"></div>
                </div>
            
            </section>
            
            <section class="community">
                
                <div class="board">
                    <div class="list-wrap">
                        <div class="list">
                            <div class="day">10</div>
                            <div class="month">2016.10</div>
                            <div class="subject">밀크앤소다 패밀리세일 진행!</div>
                        </div>
                        <div class="list">
                            <div class="day">12</div>
                            <div class="month">2016.09</div>
                            <div class="subject">[신세계백화점 스타필드 하남] 밀크앤소다 GRAND OP</div>
                        </div>
                        <div class="list"></div>
                        <div class="list"></div>
                    </div>
                    
                </div>
            
            
            </section>
            
            
            
        
        </div>
         
        <footer></footer>
    </body>
    </html>

    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%);
    }
    
    section.visual .page-wrap {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page {
        float: left;
        width: 13px;
        height: 21px;
        margin: 0 5px;
        background-image: url(../img/main-top-dot.png);
        background-position: -19px -72px; 
        cursor: pointer;
    }
    section.visual .page.sel {
        background-position: 0px -72px; 
    }
    section.visual .prev {
        position: absolute;
        top: 80px;
        left: calc(50% - 440px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        cursor: pointer;
    }
    section.visual .next {
        position: absolute;
        top: 80px;
        left: calc(50% + 414px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        background-position: right top;
        cursor: pointer;
    }
    
    section.brand {
        min-width: 1992px;
        height: 933px;
        left: 50%;
        transform: translateX(-50%);
    } 
    section.brand .tview {
        display: none;
    }
    section.brand .tview.sel {
        display: block;
    }
    section.brand .tview .tleft {
        width: 50%;
        float: left;
    }
    section.brand .tview .tright {
        width: 50%;
        float: left;
    }
    section.brand .tview .tleft img {
        width: 100%;
    }
    section.brand .tab-wrap {
        position: absolute;
        top: 0;
        right: 50%;
    }
    section.brand .tab {
        width: 96px;
        height: 84px;
        float: left;
        background-image: url(../img/main-brand-select.png);
        margin-left: 1px;
        cursor: pointer;
    }
    section.brand .tab.sel {
        background-position-x: -140px;
    }
    
    section.brand .tab:nth-child(1) {
        background-position-y: -300px;
    }
    section.brand .tab:nth-child(2) {
        background-position-y: -500px;
    }
    section.brand .tab:nth-child(3) {
        background-position-y: 0px;
    }
    section.brand .tab:nth-child(4) {
        background-position-y: -100px;
    }
    section.brand .tab:nth-child(5) {
        background-position-y: -200px;
    }
    section.brand .tab:nth-child(6) {
        background-position-y: -400px;
    }
    
    section.community {
        width: 1400px;
        height: 974px;
        margin: 0 auto;
        background-image: url(../img/main-conts-c.jpg);
        background-position: center top;
    }
    
    
    section.community .board {
        position: absolute;
        top: 100px;
        left: calc(50% - 110px);
        width: 590px;
        height: 281px;
        background-color: #6d4d41;
        
        background-image: url(../img/main-news.gif);
        background-repeat: no-repeat;
        
    }
    
    
    
    section.community .board .list-wrap {
        position: absolute;
        width: 411px;
        height: inherit;
        right: 0;
        top: 0;
        background-color: #fff;
    }
    section.community .board .list {
        overflow: hidden;
        height: 80px;
        border-bottom: 1px dotted #aaa;
    }
    section.community .board .list:first-child {
        margin-top: 14px;
    }
    section.community .board .day {
        float: left;
        margin: 20px;
        font-size: 30px;
        color: #888;
    }
    section.community .board .month {
        float: left;
        font-size: 13px;
        margin-top: 54px;
        margin-left: -60px;
        color: #aaa;
    }
    section.community .board .subject {
        float: left;
        margin: 40px 0 0 0px;
        color: #aaa;
        width: 300px;
        
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        
    }
    
    
    
    
    
    
    


  • ?
    콘디쌤 2017.05.22 10:23
    <!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>
                
                <div class="page-wrap">
                    <div class="page sel"></div>
                    <div class="page"></div>
                    <div class="page"></div>
                </div>
                
                <div class="prev"></div>
                <div class="next"></div>
                
                <div class="link-wrap">
                    <div class="link"></div>
                    <div class="link"></div>
                    <div class="link"></div>
                </div>
                
            </section> 
            
            <section class="brand">
                <div class="brand-inner">
                    <div class="tview-wrap">
                        <div class="tview sel">
                            <div class="tleft"><img src="img/main-brand04.jpg"/></div>
                            <div class="tright"></div>
                        </div>
                        <div class="tview">
                            <div class="tleft"><img src="img/main-brand05.jpg"/></div>
                            <div class="tright"></div>
                        </div>
                        <div class="tview">
                            <div class="tleft"><img src="img/main-brand01.jpg"/></div>
                            <div class="tright"></div>
                        </div>
                        <div class="tview">
                            <div class="tleft"><img src="img/main-brand02.jpg"/></div>
                            <div class="tright"></div>
                        </div>
                        <div class="tview">
                            <div class="tleft"><img src="img/main-brand03.jpg"/></div>
                            <div class="tright"></div>
                        </div>
                    </div>
    
                    <div class="tab-wrap">
                        <div class="tab sel"></div>
                        <div class="tab"></div>
                        <div class="tab"></div>
                        <div class="tab"></div>
                        <div class="tab"></div>
                        <div class="tab"></div>
                    </div>
                
                </div>
                
                
                <div class="link-wrap">
                    <div class="link"></div>
                    <div class="link"></div>
                    <div class="link"></div>
                </div>
            
            </section>
            
            <section class="community">
                
                <div class="board">
                    <div class="list-wrap">
                        <div class="list">
                            <div class="day">10</div>
                            <div class="month">2016.10</div>
                            <div class="subject">밀크앤소다 패밀리세일 진행!</div>
                        </div>
                        <div class="list">
                            <div class="day">12</div>
                            <div class="month">2016.09</div>
                            <div class="subject">[신세계백화점 스타필드 하남] 밀크앤소다 GRAND OP</div>
                        </div>
                        <div class="list"></div>
                        <div class="list"></div>
                    </div>
                    
                </div>
                
                <div class="banner-wrap">
                
                    <div class="banner">
                        <div class="title">KIBOS EVENT</div>
                        <div class="image"><img src="img/44_1477383169156_0.jpg" /></div>
                    </div>
                    <div class="banner">
                        <div class="title">KIBOS STORY</div>
                        <div class="image"><img src="img/8_1396578169265_0.png" /></div>
                    </div>
                    
                    
                </div>
                
                
                <div class="link-wrap">
                    <div class="link"></div>
                    <div class="link"></div>
                    <div class="link"></div>
                </div>
            
            
            </section>
            
            
            
        
        </div>
         
        <footer></footer>
    </body>
    </html>


    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%);
    }
    
    section.visual .page-wrap {
        position: absolute;
        top: 160px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    section.visual .page {
        float: left;
        width: 13px;
        height: 21px;
        margin: 0 5px;
        background-image: url(../img/main-top-dot.png);
        background-position: -19px -72px; 
        cursor: pointer;
    }
    section.visual .page.sel {
        background-position: 0px -72px; 
    }
    section.visual .prev {
        position: absolute;
        top: 80px;
        left: calc(50% - 440px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        cursor: pointer;
    }
    section.visual .next {
        position: absolute;
        top: 80px;
        left: calc(50% + 414px);
        width: 26px;
        height: 49px;
        background-image: url(../img/main-top-dot.png);
        background-position: right top;
        cursor: pointer;
    }
    
    section.brand {
        height: 933px;
        overflow: hidden;
    } 
    section.brand .brand-inner {
        min-width: 1992px;
        left: 50%;
        transform: translateX(-50%);
        height: inherit;
    }
    
    section.brand .tview {
        display: none;
    }
    section.brand .tview.sel {
        display: block;
    }
    section.brand .tview .tleft {
        width: 50%;
        float: left;
    }
    section.brand .tview .tright {
        width: 50%;
        float: left;
    }
    section.brand .tview .tleft img {
        width: 100%;
    }
    section.brand .tab-wrap {
        position: absolute;
        top: 0;
        right: 50%;
    }
    section.brand .tab {
        width: 96px;
        height: 84px;
        float: left;
        background-image: url(../img/main-brand-select.png);
        margin-left: 1px;
        cursor: pointer;
    }
    section.brand .tab.sel {
        background-position-x: -140px;
    }
    
    section.brand .tab:nth-child(1) {
        background-position-y: -300px;
    }
    section.brand .tab:nth-child(2) {
        background-position-y: -500px;
    }
    section.brand .tab:nth-child(3) {
        background-position-y: 0px;
    }
    section.brand .tab:nth-child(4) {
        background-position-y: -100px;
    }
    section.brand .tab:nth-child(5) {
        background-position-y: -200px;
    }
    section.brand .tab:nth-child(6) {
        background-position-y: -400px;
    }
    
    section.community {
        
        height: 974px;
        margin: 0 auto;
        background-image: url(../img/main-conts-c.jpg);
        background-position: center top;
        overflow: hidden;
    }
    
    
    section.community .board {
        position: absolute;
        top: 100px;
        left: calc(50% - 110px);
        width: 590px;
        height: 281px;
        background-color: #6d4d41;
        
        background-image: url(../img/main-news.gif);
        background-repeat: no-repeat;
        overflow: auto;
        
    }
    
    
    
    section.community .board .list-wrap {
        position: absolute;
        width: 411px;
        height: inherit;
        right: 0;
        top: 0;
        background-color: #fff;
    }
    section.community .board .list {
        overflow: hidden;
        height: 80px;
        border-bottom: 1px dotted #aaa;
    }
    section.community .board .list:first-child {
        margin-top: 14px;
    }
    section.community .board .day {
        float: left;
        margin: 20px;
        font-size: 30px;
        color: #888;
    }
    section.community .board .month {
        float: left;
        font-size: 13px;
        margin-top: 54px;
        margin-left: -60px;
        color: #aaa;
    }
    section.community .board .subject {
        float: left;
        margin: 40px 0 0 0px;
        color: #aaa;
        width: 300px;
        
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        
    }
    
    section.community .banner-wrap {
        position: absolute;
        top: 440px;
        left: calc(50% - 110px);
        width: 590px;
        height: 281px;
        
    }
    section.community .banner {
        float: left;
        width: 289px;
    }
    section.community .banner:last-child {
        float: right;
    }
    section.community .banner .title {
        font-weight: bold;
        margin-bottom: 10px;
        color: #fff;
    }
    
    .link-wrap {
        position: absolute;
        bottom: 60px;
        left: calc(50% - 470px);
    }
    .link {
        background-image: url(../img/org-as.png);
        width: 142px;
        height: 142px;
        float: left;
        margin-right: 8px;
        cursor: pointer;
    }
    .link:nth-child(2) {
        background-position: -149px top;
    }
    .link:nth-child(3) {
        background-position: -298px top;
    }
    
    
    
    
    



  • ?
    콘디쌤 2017.05.22 10:29
    section.community {
        padding-top: 70%;
        margin: 0 auto;
        overflow: hidden;
    }
    section.community .bg {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-image: url(../img/main-conts-c.jpg);
        background-size: cover;
        background-position: center top;
    }
    
?

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 59
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
» 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
10 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