2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다.
GDG Korea Web Tech 운영진이신 한장현 님께서 ‘AngularJS와 ES6’에 대한 주제로 발표를 진행하였습니다. 이 발표를 통해서 Angular와ES6를 함께 사용하기 위해 필요한 구체적인 내용들을 공유하였습니다. Angular를 현재 사용하시는 분들께 많은 도움이 되는 시간이었던 것 같습니다.
2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다.
웹프레임워크 세미나의 첫번째는 corechain 개발자이자 ‘몰입! 자바스크립트’의 저자이신 김영보님께서 진행하셨습니다. 30년 넘게 개발자로 살아오시면서 경험한 개발 환경의 변화를 ‘웹 개발의 현재와 미래’라는 주제로 발표하셨습니다.
2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다.
GDG Korea Web Tech 운영진이신 한장현 님께서 ‘AngularJS와 ES6’에 대한 주제로 발표를 진행하였습니다. 이 발표를 통해서 Angular와ES6를 함께 사용하기 위해 필요한 구체적인 내용들을 공유하였습니다. Angular를 현재 사용하시는 분들께 많은 도움이 되는 시간이었던 것 같습니다.
2016년 12월에 진행되었던 W3C HTML5 Conference 2016의 오후 트렉 (웹프레임워크)의 발표 자료입니다.
웹프레임워크 세미나의 첫번째는 corechain 개발자이자 ‘몰입! 자바스크립트’의 저자이신 김영보님께서 진행하셨습니다. 30년 넘게 개발자로 살아오시면서 경험한 개발 환경의 변화를 ‘웹 개발의 현재와 미래’라는 주제로 발표하셨습니다.
11. Resource
<link rel="stylesheet" href="../assets/scrollview/horizontal.css"
type="text/css" charset="utf-8">
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-
min.js"></script>
12년 7월 19일 목요일
12. HTML
<div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
12년 7월 19일 목요일
13. JavaScript
YUI().use('scrollview', 'scrollview-paginator', function(Y) {
var scrollView = new Y.ScrollView({
id: "scrollview",
srcNode : '#scrollview-content',
width : 320,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "x"
}
});
scrollView.plug(Y.Plugin.ScrollViewPaginator, {
selector: 'li'
});
scrollView.render();
});
12년 7월 19일 목요일
23. <div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
12년 7월 19일 목요일
24. <div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
12년 7월 19일 목요일
25. <x-slide>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</x-slide>
12년 7월 19일 목요일
26. <x-slide>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</x-slide>
<div id="scrollview-container">
<div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
12년 7월 19일 목요일
31. <x-slide>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</x-slide>
12년 7월 19일 목요일
32. <x-slide>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</x-slide>
Rendered
12년 7월 19일 목요일
33. <x-slide>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</x-slide>
<div id="scrollview-container">
Rendered <div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
12년 7월 19일 목요일
34. <x-slide>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stair In Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</x-slide>
<div id="scrollview-container"> Shadow DOM
Rendered <div id="scrollview-header">
<h1>Paged ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li><img src="c621e0b501.jpg" alt="Above The City II"></li>
<li><img src="1373a0ef89.jpg" alt="Walls and Canyon"></li>
<li><img src="4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
<li><img src="854e8c0ef3.jpg" alt="Tree Silhouette"></li>
</ul>
</div>
<div id="scrollview-pager">
<button id="scrollview-prev">Prev</button>
<button id="scrollview-next">Next</button>
</div>
</div>
<div id="additional-content">
<p> Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
12년 7월 19일 목요일
35. <video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
</video>
12년 7월 19일 목요일