HTML5

Size: px
Start display at page:

Download "HTML5"

Transcription

1 퀴즈 류관희

2 게임규칙 동적으로 HTML 요소생성 생성된 HTML 요소의화면배치및위치옮기기 퀴즈게임 국가명과수도명의짝맞추기 배열 ( 국가명, 수도명 ) 짝모두맞추면 => 동영상플레이 2

3 퀴즈게임 3

4 4

5 5

6 6

7 주요특징 배열 : 국가명과수도명저장 피드백 : 색상변경, 동영상재생 플레이 20쌍중에 4 쌍무작위로선택 글자 : 국가명과수도명 => 그림으로대치 7

8 사전준비항목 퀴즈 여러문제를저장 새로고침하면무작위로그중몇개의문제를선택하여보여줌 사각형내의글자 : 국가명 ( 왼쪽 ), 수도명 ( 오른쪽 ) 8

9 사전준비항목 플레이어 국가명을클릭하면색깔이변함 해당수도를클릭할경우국가명의문자가수도명옆으로이동하고 정답이면색깔이변해표시되고정답수가증가 모든문제의답을맞추면동영상플레이 자바스크립트 canvas 를사용하지않음 9

10 <body onload="init();"> <h1>g20 국가와수도 </h1><br/> 국가와그에맞는수도를차례로클릭하세요 ( 클릭순서무관 ) <p> 게임을새로시작하려면페이지를새로고침하세요. <form name="f" > 결과 : <input name="out" type="text" value=" 정답이냐오답이냐 "/> 점수 : <input name="score" type="text" value="0"/> </form> </p> <video id="vid" controls="controls" preload="auto"> <source src="shortfireworks.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"'> <source src="shortfireworks.theora.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="shortfireworks.webmvp8.webm" type="video/webm; codec="vp8, vorbis"'"> 이브라우저는 video 태그를인식하지못합니다. </video> </body> 10

11 배열정보저장하고가져오기 G20 국가명, 수도명, 선택여부 (facts[0],,facts[19]) var facts = [ [" 중국 "," 베이징 ",false], [" 인도 "," 뉴델리 ",false], [" 유럽연합 "," 브뤼셀 ",false], [" 미국 "," 워싱톤, DC",false], [" 인도네시아 "," 자카르타 ",false], [" 브라질 "," 브라질리아 ",false], [" 러시아 "," 모스크바 ",false], [" 일본 "," 도쿄 ",false], [" 멕시코 "," 멕시코시티 ",false], [" 독일 "," 베를린 ",false], [" 터키 "," 앙카라 ",false], [" 프랑스 "," 파리 ",false], [" 영국 "," 런던 ",false], [" 이탈리아 "," 로마 ",false], [" 남아프리카 "," 프레토리아 ",false], [" 대한민국 "," 서울 ",false], [" 아르헨티나 "," 부에노스아이레스 ",false], [" 캐나다 "," 오타와 ",false], [" 사우디아라비아 "," 리야드 ",false], [" 호주 "," 캔버라 ",false] ]; 11

12 스타일형식 <style>.thing {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double; background-color: white; margin: 5px; padding: 5px; } #vid {position:absolute; visibility:hidden; z- index: 0; } </style> 12

13 공통사용변수 var thingelem; var nq = 4; //number of questions asked in a game var elementinmotion; var makingmove = false; var inbetween = 300; var col1 = 20; var row1 = 200; var rowsize = 50; var slots = new Array(nq); // mark all faces as not being used. for (i=0;i<facts.length;i++) { facts[i][2] = false; } for (i=0;i<nq;i++) { slots[i] = -100; } 13

14 do {c = Math.floor(Math.random()*facts.length);} while (facts[c][2]==true) facts[c][2]=true; // put this thing in random choice from empty slots do {s = Math.floor(Math.random()*nq);} while (slots[s]>=0) slots[s]=c; 14

15 프로그램실행중에 HTML 동적으로생성하기 (1) 국가에대해동적 HTML 생성 var d; uniqueid = "c"+string(c); d = document.createelement('country'); // HTML 요소생성 d.innerhtml = ( "<div class='thing' id='"+uniqueid+"'>placeholder</div>"); document.body.appendchild(d); // 요소를문서에추가 thingelem = document.getelementbyid(uniqueid); // 요소참조를가져옴 thingelem.textcontent=facts[c][0]; thingelem.style.top = String(my)+"px"; thingelem.style.left = String(mx)+"px"; thingelem.addeventlistener('click',pickelement,false); 15

16 프로그램실행중에 HTML 동적으로생성하기 (2) 수도에대해동적 HTML 생성 var d; uniqueid = p"+string(c); d = document.createelement('cap '); // HTML 요소생성 d.innerhtml = ( "<div class='thing' id='"+uniqueid+"'>placeholder</div>"); document.body.appendchild(d); // 요소를문서에추가 thingelem = document.getelementbyid(uniqueid); // 요소참조를가져옴 thingelem.textcontent=facts[c][1]; thingelem.style.top = String(row1+s*rowsize)+"px"; thingelem.style.left = String(col1+inbetween)+"px"; thingelem.addeventlistener('click',pickelement,false); 16

17 선택하기 (pickelement) 17

18 첫번째항목을선택한경우 (makingmove == false) makingmove = true; elementinmotion = this; elementinmotion.style.backgroundcolor = "tan"; 18

19 두번째항목을선택한경우 (makingmove == true) // 두번째항목으로자기자신을선택한경우 if (this==elementinmotion) { elementinmotion.style.backgroundcolor = "white"; makingmove = false; return; } 19

20 두번째항목을선택한경우 (makingmove == true) // 두번째항목으로다른항목을선택한경우 thisx= this.style.left; thisx = thisx.substring(0,thisx.length-2); //remove the px thisxn = Number(thisx) + 115; elementinmotion.style.left = String(thisxn)+"px"; elementinmotion.style.top = this.style.top; makingmove = false; if (this.id.substring(1)==elementinmotion.id.substring(1)) { elementinmotion.style.backgroundcolor = "gold"; this.style.backgroundcolor = "gold"; document.f.out.value = " 정답 "; sc = 1+Number(document.f.score.value); document.f.score.value = String(sc); if (sc==nq) { v = document.getelementbyid("vid"); v.style.visibility = "visible"; v.style.zindex="10000"; v.play(); } } else { document.f.out.value = " 오답 "; elementinmotion.style.backgroundcolor = "white"; } 20

21 21

HTML5

HTML5 행맨 류관희 충북대학교 2 3 4 5 사전준비 단어목록읽기 단어빈칸보여주기 인터페이스를통해알파벳선택하면알파벳사라지기 단어에선택한알파벳이있으면표시하기 없으면선이나타원으로사람형태그리기 게임종료조건 : 모든맞추는경우 모두틀린경우 ( 행맨 ) 6 단어목록배열에저장 words.js var words = [ "muon", "blight","kerfuffle","qat"

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

인도 웹해킹 TCP/80 apache_struts2_remote_exec-4(cve ) 인도 웹해킹 TCP/80 apache_struts2_remote_exec-4(cve ) 183.8

인도 웹해킹 TCP/80 apache_struts2_remote_exec-4(cve ) 인도 웹해킹 TCP/80 apache_struts2_remote_exec-4(cve ) 183.8 차단 IP 국적 공격유형 목적지포트 IPS 룰 222.119.190.175 한국 서비스취약점공격 TCP/110 #14713(POP3 Login Brute Force Attempt-2/3(count 30 seconds 10)) 52.233.160.51 네덜란드 웹해킹 TCP/80 Apache Struts Jakarta Multipart Parser Remote

More information

국가표본수기간 평균최초수익률 국가표본수기간 ( 단위 : 개, 년, %) 평균최초수익률 아르헨티나 20 1991-1994 4.4 요르단 53 1999-2008 149.0 오스트레일리아 1,562 1976-2011 21.8 한국 1,593 1980-2010 61.6 오스트리아 102 1971-2010 6.3 말레이시아 350 1980-2006 69.6 벨기에 114

More information

ìœ€íŁ´IP( _0219).xlsx

ìœ€íŁ´IP( _0219).xlsx 차단 IP 국적 공격유형 목적지포트 IPS 룰 180.97.215.45 중국 서비스취약점공격 TCP/5555 (0001)SYN Port Scan 222.186.42.248 중국 서비스취약점공격 TCP/80 (0001)SYN Port Scan 104.236.178.166 미국 웹해킹 TCP/80 (5010)HEAD / HTTP (Http server buffer

More information

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2

이장에서다룰내용 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 03 장. 테두리여백지정하는속성 이번장에서는테이블, 레이어, 폼양식등의더예쁘게꾸미기위해서 CSS 를이용하여 HTML 요소의테두리속성을바꾸어보자. 이장에서다룰내용 1 2 3 테두리를제어하는스타일시트 외부여백 (Margin) 과내부여백 (Padding) 관련속성 위치관련속성 2 01. 테두리를제어하는스타일시트 속성값설명 border-width border-left-width

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

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

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

More information

HTML5

HTML5 짝맞추기게임 게임규칙 짝맞추기게임 카드가뒤집혀있으면플레이어는한번에카드두개를클릭해서일치하는카드찾기게임 만약두개의카드가일치하면이두카드를제거 그렇지않으면다시두카드를뒤집어원위치시킴 플레이어가일치하는카드를전부찾으면프로그램종료하고게임걸린시간표시 2 게임의시작예 3 4 5 게임의결과표시

More information

국가별 한류현황_표지_세네카포함

국가별 한류현황_표지_세네카포함 지구촌 지구촌 Ⅰ 아시아대양주 Ⅱ 아메리카 지구촌 Ⅲ 유럽 Ⅳ 아프리카중동 지구촌 한류현황 개요 지구촌 지역별 한류 동호회 현황 Ⅰ. 아시아대양주 뉴질랜드 대만(타이뻬이) 라오스 말레이시아 몽골 미얀마 베트남 브루나이 싱가포르 아프가니스탄 인도 인도네시아 일본 중국 태국 파키스탄 피지 필리핀 호주 (1) 일반 현황 10 (2) 분야별 현황 11 12 (1)

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint Template

PowerPoint Template JavaScript 회원정보 입력양식만들기 HTML & JavaScript Contents 1. Form 객체 2. 일반적인입력양식 3. 선택입력양식 4. 회원정보입력양식만들기 2 Form 객체 Form 객체 입력양식의틀이되는 태그에접근할수있도록지원 Document 객체의하위에위치 속성들은모두 태그의속성들의정보에관련된것

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 05 장 CSS3 선택자 1. 선택자개요 2. 기본선택자 3. 속성선택자 4. 후손선택자와자손선택자 5. 반응 / 상태 / 구조선택자 CSS 블록을생성할수있다. 선택자를이해하고적절한선택자를활용할수있다. 1 선택자개요 CSS3 선택자 특정한 HTML 태그를선택할때사용하는기능 선택한태그에원하는스타일이나스크립트적용가능 그림 5-1 CSS 블록 CSS 블록 style

More information

HTML5

HTML5 주사위게임 류관희 충북대학교 주사위게임규칙 플레이어 두개의주사위를던졌을때두주사위윗면숫자의합 The First Throw( 두주사위의합 ) 합 : 7 혹은 11 => Win 합 : 2, 3, 혹은 12 => Lost 합 : 4, 5, 6, 8, 9, 10 => rethrow The Second Throw 합 : 첫번째던진주사위합과같은면 => Win 합 : 그렇지않으면

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part1. JavaScript / Ch10. 문서객체모델 2014년 1학기 Professor Seung-Hoon Choi 10 문서객체모델 문서객체모델 (Document Object Model, DOM) 웹브라우저가 HTML 페이지를인식하는방식 document

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 ONE page html 이란? 원페이지는최근의홈페이지제작트렌드로한페이지에상단에서하단으로의마우스스크롤링을통해서컨텐츠를보여주는스타일의홈페이지입니다. USER 의시선을분산시키지않고위쪽에서아래쪽으로마우스스크롤링을통해서홈페이지의컨텐츠를보여주게됩니다. 반응형으로제작되어스마트폰, 아이패드, 태블릿,PC, 노트북등다양한디바이스에서자동으로최적화됩니다. ONE page 웹사이트사례

More information

와플-4년-2호-본문-15.ps

와플-4년-2호-본문-15.ps 1 2 1+2 + = = 1 1 1 +2 =(1+2)+& + *=+ = + 8 2 + = = =1 6 6 6 6 6 2 2 1 1 1 + =(1+)+& + *=+ =+1 = 2 6 1 21 1 + = + = = 1 1 1 + 1-1 1 1 + 6 6 0 1 + 1 + = = + 7 7 2 1 2 1 + =(+ )+& + *= + = 2-1 2 +2 9 9 2

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 10. DOM 과이벤트처리, 입력검 증 문서객체모델 (DOM) DOM 은 HTML 문서의계층적인구조를트리 (tree) 로표현 DOM 과 BOM HTML 문서를객체로표현한것을 DOM 웹브라우저를객체로표현한것을 BOM(Browser Object Model) HTML 요소찾기 동적인웹페이지를작성하려면원하는요소를찾아야한다. id 로찾기 태그이름으로찾기

More information

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

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

More information

chap 5: Trees

chap 5: Trees 5. Threaded Binary Tree 기본개념 n 개의노드를갖는이진트리에는 2n 개의링크가존재 2n 개의링크중에 n + 1 개의링크값은 null Null 링크를다른노드에대한포인터로대체 Threads Thread 의이용 ptr left_child = NULL 일경우, ptr left_child 를 ptr 의 inorder predecessor 를가리키도록변경

More information

2

2 XXXXXXXXXXX 2003-4-16 1 2 2003-4-16 3 4 40,000 35,000 30,000 수입 수출 25,000 20,000 15,000 10,000 5,000-1996 1997 1998 1999 2000 2001 2002 30,000 25,000 수입 수출 20,000 15,000 10,000 5,000-1996 1997 1998 1999

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

PHP & ASP

PHP & ASP 단어장프로젝트 프로젝트2 단어장 select * from address where address like '% 경기도 %' td,li,input{font-size:9pt}

More information

HTML5

HTML5 미로 류관희 미로만들고이동하는프로그래밍기법 플레이어가직접미로만들어저장 벽의충돌검사 미로프로그램 캔버스 ( 객체, 미로의벽 ) 토큰 ( 오각형 ) 과벽의충돌검사 미로의벽그리기 마우스이용 토큰의이동 ( 화살표를이용 ) 2 1 차버전미로 모든기능을하나의파일 2 차버전미로 미로제작하는코드파일 플레이어가라디오버튼으로미로를선택할수있는코드파일 3 미로구조제작 화살표키로토큰움직이기

More information

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

C H A P T E R 2

C H A P T E R 2 C H A P T E R 2 Foundations of Ajax Chapter 2 1 32 var xmlhttp; function createxmlhttprequest() { if(window.activexobject) { xmlhttp = new ActiveXObject( Micr else if(window.xmlhttprequest) { xmlhttp =

More information

Microsoft PowerPoint 세션.ppt

Microsoft PowerPoint 세션.ppt 웹프로그래밍 () 2006 년봄학기 문양세강원대학교컴퓨터과학과 세션변수 (Session Variable) (1/2) 쇼핑몰장바구니 장바구니에서는사용자가페이지를이동하더라도장바구니의구매물품리스트의내용을유지하고있어야함 PHP 에서사용하는일반적인변수는스크립트의수행이끝나면모두없어지기때문에페이지이동시변수의값을유지할수없음 이러한문제점을해결하기위해서 PHP 에서는세션 (session)

More information

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch15. 문서객체조작 2014년 1학기 Professor Seung-Hoon Choi 15 문서객체조작 문서객체조작 자바스크립트만으로문서객체모델을다루려면복잡함 jquery를이용하면쉽게다룰수있다. 이책에서가장중요한부분 15.1 문서객체의클래스속성추가

More information

2 인구절벽에대비한해외정책및사례연구

2 인구절벽에대비한해외정책및사례연구 제 1 장서론 1 1. 연구의배경및목적 2 인구절벽에대비한해외정책및사례연구 제 1 장서론 3 2. 연구절차및방법 4 인구절벽에대비한해외정책및사례연구 1. 인구절벽현상의의의 제 2 장인구절벽현상의개념적정의, 원인, 문제점 5 2. 인구절벽현상의원인 (1) 합계출산율의감소 6 인구절벽에대비한해외정책및사례연구 제 2 장인구절벽현상의개념적정의, 원인, 문제점 7 (2)

More information

Javascript

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

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

C스토어 사용자 매뉴얼

C스토어 사용자 매뉴얼 쪽지 APP 디자인적용가이드 I. 쪽지 APP 소개 2 I. 쪽지 APP 소개 쪽지 APP 을통해쇼핑몰의특정회원또는특정등급의회원그룹에게 알림메시지나마케팅을위한쪽지를발송하실수있습니다. 쪽지 APP의주요기능 1. 전체회원, 특정ID, 특정회원그룹별로쪽지발송가능 2. 발송예약기능 3. 발송한쪽지에대해수신및열람내역조회가능 4. 쇼핑몰페이지에서쪽지함과쪽지알림창제공 3

More information

Prototype 분석 - Element 오브젝트 메서드

Prototype 분석 - Element 오브젝트 메서드 Created by Firejune at 2006/09/05 Prototype 분석 - Element 오브젝트 메서드 이 문서는 Backstage of theater.js에서 발췌한 것 입니다. 프로토타입 라이브러리의 엘리먼트 오브젝트 메서드에 대한 내용을 다루는 일부분입니다. 사용성과 편리성에 포커스를 두지 않고 prototype.js 그대로를 분석하여 접근하고

More information

PowerPoint Presentation

PowerPoint Presentation 웹과인터넷활용및실습 (Web & Internet) Suan Lee - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 1 04. CSS3 스타일속성 04. CSS3 Style Properties - 웹과인터넷활용및실습 (Web & Internet) - 04. CSS3 스타일속성기본 2 CSS3 단위 1 CSS 는각각의스타일속성에다양한값을입력

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 5 장. 고급표현을위한 CSS3 활용 1 목차 5.1 박스모델설정하기 5.2 레이아웃설정하기 5.3 다양한효과설정하기 5.4 움직임설정하기 2 5.1 박스모델설정하기 5.1.1 영역설정을위한박스모델 5.1.2 박스모델유형의지정 3 영역설정을위한박스모델 배경영역 , , : 해당하는줄만큼배경 ,

More information

e-비즈니스 전략 수립

e-비즈니스 전략 수립 CSS3 속성 HTML5 웹프로그래밍입문 ( 개정판 ) Contents 학습목표 CSS3가지원하는스타일속성과스타일값을활용할수있습니다. CSS3를사용해레이아웃을잡을수있습니다. 내용 CSS3 단위 박스속성 display 속성 배경속성 글자속성 위치속성 float 속성 그림자속성 그레이디언트 2/85 1. CSS3 단위 키워드단위 W3C에서미리정의한단어 키워드를입력하면키워드에해당하는스타일이자동으로적용

More information

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks XSS s XSS, s, May 25, 2010 XSS s 1 2 s 3 XSS s MySpace 사건. Samy (JS.Spacehero) 프로필 페이지에 자바스크립트 삽입. 스크립트 동작방식 방문자를 친구로 추가. 방문자의 프로필에 자바스크립트를 복사. 1시간 만에 백만 명이 친구등록. s XSS s 위험도가 낮은 xss 취약점을 다른 취약점과 연계하여

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

03장.스택.key

03장.스택.key ---------------- DATA STRUCTURES USING C ---------------- 03CHAPTER 1 ? (stack): (LIFO:Last-In First-Out) 2 : top : ( index -1 ),,, 3 : ( ) ( ) -> ->. ->.... 4 Stack ADT : (LIFO) : init():. is_empty():

More information

AMP는 어떻게 빠른 성능을 내나.key

AMP는 어떻게 빠른 성능을 내나.key AMP는 어떻게 빠른 성능을 내나? AU개발 김태훈 kishu@navercorp.com AMP 란무엇인가? AMP 방식으로 HTML을 만들고 AMP JS를 로딩하고 AMP 컴포넌트만 사용하면 웹페이지의 빠른 렌더링을 보장 + 구글 검색 결과에서 즉시 로딩(빠르고 멋있게) AMPs are just Web Pages! AMPs are just Web Pages!

More information

04_11sep_world02.hwp

04_11sep_world02.hwp 글로벌공항운영및 투자주체현황 글로벌공항운영및투자주체현황 현재글로벌공항운영주체들이해외공항에의적극적인지분취득, 운영권입찰, 공동벤쳐투자들을통한공항운영지도가급속하게변동하고있다. 대부분의국가에서공항서비스분야에대한민간참여와민영화가발전단계에있으며, 정부소유로부터민간참여또는민영화의전환을직접적으로주도하고있다. 공항운영은매각, 임대, 이익의분배등을통하여이루어지며호주, 캐나다.

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 실습 1 배효철 th1g@nate.com 1 목차 조건문 반복문 System.out 구구단 모양만들기 Up & Down 2 조건문 조건문의종류 If, switch If 문 조건식결과따라중괄호 { 블록을실행할지여부결정할때사용 조건식 true 또는 false값을산출할수있는연산식 boolean 변수 조건식이 true이면블록실행하고 false 이면블록실행하지않음 3

More information

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전

Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전 Jwplayer Guide Jwplayer 요즘 웹에서 동영상 재생을 목적으로 많이 쓰이는 jwplayer의 설치와 사용하기 입니다. jwplayer홈페이지 : http://www.longtailvideo.com 위의 홈페이지에 가시면 JWplayer를 다운 받으실 수 있습니다. 현재 5.1버전까지 나왔으며 편리함을 위해서 아래를 링크를 걸어둡니다 [다운로드]

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

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 3. HTML 멀티미디어와입력요소 웹브라우저와멀티미디어 예전방법 : HTML 안에서는 나 태그를사용하여야했고웹브라우저에는플래시나 ActiveX 를설치 HTML5: 와 태그가추가 오디오 요소의속성 오디오파일형식 MP3 'MPEG-1 Audio Layer-3' 의약자로 MPEG

More information

SH100_V1.4

SH100_V1.4 User Manual VLUU SH100 1 2 3 4 5 6 m m 7 8 9 10 11 12 13 15 16 17 x y 18 19 1 4 z x 20 2 o 5 o 6 3 7 10 11 21 8 12 o 9 o 22 1 m 2 3 2 1 3 23 24 o 25 1 2 o 1 2 3 26 1 2 1 2 27 1 28 2 1 3 29 2 4 30 1 m

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Web server porting 2 Jo, Heeseung Web 을이용한 LED 제어 Web 을이용한 LED 제어프로그램 web 에서데이터를전송받아타겟보드의 LED 를조작하는프로그램을작성하기위해다음과같은소스파일을생성 2 Web 을이용한 LED 제어 LED 제어프로그램작성 8bitled.html 파일을작성 root@ubuntu:/working/web# vi

More information

슬라이드 1

슬라이드 1 웹프로그래밍 HTML, 자바스크립트, ASP 를중심으로 제 3 장고급 HTML 작성 목차 제 3 장고급 HTML 작성 2.1 기본태그 2.2 LINK 태그 2.3 Image 2.4 TABLE 2.5 FRAME 2.6 INPUT 양식 2 3 장고급 HTML 작성 멀티미디어파일다루기 스타일시트 레이어 3 3.1 멀티미디어 최근인터넷사용자가급증하면서기업 / 개인용홈페이지가급증하였고다양한홈페이지를만들기위해많은기술들이생겨나고있음

More information

Chapter 4. LISTS

Chapter 4. LISTS 연결리스트의응용 류관희 충북대학교 1 체인연산 체인을역순으로만드는 (inverting) 연산 3 개의포인터를적절히이용하여제자리 (in place) 에서문제를해결 typedef struct listnode *listpointer; typedef struct listnode { char data; listpointer link; ; 2 체인연산 체인을역순으로만드는

More information

<3034C1DFB5BFC0C7B7E1B1E2B1E2BDC3C0E5B5BFC7E22E687770>

<3034C1DFB5BFC0C7B7E1B1E2B1E2BDC3C0E5B5BFC7E22E687770> 중동의료기기 시장동향 KOTRA / ( ) - 1 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - Ⅰ U.A.E. Ⅰ U.A.E. Ⅰ U.A.E. Chapter 1 국가정보 - 11 - Ⅰ U.A.E. - 12 - Ⅰ U.A.E. - 13 - Ⅰ U.A.E. - 14 - Ⅰ U.A.E. - 15 - Ⅰ U.A.E. - 16 - Ⅰ U.A.E.

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

Modern Javascript

Modern Javascript ES6 - Arrow Function Class Template String Destructuring Default, Rest, Spread let, const for..of Promises Module System Map, Set * Generator * Symbol * * https://babeljs.io/ Babel is a JavaScript compiler.

More information

미쓰리 파워포인트

미쓰리 파워포인트 computer & internet 07. FRAME TAG FRAME? 프레임이란? : 웹페이지를수직이나수평으로여러개영역으로나누어다른웹문서가들어갈수있도록구성할수있음. 이때나누어진각각의창을프레임이라고함. 2 FRAME 문서의구조 HTML 문서에서 태그기능을 프레임문서구조에서는 이대신함 일반웹페이지구조 ..

More information

; struct point p[10] = {{1, 2, {5, -3, {-3, 5, {-6, -2, {2, 2, {-3, -3, {-9, 2, {7, 8, {-6, 4, {8, -5; for (i = 0; i < 10; i++){ if (p[i].x > 0 && p[i

; struct point p[10] = {{1, 2, {5, -3, {-3, 5, {-6, -2, {2, 2, {-3, -3, {-9, 2, {7, 8, {-6, 4, {8, -5; for (i = 0; i < 10; i++){ if (p[i].x > 0 && p[i ; struct point p; printf("0이아닌점의좌표를입력하시오 : "); scanf("%d %d", &p.x, &p.y); if (p.x > 0 && p.y > 0) printf("1사분면에있다.\n"); if (p.x < 0 && p.y > 0) printf("2사분면에있다.\n"); if (p.x < 0 && p.y < 0) printf("3사분면에있다.\n");

More information

untitled

untitled - -, (insert) (delete) - - (insert) (delete) (top ) - - (insert) (rear) (delete) (front) A A B top A B C top push(a) push(b) push(c) A B top pop() top A B D push(d) top #define MAX_STACK_SIZE 100 int

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 09 장 문서객체모델 1. 문서객체모델관련용어 2. 웹페이지생성순서 3. 문서객체선택 4. 문서객체조작 5. 이벤트 문서객체와문서객체모델의개념을이해한다. 문서객체를선택하고조작할수있다. 이벤트의종류를알아보고문서객체에이벤트를연결해본다. 1 문서객체모델관련용어 문서객체모델 (DOM) Document Object Model 웹브라우저가 HTML 파일을분석하고표시하는방법

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 12 장. 인터페이스관련 API 목차 12.1 위치정보사용하기 12.2 드래그앤드롭사용하기 12.3 오디오및비디오제어하기 2 12.1 위치정보사용하기 12.1.1 지오로케이션 API의개요 12.1.2 단발성위치요청하기 12.1.3 반복적위치요청하기 3 위치정보 (geolocation) 위치정보 GPS 가내장된모바일기기에서정확한위치파악가능

More information

OCaml

OCaml OCaml 2009.. (khheo@ropas.snu.ac.kr) 1 ML 2 ML OCaml INRIA, France SML Bell lab. & Princeton, USA nml SNU/KAIST, KOREA 3 4 (let) (* ex1.ml *) let a = 10 let add x y = x + y (* ex2.ml *) let sumofsquare

More information

PowerPoint Presentation

PowerPoint Presentation 객체지향프로그래밍 클래스, 객체, 메소드 ( 실습 ) 손시운 ssw5176@kangwon.ac.kr 예제 1. 필드만있는클래스 텔레비젼 2 예제 1. 필드만있는클래스 3 예제 2. 여러개의객체생성하기 4 5 예제 3. 메소드가추가된클래스 public class Television { int channel; // 채널번호 int volume; // 볼륨 boolean

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 9. 자바스크립트객체 객체 객체 (object) 는사물의속성과동작을묶어서표현하는기법 ( 예 ) 자동차는메이커, 모델, 색상, 마력과같은속성도있고출발하기, 정지하기등의동작도가지고있다. 객체의종류 객체의 2 가지종류 내장객체 (bulit-in object): 생성자가미리작성되어있다. 사용자정의객체 (custom object): 사용자가생성자를정의한다.

More information

Javascript

Javascript 1. HTML 이란? HTML 은 Hyper Text Mark Up Language 의약자로예약되어있는각종태그라는명령어를이용하여웹페이지를작성할때사용하는언어입니다. 2. HTML 의기본구조 < 태그 > 내용 < 태그속성 = 변수 > 내용

More information

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx 과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part3. Ajax Ch20. XMLHttpRequest 2014년 1학기 Professor Seung-Hoon Choi 20 XMLHttpRequest XMLHttpRequest 객체 자바스크립트로 Ajax를이용할때사용하는객체 간단하게 xhr 이라고도부름 서버

More information

저작자표시 - 비영리 - 변경금지 2.0 대한민국 이용자는아래의조건을따르는경우에한하여자유롭게 이저작물을복제, 배포, 전송, 전시, 공연및방송할수있습니다. 다음과같은조건을따라야합니다 : 저작자표시. 귀하는원저작자를표시하여야합니다. 비영리. 귀하는이저작물을영리목적으로이용할

저작자표시 - 비영리 - 변경금지 2.0 대한민국 이용자는아래의조건을따르는경우에한하여자유롭게 이저작물을복제, 배포, 전송, 전시, 공연및방송할수있습니다. 다음과같은조건을따라야합니다 : 저작자표시. 귀하는원저작자를표시하여야합니다. 비영리. 귀하는이저작물을영리목적으로이용할 저작자표시 - 비영리 - 변경금지 2.0 대한민국 이용자는아래의조건을따르는경우에한하여자유롭게 이저작물을복제, 배포, 전송, 전시, 공연및방송할수있습니다. 다음과같은조건을따라야합니다 : 저작자표시. 귀하는원저작자를표시하여야합니다. 비영리. 귀하는이저작물을영리목적으로이용할수없습니다. 변경금지. 귀하는이저작물을개작, 변형또는가공할수없습니다. 귀하는, 이저작물의재이용이나배포의경우,

More information

歯MDI.PDF

歯MDI.PDF E08 MDI SDI(Single Document Interface) MDI(Multiple Document Interface) MDI (Client Window) (Child) MDI 1 MDI MDI MDI - File New Other Projects MDI Application - MDI - OK [ 1] MDI MDI MDI MDI Child MDI

More information

lecture4(6.범용IO).hwp

lecture4(6.범용IO).hwp 제 2 부 C-언어를 사용한 마이크로컨트롤러 활용기초 66 C-언어는 수학계산을 위해 개발된 FORTRAN 같은 고급언어들과는 달 리 Unix 운영체제를 개발하면서 같이 개발된 고급언어이다. 운영체제의 특성상 C-언어는 다른 고급언어에 비해 컴퓨터의 하드웨어를 직접 제어할 수 있는 능력이 탁월하여 마이크로프로세서의 프로그램에 있어서 어셈블 리와 더불어 가장

More information

슬라이드 1

슬라이드 1 Index 1. 광고상품요약 2. 공통가이드 3. 상품별제작시주의사항 4. 플래시배너액션가이드 5. DM제작가이드 6. 모바일광고제작가이드 7. Contact Us 1. 광고상품요약 상품명사이즈용량 CPM( 원 ) A.CTR 특이사항태그가능여부 CF 480*270 15 초이내 10,000 CTR 1.6% 동영상 wmv 파일 X I-Cover 1000*630

More information

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D>

<4D F736F F F696E74202D20C1A63038C0E520C5ACB7A1BDBABFCD20B0B4C3BC4928B0ADC0C729205BC8A3C8AF20B8F0B5E55D> Power Java 제 8 장클래스와객체 I 이번장에서학습할내용 클래스와객체 객체의일생직접 메소드클래스를 필드작성해 UML 봅시다. QUIZ 1. 객체는 속성과 동작을가지고있다. 2. 자동차가객체라면클래스는 설계도이다. 먼저앞장에서학습한클래스와객체의개념을복습해봅시다. 클래스의구성 클래스 (class) 는객체의설계도라할수있다. 클래스는필드와메소드로이루어진다.

More information

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt

Microsoft PowerPoint - 3ÀÏ°_º¯¼ö¿Í »ó¼ö.ppt 변수와상수 1 변수란무엇인가? 변수 : 정보 (data) 를저장하는컴퓨터내의특정위치 ( 임시저장공간 ) 메모리, register 메모리주소 101 번지 102 번지 변수의크기에따라 주로 byte 단위 메모리 2 기본적인변수형및변수의크기 변수의크기 해당컴퓨터에서는항상일정 컴퓨터마다다를수있음 short

More information

중간고사

중간고사 중간고사 예제 1 사용자로부터받은두개의숫자 x, y 중에서큰수를찾는알고리즘을의사코드로작성하시오. Step 1: Input x, y Step 2: if (x > y) then MAX

More information

Tutoría

Tutoría 시작하려면여기를클릭하십시오 PSI Services LLC, 2017 Examination Tutorial Korean-1 PSI Services LLC, 2017 Examination Tutorial Korean-2 시작하려면버튼을클릭하십시오. 작업을취소하려면버튼을클릭하십시오. 미용사필기시험시작! 시험응시자정보 : 이름 : 응시자 ID : 시험 : 부문 :

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Reasons for Poor Performance Programs 60% Design 20% System 2.5% Database 17.5% Source: ORACLE Performance Tuning 1 SMS TOOL DBA Monitoring TOOL Administration TOOL Performance Insight Backup SQL TUNING

More information

로거 자료실

로거 자료실 redirection 매뉴얼 ( 개발자용 ) V1.5 Copyright 2002-2014 BizSpring Inc. All Rights Reserved. 본문서에대한저작권은 비즈스프링 에있습니다. - 1 - 목차 01 HTTP 표준 redirect 사용... 3 1.1 HTTP 표준 redirect 예시... 3 1.2 redirect 현상이여러번일어날경우예시...

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 휴대폰인증서비스 사용자매뉴얼 목차 1. 서비스소개및신청 1) 휴대폰인증서비스란? 2) 휴대폰인증서비스장점 3) 서비스신청하기 1) 회원가입페이지에적용 2) 아이디, 비밀번호찾기페이지에적용 3) 14세미만비회원구매제한팝업에적용 4) 성인인증페이지에적용 2 1. 서비스소개및신청 1) 휴대폰인증서비스란? 휴대폰인증서비스는본인명의의휴대폰을사용하여본인확인을가능하게해주는서비스로써,

More information

<32B1B3BDC32E687770>

<32B1B3BDC32E687770> 008년도 상반기 제회 한 국 어 능 력 시 험 The th Test of Proficiency in Korean 일반 한국어(S-TOPIK 중급(Intermediate A 교시 이해 ( 듣기, 읽기 수험번호(Registration No. 이 름 (Name 한국어(Korean 영 어(English 유 의 사 항 Information. 시험 시작 지시가 있을

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 부록. 웹서버구축하기 1 목차 A.1 웹서버시스템 A.2 PHP 사용하기 A.3 데이터베이스연결하기 2 A.1 웹서버시스템 3 웹서버의구축 웹서버컴퓨터구축 웹서버소프트웨어설치및실행 아파치 (Apache) 웹서버가대표적 서버실행프로그램 HTML5 폼을전달받아처리 PHP, JSP, Python 등 데이터베이스시스템 서버측에데이터를저장및효율적관리

More information

chap01_time_complexity.key

chap01_time_complexity.key 1 : (resource),,, 2 (time complexity),,, (worst-case analysis) (average-case analysis) 3 (Asymptotic) n growth rate Θ-, Ο- ( ) 4 : n data, n/2. int sample( int data[], int n ) { int k = n/2 ; return data[k]

More information

K&R2 Reference Manual 번역본

K&R2 Reference Manual 번역본 typewriter structunion struct union if-else if if else if if else if if if if else else ; auto register static extern typedef void char short int long float double signed unsigned const volatile { } struct

More information

쉽게 풀어쓴 C 프로그래밍

쉽게 풀어쓴 C 프로그래밍 CHAPTER 6. CSS 레이아웃과애니메이션 레이아웃이란? 웹페이지에서 HTML 요소의위치, 크기등을결정하는것 집안에서의가구배치와비슷하다. 블록요소와인라인요소 블록 (block) 요소 - 화면의한줄을전부차지한다. 인라인 (inline) 요소 - 한줄에차례대로배치된다. 현재줄에서필요한만큼의너비만을차지한다. 블록요소 한줄을전부차지 , , ,

More information

4장.문장

4장.문장 문장 1 배정문 혼합문 제어문 조건문반복문분기문 표준입출력 입출력 형식화된출력 [2/33] ANSI C 언어와유사 문장의종류 [3/33] 값을변수에저장하는데사용 형태 : < 변수 > = < 식 > ; remainder = dividend % divisor; i = j = k = 0; x *= y; 형변환 광역화 (widening) 형변환 : 컴파일러에의해자동적으로변환

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

Microsoft PowerPoint - 04-UDP Programming.ppt

Microsoft PowerPoint - 04-UDP Programming.ppt Chapter 4. UDP Dongwon Jeong djeong@kunsan.ac.kr http://ist.kunsan.ac.kr/ Dept. of Informatics & Statistics 목차 UDP 1 1 UDP 개념 자바 UDP 프로그램작성 클라이언트와서버모두 DatagramSocket 클래스로생성 상호간통신은 DatagramPacket 클래스를이용하여

More information

Lab1

Lab1 Lab 1: HTML CSS 2015 Fall human-computer interaction + design lab. Joonhwan Lee HTML Web Server (World Wide Web: WWW)? (., FTP ). web 3 웹 구조의 이해 웹페이지 웹페이지는 HTML 이라는 언어로 만들어진 일종의 프로그램 웹페이지는 텍스트, 이미지, 동영상,

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

다른 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

Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주

Ÿ 캔버스의크기와드로잉표면의크기 <canvas> 요소의 width/height 속성사용하여변경하면캔버스크기를드로잉표면의크기로자동변경한다. CSS를사용해서캔버스크기를지정하는경우는드로잉표면의크기는변경할수없기때문에캔버스와드로잉표면의불일치로인하여예기치않은결과를발생시킬수있음에주 1. 기본내용 1.1 캔버스 Ÿ canvas 요소는웹페이지에서자바스크립트를통해즉시그림을그리는데사용되며단순한그림표현을넘어여러효과와함께텍스트및애니메이션표현이가능하다. Ÿ 그림을그리기위해서는 를사용해서그림영역을지정하고, 자바스크립트를사용해서실제그림을그린다. 1.2 캔버스좌표시스템 Ÿ 캔버스의좌표시스템은 2D 컨텍스트로, 왼쪽상단모서리에있는평면직교표면을

More information

Cookie Spoofing.hwp

Cookie Spoofing.hwp Cookie Spoofing&Sniffing By Maxoverpro[max]( 장상근) maxoverpro@empal.com http://www.maxoverpro.org 1. 서론 이문서는 Cookie Spoofing 과 Sniffing 에대해정석적인방법을이야기하도록하며또 한어느특정곳의취약점을설명하지않고직접제작한예제를가지고 Cookie Spoofing 과

More information

뷰티 멘토링 북 Winter 2012 _VOL.6 눈부신 감성으로 존재감을 확실히 드러낸 블랙 그 어떤 거창한 미사여구도 이 컬러를 정확히 표현해 낼 수 없다 단어 자체로 무한한 의미를 설명하는 컬러 블랙. 올 겨울 그 휘황한 컬러의 파티가 시작된다 지상에서 가장 성스러운 컬러 - BLACK Twinkle 냉철한 6 genic WINTER 2012 7 스타일에

More information

Microsoft Word - src.doc

Microsoft Word - src.doc IPTV 서비스탐색및콘텐츠가이드 RI 시스템운용매뉴얼 목차 1. 서버설정방법... 5 1.1. 서비스탐색서버설정... 5 1.2. 컨텐츠가이드서버설정... 6 2. 서버운용방법... 7 2.1. 서비스탐색서버운용... 7 2.1.1. 서비스가이드서버실행... 7 2.1.2. 서비스가이드정보확인... 8 2.1.3. 서비스가이드정보추가... 9 2.1.4. 서비스가이드정보삭제...

More information

Microsoft PowerPoint Python-WebDB

Microsoft PowerPoint Python-WebDB 8. 웹과데이터베이스연결응용 순천향대학교컴퓨터공학과이상정 순천향대학교컴퓨터공학과 1 학습내용 파이썬과데이터베이스연결 웹과데이터베이스연결 로그인페이지예 순천향서핑대회예 순천향대학교컴퓨터공학과 2 파이썬과 SQLite3 연결 sqlite3 모듈을사용하여파이썬과 SQLite3 데이테베이스연동프로그램작성 데이터베이스연결을오픈, 종료및내보내기 sqlite3.connect(filename)

More information

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드] Web Technology Stack HTML, CSS, JS Basics HTML Tutorial https://www.w3schools.com/html/default.asp CSS Tutorial https://www.w3schools.com/css/default.asp JS Tutorial 524730-1 2019 년봄학기 3/11/2019 박경신 https://www.w3schools.com/html/default.asp

More information

OSP Stage 2040 <Plan & Elaboration> 유아를위한주제별영어학습놀이프로그램 T 김도희 박수민 + 김태현 1

OSP Stage 2040 <Plan & Elaboration> 유아를위한주제별영어학습놀이프로그램 T 김도희 박수민 + 김태현 1 OSP Stage 2040 유아를위한주제별영어학습놀이프로그램 T6 201011311 김도희 201111353 박수민 + 김태현 1 Index Activity 2141. Design Real s -3 Activity 2142. Define Reports, UI, and Storyboards -13 Activity 2143.

More information

歯엑셀모델링

歯엑셀모델링 I II II III III I VBA Understanding Excel VBA - 'VB & VBA In a Nutshell' by Paul Lomax, October,1998 To enter code: Tools/Macro/visual basic editor At editor: Insert/Module Type code, then compile by:

More information

PHP & ASP

PHP & ASP PHP 의시작과끝 echo ; Echo 구문 HTML과 PHP의 echo 비교 HTML과 PHP의 echo를비교해볼까요

More information

슬라이드 1

슬라이드 1 프로세싱 광운대학교로봇학부박광현 프로세싱실행 2 C:\processing-3.2.1 폴더 창나타내기 실행 정지 3 폭 높이 600 400 도형그리기 배경칠하기 5 background(255, 255, 255); R G B background(255, 0, 0); background(255, 122, 0); 선그리기 6 background(255, 122, 0);

More information