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
2163 소스자료실 흘러가는 슬라이더(배너) 콘디쌤 2016.01.13 98
2162 소스자료실 휠 커버 스핀 콘디쌤 2015.05.15 138
2161 소스자료실 회전하는 슬라이더 콘디쌤 2016.05.30 89
2160 소스자료실 회전 중심축 변경하기 콘디쌤 2014.10.29 370
2159 소스자료실 회전 : 지구, 태양, 달 ~ 돌고 돌고 콘디쌤 2014.07.14 439
2158 카페24 회원정보 수정 콘디쌤 2014.12.11 260
2157 카페24 회원가입 결과 콘디쌤 2014.12.10 168
2156 UI/UX 실무 회원가입 폼 1 콘디쌤 2017.02.23 27
2155 카페24 회원가입 콘디쌤 2014.12.10 332
2154 카페24 회사정보 / 푸터 콘디쌤 2014.12.09 260
2153 카페24 회사소개 콘디쌤 2014.12.11 129
2152 카페24 환불계좌등록 팝업 콘디쌤 2014.12.10 182
2151 Android 화면 높이에 대한 비율 10% 만큼 높이 값 매기기 1 콘디쌤 2014.07.03 1326
2150 소스자료실 현대자동차 기본 소스 : fixed 메뉴바, reel 자동차 회전 콘디쌤 2014.07.14 490
2149 소스자료실 현대자동차 reel 플러그인 2 file 콘디쌤 2014.07.14 483
2148 소스자료실 현대자동차 fixed 메뉴바 1 file 콘디쌤 2014.07.14 325
2147 소스자료실 현대자동차 fixed 메뉴바 콘디쌤 2014.07.14 461
2146 소스자료실 현대오토에버 슬라이더 기본 콘디쌤 2014.07.14 446
2145 소스자료실 현대 오토에버 연속 슬라이더 콘디쌤 2014.07.14 488
2144 카페24 현금영수증 신청양식 작성 팝업 콘디쌤 2014.12.10 544
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109