UI/UX 실무
2017.04.26 14:27

모바일 앱 제작 - 상세 페이지 / 팝업

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- popup

- detail page 

- multi page navigation

  • ?
    콘디쌤 2017.04.27 09:45
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <title>레시피</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
    </head>
    
    <body>
    
    	<div class="page active">
    		<header>
            	<div class="title">하이레시피</div>
            </header>
            
            <div class="content">
            
            	<div class="listview">
                	
                    <div class="list">
                    	<div class="thumb"><img src="img/Chrysanthemum.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Desert.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Hydrangeas.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Jellyfish.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Koala.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Lighthouse.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Penguins.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Tulips.jpg" /></div>
                        <div class="subject"></div>
                        <div class="desc"></div>
                    </div>
                    
                </div>
                
            </div> 
            
            <footer></footer>   
        </div>
    
    
    </body>
    </html>
    


    @charset "utf-8";
    /* CSS Document */
    
    * {
    	font-family: sans-serif;
    	letter-spacing: -1px;
    }
    
    body {
    	margin: 0;
    }
    div, header, footer, section, nav {
    	position: relative;
    }
    img {
    	vertical-align: top;
    }
    
    .page {
    	position: fixed;
    	top: 0; left: 0; right: 0; bottom: 0;
    	background-color: #fff;
    	transform: translateX(100%);
    	transition: transform 0.3s;
    }
    .page.active {
    	transform: translateX(0);
    }
    
    
    header {
    	position: fixed;
    	top: 0; left: 0; right: 0;
    	height: 48px;
    	background-color: orangered;
    }
    header .title {
    	position: absolute;
    	top: 50%; left: 50%;
    	transform: translate( -50%, -50%);
    	font-size: 1.2em;
    	color: #fff;
    }
    
    .content {
    	position: absolute; 
    	top: 48px; left: 0; right: 0; bottom: 0;
    	overflow: auto;
    }
    
    .listview {
    	padding: 1%;
    }
    .list {
    	float: left;
    	width: 48%;
    	margin: 1%;
    	padding-top: 36%;
    }
    
    .list .thumb {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    }
    .list .thumb img {
    	height: 100%;
    }
    
    
    
    
    



  • ?
    콘디쌤 2017.04.27 10:19
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <title>레시피</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
    </head>
    
    <body>
    
    	<div class="page active">
    		<header>
            	<div class="title">하이레시피</div>
            </header>
            
            <div class="content">
            
            	<div class="listview">
                	
                    <div class="list">
                    	<div class="thumb"><img src="img/Chrysanthemum.jpg" /></div>
                        <div class="subject">국화</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Desert.jpg" /></div>
                        <div class="subject">사막</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Hydrangeas.jpg" /></div>
                        <div class="subject">수국</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Jellyfish.jpg" /></div>
                        <div class="subject">해파리</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Koala.jpg" /></div>
                        <div class="subject">코알라</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Lighthouse.jpg" /></div>
                        <div class="subject">등대</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Penguins.jpg" /></div>
                        <div class="subject">펭귄</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Tulips.jpg" /></div>
                        <div class="subject">튤립</div>
                        <div class="desc"></div>
                    </div>
                    
                </div>
                
            </div> 
            
            <footer></footer>   
        </div>
        
        
        <div class="page detail">
    		<header>
            	<button class="back">이전</button>
            	<div class="title">국화</div>
            </header>
            
            <div class="content">
            	<div class="image"><img src="img/Chrysanthemum.jpg" /></div>
            </div>
            
            <footer></footer>
     	</div>       
    
    
    </body>
    </html>
    


    @charset "utf-8";
    /* CSS Document */
    
    * {
    	font-family: sans-serif;
    	letter-spacing: -1px;
    }
    
    body {
    	margin: 0;
    }
    div, header, footer, section, nav {
    	position: relative;
    }
    img {
    	vertical-align: top;
    }
    
    .page {
    	position: fixed;
    	top: 0; left: 0; right: 0; bottom: 0;
    	background-color: #fff;
    	transform: translateX(100%);
    	transition: transform 0.3s;
    }
    .page.active {
    	transform: translateX(0);
    }
    
    
    header {
    	position: fixed;
    	top: 0; left: 0; right: 0;
    	height: 48px;
    	background-color: orangered;
    }
    header .title {
    	position: absolute;
    	top: 50%; left: 50%;
    	transform: translate( -50%, -50%);
    	font-size: 1.2em;
    	color: #fff;
    }
    
    .content {
    	position: absolute; 
    	top: 48px; left: 0; right: 0; bottom: 0;
    	overflow: auto;
    }
    
    .listview {
    	padding: 1%;
    }
    .list {
    	float: left;
    	width: 48%;
    	margin: 1%;
    	padding-top: 36%;
    }
    
    .list .thumb {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    }
    .list .thumb img {
    	height: 100%;
    }
    .list .subject {
    	position: absolute;
    	left: 10%; bottom: 10%;
    	color: #fff;
    }
    
    header button.back {
    	position: absolute;
    	left: 10px;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    .image img {
    	width: 100%;
    }
    
    
    
    
    

    $(document).ready( function() {
    	
    	$(".listview .list").click( function() {
    		
    		var title = $(this).find(".subject").text();
    		var src = $(this).find(".thumb img").attr("src");
    		
    		$(".page.detail").find(".title").text(  title );
    		$(".page.detail").find(".image img").attr( "src", src );
    		
    		$(".page.detail").addClass("active");
    		
    	});
    	
    	$("header button.back").click( function() {
    		
    		$(this).parent().parent().removeClass("active");
    		
    	});
    	
    	
    });



  • ?
    콘디쌤 2017.04.27 10:35
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    <title>레시피</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/index.js"></script>
    </head>
    
    <body>
    
    	<div class="page active">
    		<header>
            	<div class="hambuger">☰</div>
            	<div class="title">하이레시피</div>
            </header>
            
            <div class="content">
            
            	<div class="listview">
                	
                    <div class="list">
                    	<div class="thumb"><img src="img/Chrysanthemum.jpg" /></div>
                        <div class="subject">국화</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Desert.jpg" /></div>
                        <div class="subject">사막</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Hydrangeas.jpg" /></div>
                        <div class="subject">수국</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Jellyfish.jpg" /></div>
                        <div class="subject">해파리</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Koala.jpg" /></div>
                        <div class="subject">코알라</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Lighthouse.jpg" /></div>
                        <div class="subject">등대</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Penguins.jpg" /></div>
                        <div class="subject">펭귄</div>
                        <div class="desc"></div>
                    </div>
                    <div class="list">
                    	<div class="thumb"><img src="img/Tulips.jpg" /></div>
                        <div class="subject">튤립</div>
                        <div class="desc"></div>
                    </div>
                    
                </div>
                
            </div> 
            
            <footer></footer>   
        </div>
        
        
        <div class="page detail">
    		<header>
            	<button class="back">이전</button>
            	<div class="title">국화</div>
            </header>
            
            <div class="content">
            	<div class="image"><img src="img/Chrysanthemum.jpg" /></div>
            </div>
            
            <footer></footer>
     	</div>      
        
        
        <div class="drawer"></div> 
    
    
    </body>
    </html>
    


    @charset "utf-8";
    /* CSS Document */
    
    * {
    	font-family: sans-serif;
    	letter-spacing: -1px;
    }
    
    body {
    	margin: 0;
    }
    div, header, footer, section, nav {
    	position: relative;
    }
    img {
    	vertical-align: top;
    }
    
    .page {
    	position: fixed;
    	top: 0; left: 0; right: 0; bottom: 0;
    	background-color: #fff;
    	transform: translateX(100%);
    	transition: transform 0.3s;
    }
    .page.active {
    	transform: translateX(0);
    }
    
    
    header {
    	position: fixed;
    	top: 0; left: 0; right: 0;
    	height: 48px;
    	background-color: orangered;
    }
    header .title {
    	position: absolute;
    	top: 50%; left: 50%;
    	transform: translate( -50%, -50%);
    	font-size: 1.2em;
    	color: #fff;
    }
    
    .content {
    	position: absolute; 
    	top: 48px; left: 0; right: 0; bottom: 0;
    	overflow: auto;
    }
    
    .listview {
    	padding: 1%;
    }
    .list {
    	float: left;
    	width: 48%;
    	margin: 1%;
    	padding-top: 36%;
    }
    
    .list .thumb {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    }
    .list .thumb img {
    	height: 100%;
    }
    .list .subject {
    	position: absolute;
    	left: 10%; bottom: 10%;
    	color: #fff;
    }
    
    header button.back {
    	position: absolute;
    	left: 10px;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    .image img {
    	width: 100%;
    }
    
    header .hambuger {
    	position: absolute;
    	color: #fff;
    	font-size: 1.2em;
    	left: 16px;
    	top: 45%;
    	transform: translateY(-50%);
    	transition: transform 0.3s;
    }
    header .hambuger.on {
    	transform: translateY(-50%) rotate(-90deg);
    }
    
    .drawer {
    	position: fixed;
    	width: 60%;
    	left: 0;
    	top: 0;
    	bottom: 0;
    	background-color: #eee;
    	box-shadow: 4px 0 10px rgba(0, 0, 0, 0.2);
    	transform: translateX(-100%);
    	transition: transform 0.5s;
    }
    .drawer.on {
    	transform: translateX(0%);
    }
    
    
    

    $(document).ready( function() {
    	
    	$(".listview .list").click( function() {
    		
    		var title = $(this).find(".subject").text();
    		var src = $(this).find(".thumb img").attr("src");
    		
    		$(".page.detail").find(".title").text(  title );
    		$(".page.detail").find(".image img").attr( "src", src );
    		
    		$(".page.detail").addClass("active");
    		
    		
    		$("header .hambuger").removeClass("on");
    		$(".drawer").removeClass("on");
    		
    	});
    	
    	$("header button.back").click( function() {
    		
    		$(this).parent().parent().removeClass("active");
    		
    	});
    	
    	$(".drawer").click( function() {
    		
    		$("header .hambuger").removeClass("on");
    		$(".drawer").removeClass("on");
    		
    	});
    	
    	$("header .hambuger").click( function() {
    		
    		$(this).addClass("on");
    		$(".drawer").addClass("on");
    		
    	});
    	
    	
    });



?

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
313 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
» 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