UI/UX 실무
2017.05.01 15:25

모바일 앱 제작 - 동영상 / 마무리

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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

- 동영상 리스트

- 동영상 플레이

- 팝업


  • ?
    콘디쌤 2017.05.02 09:39
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    
    <title>youtube</title>
    
    <style>
    body {
    	margin: 0;
    }
    div {
    	position: relative;
    }
    .movie {
    	width: 100%;
    	padding-top: 56.25%;
    }
    .list {
    	padding: 3%;
    	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .movie iframe {
    	position: absolute;
    	top: 0;
    }
    </style>
    
    
    </head>
    
    <body>
    
    	<div class="listview">
        	<div class="list">
    			<div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
        		</div>
                <div class="subject">백종원 카레, 집밥 백선생</div>
           	</div>  
               
        	<div class="list">
    			<div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
        		</div>
                <div class="subject">백종원 카레, 집밥 백선생</div>
           	</div>     
               
        	<div class="list">
    			<div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
        		</div>
                <div class="subject">백종원 카레, 집밥 백선생</div>
           	</div>     
        </div>
        
    </body>
    </html>
    
  • ?
    콘디쌤 2017.05.02 10:28
    <!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 video">
                	
                    <div class="listview">
                        <div class="list">
                            <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="subject">백종원 카레, 집밥 백선생</div>
                            <div class="cover"></div>
                        </div>  
                           
                        <div class="list">
                            <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="subject">백종원 카레, 집밥 백선생</div>
                            <div class="cover"></div>
                        </div>     
                           
                        <div class="list">
                            <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="subject">백종원 카레, 집밥 백선생</div>
                            <div class="cover"></div>
                        </div>     
                    </div>
                    
                    
                </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>
        
        <div class="popup">
        	<div class="close">닫기</div>
        	<div class="movie"><iframe width="100%" height="100%" src="" frameborder="0" allowfullscreen></iframe></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;
    	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;
    }
    
    .video .movie, .popup .movie {
    	width: 100%;
    	padding-top: 56.25%;
    }
    .video .list {
    	padding: 3%;
    	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .video .movie iframe, .popup .movie iframe {
    	position: absolute;
    	top: 0;
    }
    
    .video .cover {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    	
    }
    
    .popup {
    	position: fixed;
    	width: 90%;
    	background-color: #fff;
    	border: 1px solid rgba(0, 0, 0, 0.5);
    	top: 50%;
    	left: 50%;
    	transform: translate( -50%, -50%);
    	display: none;
    }
    .popup .close {
    	text-align: right;	
    	padding: 4px 10px;
    	background-color: gray;
    	color: #fff;
    }

    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");
    		}
    		
    	});
    	
    	$(".page").scroll(function(){
    		
    		var scrollTop = $(this).scrollTop();
    		$(this).find("header").css("top", scrollTop);
    		
    	});
    	
    	
    	
    	$(".recipe .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");
    		
    	});
    	
    	$(".video .list").click(function(){
    		$(".page").fadeOut(400);
    		$(".popup").fadeIn(400);
    		
    		var src= $(this).find("iframe").attr("src");
    		
    		$(".popup iframe").attr("src", src);
    		
    	});
    	
    	$(".popup").click(function(){
    		$(".page").fadeIn(400);
    		$(".popup").fadeOut(400);
    	});
    	
    });
  • ?
    콘디쌤 2017.05.02 11:48

    config.xml


    <allow-navigation href="*://*.youtube.com/*"/>

?

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