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 카페24 일반/상품/갤러리 게시판 비밀글 보기 콘디쌤 2014.12.11 6144
2162 소스자료실 텍스팅 콘디쌤 2014.08.18 3683
2161 PHP PHP Write to File - fwrite() 콘디쌤 2014.07.21 3196
2160 소스자료실 Nanum Barun Gothic 나눔 바른 고딕 웹폰트 콘디쌤 2015.01.01 2333
2159 Android 데이터베이스 연결하기 with SQLite 콘디쌤 2014.07.03 2040
2158 PHP JSON 출력하기 콘디쌤 2014.07.13 1896
2157 Android Java : JSON 가져오기 콘디쌤 2014.07.03 1805
2156 jQuery jQuery parents() Method (2) 콘디쌤 2014.07.20 1472
2155 소스자료실 연산자 콘디쌤 2014.07.13 1464
2154 카페24 출석체크 달력형 콘디쌤 2014.12.11 1463
2153 웹퍼블리셔 [2기] 배현정 콘디쌤 2014.07.16 1428
2152 소스자료실 문자와 숫자 콘디쌤 2014.07.13 1404
2151 Android 화면 높이에 대한 비율 10% 만큼 높이 값 매기기 1 콘디쌤 2014.07.03 1326
2150 PHP PHP 1000단위 마다 (,콤마) 넣기 콘디쌤 2014.07.14 1276
2149 PHP MySQL 데이터 가져오기 콘디쌤 2014.07.14 1216
2148 Android 안드로이드 : 폰넘버(전화번호) 알아내기 콘디쌤 2014.07.26 1215
2147 소스자료실 스크롤바 플러그인 콘디쌤 2014.07.14 1199
2146 카페24 Layout_category : 페이지별 카테고리 선택 메뉴 표시하기 콘디쌤 2014.12.21 1182
2145 CSS Transform Rotate 콘디쌤 2014.08.25 1160
2144 웹퍼블리셔 [5일차] 슬라이더 기본 (M&B magazine) 콘디쌤 2014.07.14 1159
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109