Modal Window

Size: px
Start display at page:

Download "Modal Window"

Transcription

1 접근가능한레이어팝업 Feat. WAI-ARIA 콘텐츠연합플랫폼클라이언트개발부지성봉

2 Modal Window

3 Modal Window 사용자인터페이스디자인개념에서자식윈도에서부모윈도로돌아가기전에사용자의상호동작을요구하는창. 응용프로그램의메인창의작업흐름을방해한다.

4 Native HTML 의한계점 팝업이떴다라는정보를인지할수없다. 팝업이외의문서정보에접근이된다. 키보드 tab 키운용이팝업을벗어난다. 키보드트랩문제 (IE8 ~ 10)

5 Requirement 팝업이열렸을때팝업내용인식가능팝업아래의 Windows는비활성화 tab키운용이팝업내부에서만순환팝업이닫혔을때초점이원래있던곳으로반환

6 How To?

7 Step 1. 콘텐츠역할정의 role="dialog" 사용자가정보를입력하거나응답할것을요구하도록유도하기위해 어플리케이션의현재처리를중단시키도록설계된어플리케이션윈도우

8 <div class="popup-wrap"> <div class="popup-body" r o l e ="dialog" a r i a - l a b e l l e d b y=" p o p - t i t l e "> <strong i d="pop-title" class="modal-header"> 접근가능한레이어팝업 < /strong> <div class="modal-body"> <p> 접근가능한레이어팝업이란? < /p>...

9 Step 2. 팝업이열릴때내용인식 대화상자내부로초점이동 모든상황에서초점은대화상자안에있는요소로이동 첫번째초점을얻을수있는요소로이동하는것이기본 첫번째포커스가능한요소로초점을이동시키는것이 콘텐츠의시작부분을스크롤밖으로밀어낼경우 대화상자안에초점을받을수있는요소가없을경우 정적요소에 tabindex="-1" 을추가하여이요소로초점이동

10 <div class="popup-wrap"> <div class="popup-body" role="dialog" aria-labelledby="pop-title"> <a class="placeholder" tabindex="-1"></a> <strong id="pop-title" class="modal-header"> 접근가능한레이어팝업 < /strong> <div id="popup-contents" class="modal-body"> <p> 접근가능한레이어팝업이란? < /p>

11 f u n c t i o n openpopup () { v a r popupbody = document.queryselector(".popup-body"); d o c u m e n t.documentelement.classlist.add("on-popup"); p o p u p B o d y.queryselector(".placeholder").focus();

12 Step 3. 팝업아래 Windows 비활성화 Browse mode 진입차단 대화상자내에서 tab 이동순환

13 Browse Mode 진입차단 role="dialog" 가자동으로처리 단, NVDA , NVDA FireFox, JAWS 18+ 등에서만지원 aria-modal="true" in ARIA 1.1 ios 10.x/10.2 에서는문제가있는것으로리포트됨 ( 대화상자제목과지시사항들이읽는순서에따라접근가능하지않게되는문제발생 )

14 Browse Mode 진입차단 차선책 : 대화상자외타콘텐츠에 aria-hidden="true" 설정 단, 마크업순서에따라적용이어려워지는상황이발생. 가급적 dialog 요소를 level 1 수준으로위치시키는것이정신건강에좋음

15 f u n c t i o n setsiblingshidden(currelem){ v a r ommits = ["script", "meta", "link", "style", "base"]; f o r(var i = -1, node; node = currelem.parentnode.children[++i];){ i f (node == currelem ommits.indexof(node.tagname.tolowercase()) > -1) c o n t i n u e; n o d e.setattribute("aria-hidden", "true"); n o d e.setattribute("data-outside-modal", "true"); f u n c t i o n openpopup(){ v a r popupbody = document.queryselector(".popup-body"); d o c u m e n t.documentelement.classlist.add("on-popup"); s e t S i b l i n g s H i d d e n (document.queryselector(".popup-wrap")); p o p u p B o d y.queryselector(".placeholder").focus();

16 f u n c t i o n unsetsiblingshidden(currelem){ f o r(var i = -1, n o d e, o u t s i d e s= document.queryselectorall("[data-outside-modal]"); n o d e = outsides[++i]; ) { n o d e.removeattribute("aria-hidden"); n o d e.removeattribute("data-outside-modal"); f u n c t i o n closepopup(event){ e v e n t = event window.event; d o c u m e n t.documentelement.classlist.remove("on-popup"); u n s e t S i b l i n g s H i d d e n ();

17 대화상자내에서 Tab 이동순환 Tab 키대화상자내다음 tabbable 요소로이동마지막 tabbable 요소에있는경우포커스를대화상자내첫번째 tabbable 요소로이동 SHFIT + Tab 키대화상자내이전 tabbable 요소로이동첫번째 tabbable 요소에있는경우포커스를대화상자내마지막 tabbable 요소로이동

18 (function(){ v a r focuslock = (function(){ v a r firstelem, lastelem; r e t u r n { s e t F i r s t B t n : function(el){ f i r s t E l e m = el;, s e t L a s t B t n : function(el){ l a s t E l e m = el;, f o c u s l o c k K e y D o w n : function(event){ e v e n t = event window.event; v a r keycode = event.which event.keycode; i f (event.shi Key && keycode === 9 && event.target === firstelem){ e v e n t.preventdefault? event.preventdefault() : event.returnvalue = false; l a s t E l e m.focus(); else if(!event.shi Key && keycode === 9 && event.target === lastelem){ e v e n t.preventdefault? event.preventdefault() : event.returnvalue = false; f i r s t E l e m.focus(); ; ()); w i n d o w.focuslock = window.focuslock focuslock; ());

19 f u n c t i o n openpopup(){ v a r popupbody = document.queryselector(".popup-body"); d o c u m e n t.documentelement.classlist.add("on-popup"); f o c u s l o c k.setfirstbtn(btnclosepopup); f o c u s l o c k.setlastbtn(btnclosepopup); p o p u p B o d y.addeventlistener("keydown", focuslock.focuslockkeydown); s e t S i b l i n g s H i d d e n (document.queryselector(".popup-wrap")); p o p u p B o d y.queryselector(".placeholder").focus();

20 f u n c t i o n closepopup(event){ e v e n t = event window.event; v a r popupbody = document.queryselector(".popup-body"); d o c u m e n t.documentelement.classlist.remove("on-popup"); p o p u p B o d y.removeeventlistener("keydown", focuslock.focuslockkeydown); u n s e t S i b l i n g s H i d d e n ();

21 Step 4. 키보드트랩방지 팝업이열릴때초점이얻어진요소를기억해두었다가팝업이닫힐때해당요소에다시초점이동

22 (function () { v a r focusedelem = null; v a r btnopenpopup = document.getelementbyid("open-popup"); v a r btnclosepopup = document.getelementbyid("close-popup");... f u n c t i o n openpopup(){ v a r popupbody = document.queryselector(".popup-body"); d o c u m e n t.documentelement.classlist.add("on-popup"); f o c u s e d E l e m = this; f o c u s l o c k.setfirstbtn(btnclosepopup); f o c u s l o c k.setlastbtn(btnclosepopup); p o p u p B o d y.addeventlistener("keydown", focuslock.focuslockkeydown);... f u n c t i o n closepopup(event){ e v e n t = event window.event; v a r popupbody = document.queryselector(".popup-body");... f o c u s e d E l e m.focus(); ());

23 Step 5. ESC 키를눌렀을때팝업닫기

24 f u n c t i o n openpopup(){... d o c u m e n t.addeventlistener("keydown", closepopup); f u n c t i o n closepopup(event){ e v e n t = event window.event; i f (event.type === 'keydown' && event.keycode!== 27){ r e t u r n;... d o c u m e n t.removeeventlistener("keydown", closepopup);

25 Used ARIA Role, Property Roles/Property dialog aria-label aria-labelledby aria-describe aria-describedby Description 사용자가정보를입력하거나응답할것을요구하도록유도하기위해어플리케이션의현재처리를중단시키도록설계된어플리케이션윈도우해당객체의 label( 이름 ) 을설정해당객체에대한설명추가

26 Keyboard Interaction Key Tab Shift + Tab Esc Behavior 대화상자내다음 tabbable 요소로초점이동마지막 tabbable 요소에있는경우포커스를대화상자내첫번째 tabbable 요소로이동대화상자내이전 tabbable 요소로초점이동첫번째 tabbable 요소에있는경우포커스를대화상자내마지막 tabbable 요소로이동대화상자닫기

27 Reference SSB BART group- ARIA Dialog Role Dialog (Modal) Design Patterns - W3C

28 감사합니다 NIAW AOA Github

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF CHAPTER 2 (interaction) Ext JS., HTML, onready, MessageBox get.. Ext JS HTML CSS Ext JS.1. Ext JS. Ext.Msg: : Ext Ext.get: DOM 22 CHAPTER 2 (config). Ext JS.... var test = new TestFunction( 'three', 'fixed',

More information

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.

More information

서현수

서현수 Introduction to TIZEN SDK UI Builder S-Core 서현수 2015.10.28 CONTENTS TIZEN APP 이란? TIZEN SDK UI Builder 소개 TIZEN APP 개발방법 UI Builder 기능 UI Builder 사용방법 실전, TIZEN APP 개발시작하기 마침 TIZEN APP? TIZEN APP 이란? Mobile,

More information

Building Mobile AR Web Applications in HTML5 - Google IO 2012

Building Mobile AR Web Applications in HTML5 - Google IO 2012 Building Mobile AR Web Applications in HTML5 HTML5 -, KIST -, UST HCI & Robotics Agenda Insight: AR Web Browser S.M.AR.T: AR CMS HTML5 HTML5 AR - Hello world! - Transform - - AR Events 3/33 - - - (Simplicity)

More information

http://www.forest.go.kr 5 2013~2017 Contents 07 08 10 19 20 30 33 34 38 39 40 44 45 47 49 51 52 53 53 57 63 67 Contents 72 75 76 77 77 82 88 93 95 96 97 97 103 109 115 121 123 124 125 125 129 132 137

More information

..........-....33

..........-....33 04 06 12 14 16 18 20 22 24 26 Contents 34 38 42 46 50 54 58 62 66 70 74 78 84 88 90 92 94 96 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 01 26 27 02 28 29 30 31 32 33 34 35 36 37 38 39

More information

자식농사웹완

자식농사웹완 윤 영 선 _ 지음 은혜한의원 서울시 마포구 도화1동 550 삼성프라자 308호 Tel : 3272.0120, 702.0120 진료시간 : 오전 9시 30분`~`오후 7시 점심시간 : 오후 1시`~`2시 토 요 일 : 오전 9시 30분`~`오후 3시 (일, 공휴일 휴진`/`전화로 진료 예약 받습니다) 은 혜 한 의 원 은혜한의원 CONTENTS 02 04 07

More information

chungo_story_2013.pdf

chungo_story_2013.pdf Contents 3 5 7 9 11 13 15 17 19 21 23 25 27 29 31 33 35 37 39 41 43 45 47 49 51 53 55 57 59 61 63 65 67 69 71 73 75 77 79 81 83 85 87 89 91 93 95 97 99

More information

Contents 12 13 15 17 70 79 103 107 20 21 24 29 128 137 141 32 34 36 41 46 47 53 55 174 189 230 240 58 61 64 1. 1. 1 2 3 4 2. 2. 2 1 3 4 3. 3. 1 2 3 4 4. 4. 1 2 3 4 5. 5. 1 2 3 1 2 3

More information

전반부-pdf

전반부-pdf Contents 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

More information

<4D6963726F736F667420506F776572506F696E74202D20312E20B0E6C1A6C0FCB8C15F3136B3E2C7CFB9DDB1E25F325FC6ED28C0BA292E70707478>

<4D6963726F736F667420506F776572506F696E74202D20312E20B0E6C1A6C0FCB8C15F3136B3E2C7CFB9DDB1E25F325FC6ED28C0BA292E70707478> Contents 3 2016 4 2016 5 2016 6 2016 7 2016 8 2016 9 2016 10 2016 11 2016 12 2016 13 2016 14 2016 15 2016 16 2016 17 2016 18 2016 19 2016 20 2016 21 2016 22 2016 23 2016 24 2016 25 2016 26 2016 27 2016

More information

..........- ........

..........- ........ Contents 24 28 32 34 36 38 40 42 44 46 50 52 54 56 58 60 61 62 64 66 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 01 02 24 25 03 04 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

More information

Contents 007 008 016 125 126 130 019 022 027 029 047 048 135 136 139 143 145 150 058 155 073 074 078 158 163 171 182 089 195 090 100 199 116 121 01 01 02 03 04 05 06 8 9 01 02 03 04 05 06 10 11 01 02 03

More information

A°ø¸ðÀü ³»Áö1-¼öÁ¤

A°ø¸ðÀü ³»Áö1-¼öÁ¤ 1 4 5 6 7 8 9 10 11 Contents 017 035 051 067 081 093 107 123 139 151 165 177 189 209 219 233 243 255 271 287 299 313 327 337 349 12 13 017 18 19 20 21 22 23 24 25 26 27 28 29 30 31 035 051 067 081 093

More information

±¹³»°æÁ¦ º¹»ç1

±¹³»°æÁ¦ º¹»ç1 Contents 2 2002. 1 116 2002. 1 2002. 1 117 118 2002. 1 2002. 1 119 120 2002. 1 2002. 1 121 122 2002. 1 2002. 1 123 124 2002. 1 2002. 1 125 126 2002. 1 2002. 1 127 128 2002. 1 2002. 1 129 130 2002. 1 2002.

More information

¿¡³ÊÁö ÀÚ¿ø-Âü°í ³»Áö.PDF

¿¡³ÊÁö ÀÚ¿ø-Âü°í ³»Áö.PDF Contents 01 02 03 6 04 05 7 8 9 01 10 02 03 11 04 01 12 02 13 03 04 14 01 02 03 04 15 05 06 16 07 17 08 18 01 02 03 19 04 20 05 21 06 07 22 08 23 24 25 26 27 28 29 30 31 32 33 01 36 02 03 37 38 01

More information

전반부-pdf

전반부-pdf Contents 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

More information

Microsoft PowerPoint - 3. 2016 하반기 크레딧 전망_V3.pptx

Microsoft PowerPoint - 3. 2016 하반기 크레딧 전망_V3.pptx Contents 3 2016 4 2016 5 2016 6 2016 7 2016 8 2016 9 2016 10 2016 11 2016 12 2016 13 2016 14 2016 15 2016 16 2016 17 2016 18 2016 19 2016 20 2016 21 2016 22 2016 23 2016 24 2016 25 2016 26 2016 27 2016

More information

양성내지b72뼈訪?303逞

양성내지b72뼈訪?303逞 Contents 성매매 예방교육 가이드북 Contents 제3부 성매매의 어제와 오늘 그리고 한국의 현주소 제4부 처벌 과 보호 의 성매매방지법 1. 성매매의 역사적 배경 및 추이 1. 성매매방지법 제정 배경 62 2. 성매매방지법 제정 취지 63 40 2. 성매매에 대한 국가별 개입 양상 42 3. 규범적 판단과 형사처벌을 기준으로 본 성매매 4. 외국의

More information

³»Áöc03âš

³»Áöc03âš 08 09 27 20 32 42 contents 3 4 5 6 7 8 9 28 10 11 42 38 12 13 45 48 44 14 15 53 50 16 17 58 54 18 19 20 21 22 23 24 25 2008. 5. 27~30 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 2008. 4. 27 42 43 44

More information

¾ç¼º-¾÷¹«Æí¶÷-³»¿ëÃà¼Ò4

¾ç¼º-¾÷¹«Æí¶÷-³»¿ëÃà¼Ò4 contents 6 9 18 21 23 43 44 53 61 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

More information

전도대회자료집

전도대회자료집 1 Contents 8 10 57 4 2 63 6 17 43 12 3 4 5 7 6 7 6 8 9 10 11 12 13 14 15 16 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

More information

0204..........1..

0204..........1.. contents contents 01 6 7 8 02 9 10 11 12 13 03 14 15 16 17 18 19 20 21 22 23 24 25 26 27 01 30 31 32 33 34 35 36 37 02 38 39 40 41 42 43 44 45 46 03 47 48 49 50 51 52 53 54 55 56 04 57 58 59 60 61

More information

µ¶ÀÏÅëÀÏÁý1~2Æíq36£02Ð

µ¶ÀÏÅëÀÏÁý1~2Æíq36£02Ð CONTENTS 3 9 16 20 24 29 33 36 40 48 50 56 60 64 71 76 80 83 88 91 94 97 100 103 106 109 114 116 128 133 139 144 148 151 154 159 170 173 176 181 183 188 190 192 194 198 202 209 212 218 221 228 231 233

More information

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch16. 이벤트 2014년 1학기 Professor Seung-Hoon Choi 16 이벤트 jquery 에서는 자바스크립트보다더쉽게이벤트를연결할수있음 예 $(document).ready(function(event) { } ) 16.1

More information

Javascript.pages

Javascript.pages JQuery jquery part1 JavaScript : e-mail:leseraphina@naver.com http://www.webhard.co.kr I.? 2 ......,,. : : html5 ; ; .

More information

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

var answer = confirm( 확인이나취소를누르세요.); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write( 확인을눌렀습니다.); else { document.write( 취소를눌렀습니다.); 자바스크립트 (JavaScript) - HTML 은사용자에게인터페이스 (interface) 를제공하는언어 - 자바스크립트는서버로데이터를전송하지않고서할수있는데이터처리를수행한다. - 자바스크립트는 HTML 나 JSP 에서작성할수있고 ( 내부스크립트 ), 별도의파일로도작성이가능하다 ( 외 부스크립트 ). - 내부스크립트 - 외부스크립트

More information

PART 1 CHAPTER 1 Chapter 1 Note 4 Part 1 5 Chapter 1 AcctNum = Table ("Customer").Cells("AccountNumber") AcctNum = Customer.AccountNumber Note 6 RecordSet RecordSet Part 1 Note 7 Chapter 1 01:

More information

Week8-Extra

Week8-Extra Week 08 Extra HTML & CSS Joonhwan Lee human-computer interaction + design lab. HTML CSS HTML, HTML 5 1. HTML HTML HTML HTML (elements) (attributes), (arguments). HTML (tag), DTD (Document Type Definition).!4

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 13. HTML5 위치정보와드래그앤드롭 SVG SVG(Scalable Vector Graphics) 는 XML- 기반의벡터이미지포맷 웹에서벡터 - 기반의그래픽을정의하는데사용 1999 년부터 W3C 에의하여표준 SVG 의장점 SVG 그래픽은확대되거나크기가변경되어도품질이손상되지않는다. SVG 파일에서모든요소와속성은애니메이션이가능하다. SVG 이미지는어떤텍스트에디터로도생성하고편집할수있다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 How to produce table XHTML 임정희 M2community 1 Table of Contents 1. XHTML - XHTML 과 HTML 2. Table XHTML - Table의이해 - Table 링크연결 - Table 작성 2 15 th KCSE Editor s Workshop, Seoul 2015 XHTML XHTML 기존에사용되던 HTML

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Getting Started (ver 5.1) 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Getting

More information

Analytics > Log & Crash Search > Unity ios SDK [Deprecated] Log & Crash Unity ios SDK. TOAST SDK. Log & Crash Unity SDK Log & Crash Search. Log & Cras

Analytics > Log & Crash Search > Unity ios SDK [Deprecated] Log & Crash Unity ios SDK. TOAST SDK. Log & Crash Unity SDK Log & Crash Search. Log & Cras Analytics > Log & Crash Search > Unity ios SDK [Deprecated] Log & Crash Unity ios SDK. TOAST SDK. Log & Crash Unity SDK Log & Crash Search. Log & Crash Unity SDK... Log & Crash Search. - Unity3D v4.0 ios

More information

160322_ADOP 상품 소개서_1.0

160322_ADOP 상품 소개서_1.0 상품 소개서 March, 2016 INTRODUCTION WHO WE ARE WHAT WE DO ADOP PRODUCTS : PLATON SEO SOULTION ( ) OUT-STREAM - FOR MOBILE ADOP MARKET ( ) 2. ADOP PRODUCTS WHO WE ARE ADOP,. 2. ADOP PRODUCTS WHAT WE DO ADOP,.

More information

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일 Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 Introduce Me!!! Job Jeju National University Student Ubuntu Korean Jeju Community Owner E-Mail: ned3y2k@hanmail.net Blog: http://ned3y2k.wo.tc Facebook: http://www.facebook.com/gyeongdae

More information

EMBARCADERO TECHNOLOGIES (Humphery Kim) RAD Studio : h=p://tech.devgear.co.kr/ : h=p://blog.hjf.pe.kr/ Facebook : h=p://d.com/hjfactory :

EMBARCADERO TECHNOLOGIES (Humphery Kim) RAD Studio : h=p://tech.devgear.co.kr/ : h=p://blog.hjf.pe.kr/ Facebook : h=p://d.com/hjfactory : #3 (RAD STUDIO) In www.devgear.co.kr 2016.05.23 EMBARCADERO TECHNOLOGIES (Humphery Kim) RAD Studio : h=p://tech.devgear.co.kr/ : h=p://blog.hjf.pe.kr/ Facebook : h=p://d.com/hjfactory : hskim@embarcadero.kr

More information

슬라이드 1

슬라이드 1 이벤트 () 란? - 사용자가입력장치 ( 키보드, 마우스등 ) 등을이용해서발생하는사건 - 이벤트를처리하는프로그램은이벤트가발생할때까지무한루프를돌면서대기상태에있는다. 이벤트가발생하면발생한이벤트의종류에따라특정한작업을수행한다. - 이벤트관련프로그램작성을위해 java.awt.event.* 패키지가필요 - 버튼을누른경우, 1 버튼클릭이벤트발생 2 발생한이벤트인식 ( 이벤트리스너가수행

More information

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl 제이쿼리 (JQuery) - 제이쿼리는자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리이다. - 따라서, 제이쿼리를사용하기위해서는자바스크립트라이브러리를사용해야한다. - 제이쿼리사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) - 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호를말함. - 사용예 )

More information

Microsoft PowerPoint UI-Event.Notification(1.5h).pptx

Microsoft PowerPoint UI-Event.Notification(1.5h).pptx To be an Android Expert 문양세강원대학교 IT 대학컴퓨터학부 UI 이벤트 Event listener Touch mode Focus handling Notification Basic toast notification Customized toast notification Status bar notification 2 사용자가인터랙션하는특정 View

More information

UI TASK & KEY EVENT

UI TASK & KEY EVENT 2007. 2. 5 PLATFORM TEAM 정용학 차례 CONTAINER & WIDGET SPECIAL WIDGET 질의응답및토의 2 Container LCD에보여지는화면한개 1개이상의 Widget을가짐 3 Container 초기화과정 ui_init UMP_F_CONTAINERMGR_Initialize UMP_H_CONTAINERMGR_Initialize

More information

Visual Basic 기본컨트롤

Visual Basic 기본컨트롤 학습목표 폼 ( Form) 폼의속성, 컨트롤이름, 컨트롤메서드 기본컨트롤 레이블, 텍스트박스, 버튼, 리스트박스 이벤트 버튼 기본컨트롤실습 2 2.1 폼 (Form) 2.2 기본컨트롤 2.3 기본컨트롤실습 3 폼 - 속성 속성 (Name) AutoSize BackColor Font ForeColor Icon StartPosition Transparency WindowState

More information

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자

SQL Developer Connect to TimesTen 유니원아이앤씨 DB 기술지원팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 작성자 SQL Developer Connect to TimesTen 유니원아이앤씨 DB 팀 2010 년 07 월 28 일 문서정보 프로젝트명 SQL Developer Connect to TimesTen 서브시스템명 버전 1.0 문서명 작성일 2010-07-28 작성자 김학준 최종수정일 2010-07-28 문서번호 20100728_01_khj 재개정이력 일자내용수정인버전

More information

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법

More information

Lab10

Lab10 Lab 10: Map Visualization 2015 Fall human-computer interaction + design lab. Joonhwan Lee Map Visualization Shape Shape (.shp): ESRI shp http://sgis.kostat.go.kr/html/index.html 3 d3.js SVG, GeoJSON, TopoJSON

More information

<4D F736F F F696E74202D20C1A63034B0AD202D20C7C1B7B9C0D3B8AEBDBAB3CABFCD20B9ABB9F6C6DBC0D4B7C2>

<4D F736F F F696E74202D20C1A63034B0AD202D20C7C1B7B9C0D3B8AEBDBAB3CABFCD20B9ABB9F6C6DBC0D4B7C2> 게임엔진 제 4 강프레임리스너와 OIS 입력시스템 이대현교수 한국산업기술대학교게임공학과 학습내용 프레임리스너의개념 프레임리스너를이용한엔터티의이동 OIS 입력시스템을이용한키보드입력의처리 게임루프 Initialization Game Logic Drawing N Exit? Y Finish 실제게임루프 오우거엔진의메인렌더링루프 Root::startRendering()

More information

하둡을이용한파일분산시스템 보안관리체제구현

하둡을이용한파일분산시스템 보안관리체제구현 하둡을이용한파일분산시스템 보안관리체제구현 목 차 - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - 1. 사용자가웹서버에로그인하여다양한서비스 ( 파일업 / 다운로드, 폴더생성 / 삭제 ) 를활용 2. 웹서버와연동된하둡서버에서업 / 다운로드된파일을분산저장. ( 자료송수신은 SSH 활용 ) - 9 - - 10 - - 11 -

More information

con_using-admin

con_using-admin CONTRIBUTE 2007 Adobe Systems Incorporated. All rights reserved. Adobe Contribute CS3 - Contribute,. Adobe Systems Incorporated (,, ),..,, Adobe Systems Incorporated. Adobe Systems Incorporated..... Adobe,

More information

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher( 실행할페이지.jsp); 다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp"); dispatcher.forward(request, response); - 위의예에서와같이 RequestDispatcher

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Html 은웹에서 text, images, movie 등다양한정보의요소를 담을수있는문서형식이다. 정보 (txt, imges) 전송 = 동일한어플리케이션 = 정보 (txt, imges) 정보 (txt, imges Movie, 동작 ) 정보 (txt, imges movie) 어플리케이션 웹브라우저 HTML5 는기존 HTML 에차별화된특징을가진 최신버전의웹표준언어.

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 11. 자바스크립트와캔버스로게임 만들기 캔버스 캔버스는 요소로생성 캔버스는 HTML 페이지상에서사각형태의영역 실제그림은자바스크립트를통하여코드로그려야한다. 컨텍스트객체 컨텍스트 (context) 객체 : 자바스크립트에서물감과붓의역할을한다. var canvas = document.getelementbyid("mycanvas"); var

More information

DE1-SoC Board

DE1-SoC Board 실습 1 개발환경 DE1-SoC Board Design Tools - Installation Download & Install Quartus Prime Lite Edition http://www.altera.com/ Quartus Prime (includes Nios II EDS) Nios II Embedded Design Suite (EDS) is automatically

More information

SproutCore에 홀딱 반했습니다.

SproutCore에 홀딱 반했습니다. Created by Firejune at 2009/10/30 SproutCore에 홀딱 반했습니다. 회사에서 첨여중인 프로젝트의 시제품(prototype)에 SproutCore 자바스크립트 프레임웍을 적용한 것을 시작으로, 아주 조금씩 조금씩 작동원리를 이해해 가면서 즐거운 나날을 보내고 있습니다. 그렇게 약 2개월 정도 작업이 진행되었고 큰 그림이 머리속에

More information

Contents 1장:Symphony Documents 사용자 가이드 8 2장:Symphony Presentations 사용자 가이드 15 3장:Symphony Spreadsheets 사용자 가이드 23 Chapter 1. Symphony Documents 사용자 가이드01 Symphony Documents 사용자 가이드 IBM Lotus Symphony

More information

UNIST_교원 홈페이지 관리자_Manual_V1.0

UNIST_교원 홈페이지 관리자_Manual_V1.0 Manual created by metapresso V 1.0 3Fl, Dongin Bldg, 246-3 Nonhyun-dong, Kangnam-gu, Seoul, Korea, 135-889 Tel: (02)518-7770 / Fax: (02)547-7739 / Mail: contact@metabrain.com / http://www.metabrain.com

More information

Dialog Box 실행파일을 Web에 포함시키는 방법

Dialog Box 실행파일을 Web에 포함시키는 방법 DialogBox Web 1 Dialog Box Web 1 MFC ActiveX ControlWizard workspace 2 insert, ID 3 class 4 CDialogCtrl Class 5 classwizard OnCreate Create 6 ActiveX OCX 7 html 1 MFC ActiveX ControlWizard workspace New

More information

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor

접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, the inventor 웹 접근성 : 최근 동향 신정식 jshin@i18nl10n.com 2006-06-29 웹 접근성 : 최근 동향 2 / 30 신정식 접근성과 웹 The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee,

More information

playnode.key

playnode.key Electron React Webpack! Junyoung Choi github.com/rokt33r Speaker / Junyoung Choi (2017.3 ) Node.js. MAISIN&CO. Boostnote 2015.11~2016.10 2! Agenda. / HMR, Electron Github Atom Node.js Chromium Javascript

More information

제 출 문 환경부장관 귀하 본 보고서를 습마트기기 활용 환경지킴이 및 교육 통합 서비스 개 발 과제의 최종보고서로 제출합니다. 주관연구기관 : 주관연구기관장 : 2015년 10월 주식회사 덕키즈 김 형 준 (주관)연구책임자 : 문종욱 (주관)참여연구원 : 김형준, 문병

제 출 문 환경부장관 귀하 본 보고서를 습마트기기 활용 환경지킴이 및 교육 통합 서비스 개 발 과제의 최종보고서로 제출합니다. 주관연구기관 : 주관연구기관장 : 2015년 10월 주식회사 덕키즈 김 형 준 (주관)연구책임자 : 문종욱 (주관)참여연구원 : 김형준, 문병 보안과제[ ], 일반과제[ ] 최종보고서 그린 생산소비형태 촉진 기술 Technologies for the facilitation of the green production & a type of consumption 스마트기기 활용 환경지킴이 및 교육통합 서비스 개발 Development for Web/App for environmental protection

More information

Business Agility () Dynamic ebusiness, RTE (Real-Time Enterprise) IT Web Services c c WE-SDS (Web Services Enabled SDS) SDS SDS Service-riented Architecture Web Services ( ) ( ) ( ) / c IT / Service- Service-

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 7. HTML 와 CSS 로웹사이트만들 기 웹사이트작성 웹사이트구축과정 내비게이션구조도 홈페이지레이아웃 헤더 web Shop 내비게이션메뉴

More information

untitled

untitled A Leader of Enterprise e-business Solution FORCS Co., LTD 1 OZ Application Getting Started 2 FORCS Co., LTD A Leader of Enterprise e-business Solution FORCS Co., LTD 3 OZ Application Getting Started 'OZ

More information

intro

intro Contents Introduction Contents Contents / Contents / Contents / Contents / 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

More information

2파트-07

2파트-07 CHAPTER 07 Ajax ( ) (Silverlight) Ajax RIA(Rich Internet Application) Firefox 4 Ajax MVC Ajax ActionResult Ajax jquery Ajax HTML (Partial View) 7 3 GetOrganized Ajax GetOrganized Ajax HTTP POST 154 CHAPTER

More information

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E228313232C8A3292E687770>

<B1DDC0B6C1A4BAB8C8ADC1D6BFE4B5BFC7E228313232C8A3292E687770> 금융정보화 주요동향 제122호 2010. 3. 30 1. 금융업계 IT동향 2. IT 동향 3. IT 용어 정보시스템본부 종 합 2010. 3월 제122호 1. 금융업계 IT동향 올해 금융IT핵심 화두는 통합, 그리고 모바일 은행, 스마트폰 뱅킹 서비스 강화 증권업계, 공동 통합보안관제 체계 구축 추진 카드업계, 스마트폰 애플리케이션 개발 확산 미래에셋생명,

More information

gnu-lee-oop-kor-lec10-1-chap10

gnu-lee-oop-kor-lec10-1-chap10 어서와 Java 는처음이지! 제 10 장이벤트처리 이벤트분류 액션이벤트 키이벤트 마우스이동이벤트 어댑터클래스 스윙컴포넌트에의하여지원되는이벤트는크게두가지의카테고리로나누어진다. 사용자가버튼을클릭하는경우 사용자가메뉴항목을선택하는경우 사용자가텍스트필드에서엔터키를누르는경우 두개의버튼을만들어서패널의배경색을변경하는프로그램을작성하여보자. 이벤트리스너는하나만생성한다. class

More information

<4D F736F F D20284B B8F0B9D9C0CF20BED6C7C3B8AEC4C9C0CCBCC720C4DCC5D9C3F720C1A2B1D9BCBA2020C1F6C4A720322E302E646F6378>

<4D F736F F D20284B B8F0B9D9C0CF20BED6C7C3B8AEC4C9C0CCBCC720C4DCC5D9C3F720C1A2B1D9BCBA2020C1F6C4A720322E302E646F6378> KSKSKSKS KSKSKSK KSKSKS KSKSK KSKS KSK KS X 3253 KS 2.0 KS X 3253 2016 2016 10 20 3 ... ii... iii 1... 1 2... 1 3... 1 3.1... 1 3.2... 3 4... 3 5... 4 6... 5 7... 7 8... 7 9... 8 A ( )... 9 A.1... 9 A.2...

More information

리포트_23.PDF

리포트_23.PDF Working Paper No 23 e-business Integrator From Strategy to Technology To remove the gap between e-biz strategy and implementation (eeyus@e-bizgroupcom) Creative Design 2001 04 24 e-business Integrator

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 14. HTML5 웹스토리지, 파일 API, 웹소켓 웹스토리지 웹스토리지 (web storage) 는클라이언트컴퓨터에데이터를저장하는메카니즘 웹스토리지는쿠키보다안전하고속도도빠르다. 약 5MB 정도까지저장이가능하다. 데이터는키 / 값 (key/value) 의쌍으로저장 localstorage 와 sessionstorage localstorage 객체

More information

UI TASK & KEY EVENT

UI TASK & KEY EVENT T9 & AUTOMATA 2007. 3. 23 PLATFORM TEAM 정용학 차례 T9 개요 새로운언어 (LDB) 추가 T9 주요구조체 / 주요함수 Automata 개요 Automata 주요함수 추후세미나계획 질의응답및토의 T9 ( 2 / 30 ) T9 개요 일반적으로 cat 이라는단어를쓸려면... 기존모드 (multitap) 2,2,2, 2,8 ( 총 6번의입력

More information

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc NTAS and FRAME BUILDER Install Guide NTAS and FRAME BUILDER Version 2.5 Copyright 2003 Ari System, Inc. All Rights reserved. NTAS and FRAME BUILDER are trademarks or registered trademarks of Ari System,

More information

Microsoft PowerPoint - 09-CE-5-윈도우 핸들

Microsoft PowerPoint - 09-CE-5-윈도우 핸들 순천향대학교컴퓨터학부이상정 1 학습내용 윈도우핸들 윈도우찿기 윈도우확인및제거 윈도우숨기기 윈도우포커스 윈도우텍스트 윈도우핸들 순천향대학교컴퓨터학부이상정 3 핸들 (handle) 윈도우에서구체적인어떤대상을구분하기위해지정되는고유의번호 32비트의정수값 핸들은운영체제가발급하고사용자가이값을사용 실제값이무엇인지는몰라도상관없음 윈도우, DC, 브러쉬등등 순천향대학교컴퓨터학부이상정

More information