UI/UX 실무
2017.04.27 16:36

모바일 앱 제작 - 입력폼 / 팝업

조회 수 113 추천 수 0 댓글 8
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- <form> 태그

- <input> 태그


popup window

  • ?
    콘디쌤 2017.04.28 09:20
    - 레시피앱 (이름 정하기, 로고 만들기, 스플래시 화면)

    - 메인페이지
    - header (탭형식, 스크롤 사이즈변환)
    - swipe (손가락으로 이동 슬라이더)
    - 리스트 (비율유지 리스트)
    - 배너 (중간 배너)
    - 갤러리
    - 서브페이지
    - 레시피 리스트 -> 상세페이지
    - 동영상 리스트 -> 상세페이지
    - 회원가입 / 로그인
    - 팝업 (얼럿팅)

  • ?
    콘디쌤 2017.04.28 10:33
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
        <!-- Good default declaration:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
            * Enable eval(): add 'unsafe-eval' to default-src
        * Create your own at http://cspisawesome.com
        -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
    
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    
    <body>
        <div class="page">
            <header>
            	<div class="title">씨레시피</div>
                <nav>
                	<div class="gnb sel">홈</div>
                	<div class="gnb">레시피</div>
                	<div class="gnb">동영상</div>
                	<div class="gnb">마이페이지</div>
                </nav>
            </header>
            
            <div class="content">
            	
                <section class="visual">
                    <div class="swiper">
                        <div class="swiper-wrap">
                            <div class="swipe">
                            	<div class="image"><img src="img/Koala.jpg" /></div>
                            </div>
                            <div class="swipe">
                            	<div class="image"><img src="img/Penguins.jpg" /></div>
                            </div>
                            <div class="swipe">
                            	<div class="image"><img src="img/Jellyfish.jpg" /></div>			
                            </div>
                        </div>
                    </div>
                
                </section>
                
                <section>
                HELLO
                </section>
            
            
            </div>
            <footer></footer>
        </div>
        
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/swipe.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
    
    </html>


    * {
    	font-family: sans-serif;
    	letter-spacing: -1px;
    }
    
    body {
    	margin: 0;
    }
    
    div, section, header, footer, nav {
    	position: relative;
    }
    
    img {
    	vertical-align: top;
    	width: 100%;
    }
    
    .page {
    	position: fixed;
    	top: 0; left: 0; right: 0; bottom: 0;
    	overflow: auto;
    	background-color: #eee;
    }
    
    header {
    	position: fixed;
    	top: 0; left: 0; right: 0; height: 96px;
    	background-color: orangered;
    	transition: transform 0.4s;
    	z-index: 999;
    }
    header.small {
    	transform: translateY(-50%);
    }
    
    header .title {
    	color: #fff;
    	font-size: 1.2em;
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	top: 12px;
    }
    
    .content {
    	margin-top: 96px;
    	height: 4000px;
    }
    
    nav {
    	position: absolute;
    	top: 48px;
    	left: 0; right: 0;
    	height: 48px;
    }
    
    nav .gnb {
    	color: rgba( 255, 255, 255, 0.9);
    	float: left;
    	width: 25%;
    	text-align: center;
    	height: 46px;
    	font-size: 1em;
    	line-height: 46px;
    	border-bottom: 2px solid rgba( 255, 255, 255, 0);
    }
    nav .gnb.sel {
    	color: rgba( 255, 255, 255, 1);
    	border-bottom: 2px solid rgba( 255, 255, 255, 1);
    }
    
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	padding-top: 25%;
    }
    .swiper-wrap .swipe .image {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    }
    
    
    

    var app = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },
        // Bind Event Listeners
        //
        // Bind any events that are required on startup. Common events are:
        // 'load', 'deviceready', 'offline', and 'online'.
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        // deviceready Event Handler
        //
        // The scope of 'this' is the event. In order to call the 'receivedEvent'
        // function, we must explicitly call 'app.receivedEvent(...);'
        onDeviceReady: function() {
            app.receivedEvent('deviceready');
        },
        // Update DOM on a Received Event
        receivedEvent: function(id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
    
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
    
            console.log('Received Event: ' + id);
        }
    };
    
    $(document).ready(function(){
    	
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    	
    	$("nav .gnb").click(function(){
    		
    		$("nav .gnb.sel").removeClass("sel");
    		$(this).addClass("sel");
    		
    	});
    	
    	$(".page").scroll(function(){
    		
    		var scrollTop = $(".page").scrollTop();
    		
    		if (scrollTop >= 50) {
    			$("header").addClass("small");
    		} else {
    			$("header").removeClass("small");
    		}
    		
    	});
    	
    	
    	
    });
    
    
    
    
    
    
    



  • ?
    콘디쌤 2017.04.28 11:34

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
        <!-- Good default declaration:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
            * Enable eval(): add 'unsafe-eval' to default-src
        * Create your own at http://cspisawesome.com
        -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
    
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    
    <body>
        <div class="page home active">
            <header>
            	<div class="title">씨레시피</div>
                <nav>
                	<div class="gnb sel">홈</div>
                	<div class="gnb">레시피</div>
                	<div class="gnb">동영상</div>
                	<div class="gnb">마이페이지</div>
                </nav>
            </header>
    
    		<div class="contents">        
                <div class="content">
                    <section class="visual">
                        <div class="swiper">
                            <div class="swiper-wrap">
                                <div class="swipe">
                                    <div class="image"><img src="img/Koala.jpg" /></div>
                                </div>
                                <div class="swipe">
                                    <div class="image"><img src="img/Penguins.jpg" /></div>
                                </div>
                                <div class="swipe">
                                    <div class="image"><img src="img/Jellyfish.jpg" /></div>			
                                </div>
                            </div>
                        </div>
                    
                    </section>
                    
                    <section>
                    HELLO
                    </section>
                </div>
                <div class="content recipe">
                	
                    <div class="listview">
                    	<div class="list">
                        	<div class="image"><img src="img/Koala.jpg" /></div>
                            <div class="subject">코알라</div>
                            <div class="desc">귀여운 코알라 ...</div>
                        </div>
                        <div class="list">
                        	<div class="image"><img src="img/Penguins.jpg" /></div>
                            <div class="subject">펭귀인</div>
                            <div class="desc">귀여운 펭귀인 ...</div>
                        </div>
                        <div class="list">
                        	<div class="image"><img src="img/Jellyfish.jpg" /></div>
                            <div class="subject">해파리</div>
                            <div class="desc">귀여운 해파리 ...</div>
                        </div>
                    </div>
                    
                </div>
                <div class="content">
                	동영상 콘텐츠
                </div>
                <div class="content">
                	마이페이지
                </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/Penguins.jpg" /></div>
            	<div class="desc"></div>
            </div>
        </div>
        
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/swipe.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
    
    </html>

    * {
    	font-family: sans-serif;
    	letter-spacing: -1px;
    }
    
    body {
    	margin: 0;
    }
    
    div, section, header, footer, nav {
    	position: relative;
    }
    
    img {
    	vertical-align: top;
    	width: 100%;
    }
    
    .page {
    	position: fixed;
    	top: 0; left: 0; right: 0; bottom: 0;
    	overflow: auto;
    	background-color: #eee;
    	
    	transform: translateX(100%);
    	transition: transform 0.3s;
    }
    .page.active {
    	transform: translateX(0);
    }
    
    header {
    	position: fixed;
    	top: 0; left: 0; right: 0; height: 96px;
    	background-color: orangered;
    	transition: transform 0.4s;
    	z-index: 999;
    }
    header.small {
    	transform: translateY(-50%);
    }
    
    header .title {
    	color: #fff;
    	font-size: 1.2em;
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	top: 12px;
    }
    .page.detail header {
    	height: 48px;
    	background-color: rgba(0, 0, 0, 0.5);
    }
    .page.detail .image {
    	position: relative;
    }
    .page.detail .content {
    	display: block;
    }
    
    .page.home .content {
    	margin-top: 96px;
    	height: 4000px;
    	display: none;
    }
    .page.home .content:first-child {
    	display: block;
    }
    
    nav {
    	position: absolute;
    	top: 48px;
    	left: 0; right: 0;
    	height: 48px;
    }
    
    nav .gnb {
    	color: rgba( 255, 255, 255, 0.9);
    	float: left;
    	width: 25%;
    	text-align: center;
    	height: 46px;
    	font-size: 1em;
    	line-height: 46px;
    	border-bottom: 2px solid rgba( 255, 255, 255, 0);
    }
    nav .gnb.sel {
    	color: rgba( 255, 255, 255, 1);
    	border-bottom: 2px solid rgba( 255, 255, 255, 1);
    }
    
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	padding-top: 25%;
    }
    .swiper-wrap .swipe .image {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .content.recipe .list {
    	border-bottom: 1px solid #ddd;
    	overflow: hidden;
    }
    .content.recipe .list .image {
    	width: 40%;
    	float: left;
    }
    
    

    var app = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },
        // Bind Event Listeners
        //
        // Bind any events that are required on startup. Common events are:
        // 'load', 'deviceready', 'offline', and 'online'.
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        // deviceready Event Handler
        //
        // The scope of 'this' is the event. In order to call the 'receivedEvent'
        // function, we must explicitly call 'app.receivedEvent(...);'
        onDeviceReady: function() {
            app.receivedEvent('deviceready');
        },
        // Update DOM on a Received Event
        receivedEvent: function(id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
    
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
    
            console.log('Received Event: ' + id);
        }
    };
    
    $(document).ready(function(){
    	
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    	
    	$("nav .gnb").click(function(){
    		
    		$("nav .gnb.sel").removeClass("sel");
    		$(this).addClass("sel");
    		
    		$(".page.home .content").fadeOut("fast");
    		$(".page.home .content").eq( $(this).index() ).fadeIn("fast");
    		
    	});
    	
    	$(".page.home").scroll(function(){
    		
    		var scrollTop = $(".page.home").scrollTop();
    		
    		if (scrollTop >= 50) {
    			$(".home header").addClass("small");
    		} else {
    			$(".home header").removeClass("small");
    		}
    		
    	});
    	
    	$(".list").click(function(){
    		
    		var subject = $(this).find(".subject").text();
    		var src = $(this).find(".image img").attr("src");
    
    		$(".page.detail").find("header .title").text( subject );
    		$(".page.detail").find(".image img").attr("src", src);
    		
    		$(".page.detail").addClass("active");
    		
    	});
    	
    	$("button.back").click(function(){
    		
    		$(this).parent().parent().removeClass("active");
    		
    	});
    	
    });
    
    
    
    
    
    
    





  • ?
    콘디쌤 2017.04.28 12:16
    $(".page").scroll(function(){
    
    		var scrollTop = $(this).scrollTop();
    		$(this).find("header").css("top", scrollTop);
    
    	});
    
    
  • ?
    콘디쌤 2017.05.01 09:45
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>form</title>
    </head>
    
    <body>
    	<div><input  type="text" value="" placeholder=""   /></div>
    	<div><input  type="password" value="" placeholder=""   /></div>
    	<div><input  type="checkbox" value="" placeholder=""  checked  /> 약관동의</div>
    	<div><input  name="tv" type="radio" value="" placeholder="" checked   /> 삼성</div>
    	<div><input  name="tv" type="radio" value="" placeholder=""    /> 엘지</div>
        
        <div><textarea></textarea></div>
        
        <div><select>
        	<option>SKT</option>
        	<option>KT</option>
        	<option>LG U+</option>
        </select></div>
        
    </body>
    </html>
    


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>validation</title>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
    
    	
    	$("input[type=submit]").click(function(){
    		
    		alert( $("input[name=cs_name]").val() )  ;
    		
    	});
    	
    
    });
    </script>
    
    </head>
    
    <body>
    	
        <div><input type="text" name="cs_name" /></div>
        
        <div><input type="submit" value="제출" /></div>
        
    
    </body>
    </html>
    



  • ?
    콘디쌤 2017.05.01 10:15
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>validation</title>
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
    
    	
    	$("input[type=submit]").click(function(){
    		
    		//var cs_name = $("input[name=cs_name]").val().trim() ;
    		
    		var cs_email = $("input[name=cs_email]").val().trim() ;
    		
    		if (cs_email.length == 0) {
    			alert("이메일을 입력하세요.");
    		} else if (cs_email.indexOf("@") < 0  ||  cs_email.indexOf(".") < 0) {
    			alert("이메일을 확인하세요.");
    		}
    		
    	});
    	
    
    });
    </script>
    
    </head>
    
    <body>
    	
        <div><input type="text" name="cs_name" /></div>
        <div><input type="text" name="cs_email" placeholder="email" /></div>
        
        <div><input type="submit" value="제출" /></div>
        
    
    </body>
    </html>
    
  • ?
    콘디쌤 2017.05.01 10:29
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>storage</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
    <script>
    $(document).ready(function(){
    
    	var cs_id = localStorage.getItem("cs_id");
    
    	$("input[name=cs_id]").val( cs_id );
    	
    	
    	$("input[type=submit]").click(function(){
    		
    		cs_id = $("input[name=cs_id]").val();
    		
    		localStorage.setItem("cs_id", cs_id);
    		
    	});
    	
    
    });
    </script>
    
    
    
    </head>
    
    <body>
    	
        <div><input type="text" name="cs_id" placeholder="아이디입력" /></div>
        <div><input type="submit" value="저장" /></div>
        
    </body>
    </html>
    
  • ?
    콘디쌤 2017.05.01 12:12
    -webkit-appearance: none;
?

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