HTML5 웹 콘텐츠 제작_ indd

Size: px
Start display at page:

Download "HTML5 웹 콘텐츠 제작_130806.indd"

Transcription

1

2 인터랙티브 웹 콘텐츠 제작 프로젝트 초판 1쇄 발행 2013년 9월 6일 지은이 이명희 펴낸이 장성두 펴낸곳 제이펍 출판신고 2009년 11월 10일 제 호 주소 경기도 파주시 문발동 파주출판도시 뮤즈빌딩 403호 전화 / 팩스 홈페이지 / 이메일 jeipub@gmail.com 편집부 이민숙, 이 슬 / 표지디자인 미디어픽스 용지 에스에이치페이퍼 / 인쇄 한솔프린테크 / 제본 광우제본 ISBN (93000) 값 25,000원 이 책은 저작권법에 따라 보호를 받는 저작물이므로 무단 전재와 무단 복제를 금지하며, 이 책 내용의 전부 또는 일부를 이용하려면 반드시 저작권자와 제이펍의 서면동의를 받아야 합니다. 잘못된 책은 구입하신 서점에서 바꾸어 드립니다. 제이펍은 책에 관한 독자 여러분의 아이디어와 원고 투고를 기다리고 있습니다. 책으로 펴내고자 하는 아이디어나 원고가 있으신 분께서는 책에 대한 간단한 개요와 차례, 구성과 저(역)자 약력 등을 메일로 보내주세요. jeipub@gmail.com

3

4 차 례 PROJECT 1 _ 춤추는 꽃 이 책에 대하여 9 감사의 글 18 1 이. 론. 학. 습 1-1 브라우저에 이미지를 출력하는 방법 HTML의 <img> 요소 사용 CSS의 background-image 속성 사용 JavaScript의 createelement 메소드 사용 캔버스를 생성하는 방법 HTML의 <canvas> 요소 사용 JavaScript의 createelement 메소드 사용 캔버스에 이미지를 그리는 방법 <canvas> 요소를 HTML에서 생성했을 때, 캔버스의 참조 값 얻기 <canvas> 요소를 동적으로 생성했을 때, 캔버스의 참조 값 얻기 drawimage 메소드 캔버스에서 이미지를 변환하는 방법 컨텍스트 상태 저장 변환행렬을 단위행렬로 초기화 변환하려는 요소의 중심으로 컨텍스트 이동 적용하고 싶은 변환의 실행 저장했던 컨텍스트 상태 복구 캔버스에서 애니메이션 루프를 수행하는 방법 일반적인 방법: 타이머 사용 새로운 방법: requestanimationframe 메소드 사용 48 2 실. 전. 학. 습 2-1 HTML CSS JavaScript 도전과제 65 3 프.로.젝.트.정.리 66 4 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

5 PROJECT 2 _ 중력 브라우저 1 이. 론. 학. 습 1-1 Box2DWeb 물리 엔진의 이해와 활용 Box2DWeb 엔진 다운받기 Box2DWeb 엔진의 기본 사용환경 구성하기 World 생성 Box2DWeb 엔진의 핵심 콘셉트 간단한 물리 현상 재현하기 이벤트 연결하기 조인트 오픈 API를 활용하여 검색 정보 활용하는 법 Daum으로부터 키 발급하기 jquery.ajax() API로 HTTP 질의 보내기 98 2 실. 전. 학. 습 2-1 HTML CSS JavaScript 도전과제 프.로.젝.트.정.리 112 PROJECT 3 _ 비디오 크로마키 1 이. 론. 학. 습 1-1 비디오를 생성하고 재생하는 방법 HTML의 <video> 요소 사용 JavaScript의 createelement 메소드 사용 비디오의 로딩에 따른 이벤트 비디오의 재생 HTML5에서 지원하는 비디오 포맷 비디오 타입 체크 비디오 인코딩하기 Miro Video Converter 다운받기 동영상 파일 끌어다 놓기 컨버팅하기 캔버스에 비디오 그리기 캔버스의 픽셀을 조작하는 방법 137 차 례 5

6 2 실. 전. 학. 습 2-1 HTML CSS JavaScript 도전과제 프.로.젝.트.정.리 152 PROJECT 4 _ 우쿨렐레 1 이. 론. 학. 습 1-1 오디오를 생성하고 재생하는 방법 HTML의 <audio> 요소 사용 JavaScript의 createelement 메소드 사용 오디오 로딩에 따른 이벤트 오디오의 재생 HTML5에서 지원하는 오디오 포맷 오디오 타입 체크 오디오 인코딩하기 Miro Video Converter로 오디오 불러오기 오디오 컨버팅하기 패스를 생성하는 방법 현재 기본 패스 moveto(x, y) lineto(x, y) quadraticcurveto(cpx, cpy, x, y) 차 베지어 곡선 차 베지어 곡선 외부 스크립트를 로드하는 방법 실. 전. 학. 습 2-1 HTML CSS JavaScript ukulelepathcreator.js JavaScript ukulelesound.js JavaScript ukulelepath.js 도전과제 프.로.젝.트.정.리 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

7 PROJECT 5 _ 코믹 스타일 1 이. 론. 학. 습 1-1 스프라이트 시트를 CSS로 조작하는 방법 CSS background 속성 CSS background 속성을 사용한 간단한 예제 CSS3의 2D Transform 이동하기 : translate(x, y) 회전하기 : rotate(angle) 확대/축소하기 : scale(scalex, scaley) 비스듬히 틀기 : skew(anglex, angley) 행렬변환하기 : matrix(a, b, c, d, e, f) 실. 전. 학. 습 2-1 HTML CSS JavaScript 도전과제 프.로.젝.트.정.리 236 PROJECT 6 _ 팝업북 1 이. 론. 학. 습 1-1 3D 이론 차원 공간의 이해 perspective 속성 CSS3의 3D Transform 이동하기: translate3d(x, y, z) 확대/축소하기: scale3d(scalex, scaley, scalez) 회전하기: rotate3d(x, y, z, angle) 행렬변환하기: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p) 실. 전. 학. 습 2-1 HTML CSS JavaScript 도전과제 프.로.젝.트.정.리 281 차 례 7

8 PROJECT 7 _ 춤추는 꽃, 모바일 편 1 이. 론. 학. 습 1-1 브라우저 종류를 확인하는 방법 모바일 브라우저를 위한 디버깅 모바일 크롬 브라우저에서 디버깅 사용하기 모바일 사파리 브라우저에서 디버깅 사용하기 모바일 브라우저의 종류 알아내기 모바일을 위한 터치 이벤트 터치에 사용되는 이벤트 타입 TouchList 인터페이스와 Touch 인터페이스 미디어 쿼리 미디어 타입 미디어 쿼리 문법 미디어 특징 실. 전. 학. 습 2-1 HTML CSS JavaScript 도전과제 프.로.젝.트.정.리 322 APPENDIX _ PC에 웹 서버 구성하기 1 윈도우에 웹 서버 구성하기 맥에 웹 서버 구성하기 330 찾아보기 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

9 이 책 에 대 하 여 기획의도 구글의 두들(Doodles)을 아시나요? 어느날 구글의 메인 페이지가 제 눈을 사로잡았는데, 지퍼 를 개발한 기드온 선드백(Gideon Sundback) 의 탄생 132주년을 기념하는 두들이었습니다. (아쉽게 도 이 두들이 정상적으로 작동되는 웹페이지는 찾아보기 힘들더군요. 단 두들 지퍼 라는 검색어로 유튜브 에서 검색하면 작동하는 모습을 볼 수 있습니다. 물론 두들의 공식 페이지인 gideon-sundbacks-132nd-birthday에서 간단한 정보도 얻을 수 있고요.) 기드온 선드백 기념 두들 페이지 [ 출처 ] 이 책에 대하여 9

10 이 두들을 접한 많은 분들이 구글의 센스에 감탄하며 칭찬을 아끼지 않았던 것으로 기억합니 다. 저도 마찬가지로 구글의 창의력에 감탄을 금하지 않을 수 없었지요. 그런데 자꾸 생각이 나는 겁니다. 그래서 두들이 만들어내는 또 다른 인터랙티브 콘텐츠를 찾아보기 시작했지요. 그리고 그때 구글의 이스터 에그*를 알게 되었고, 두들 콘텐츠의 뒷단에 숨어 있는 기술을 분 석하기 시작했습니다. 이 책은 이러한 두들 콘텐츠의 기술을 분석한 내용을 바탕으로 기획하고 집필했습니다. 최대 한 기술적 중복을 제거한 7개의 샘플에 기술의 핵심을 담아내려고 노력했지요. 기술의 핵심은 세 가지입니다. 여러분도 이미 알고 있듯이, HTML5와 CSS3 그리고 JavaScript가 그것들이죠. 물론 Node.js나 Websocket 그리고 WebGL 기술을 사용한 콘텐츠들도 있었지만, 이 기술들을 모두 하나의 책에서 다루기에는 책이 가지는 집중도가 얕아질 우려가 있었습니다. 따라서 이 책에서는 클라이언트 기술 중 특히 브라우저에 관련한 위 세 가지 기술에만 집중하고 있습니 다. 구성 이 책은 총 7개의 장으로 구성되어 있습니다. 그리고 각 장은 크게 이론학습 과 실전학습 으로 구성되어 있습니다. 각 장에서 다루는 이론학습 은 실전학습 의 코드를 따라하고 이해하기 위 해서 반드시 알아야 할 선행학습의 성격을 띄고 있습니다. PROJECT 1 _ 춤추는 꽃 HTML5에서 새롭게 선보이는 캔버스(Canvas) 기술을 설명하고 있습니다. 캔버스에 이미지를 출력하고 애 니메이션을 구현하는 방법을 이해하고 학습합니다. PROJECT 2 _ 중력 브라우저 * 이스터 에그(Easter egg)란 영화, 책, CD, DVD, 소프트웨어, 비디오 게임 등에 숨겨진 메시지나 기능을 뜻합니다. [ 출처 ] 10 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

11 Box2dWeb 물리 라이브러리와 다음(Daum)의 오픈 API를 캔버스 기술에 접목하여 한동안 회자되었던 google gravity 와 비슷한 콘텐츠를 만들어 봅니다. PROJECT 3 _ 비디오 크로마키 HTML5에서 비디오를 사용하는 방법을 익혀 봅니다. 또한 비디오를 캔버스와 접목하여 픽셀을 조작하는 방법 또한 익혀 봅니다. PROJECT 4 _ 우쿨렐레 HTML5에서 오디오를 사용하는 방법을 익혀 봅니다. 또한 비동기 리소스 로더인 yepnope.js의 사용법을 익히며 왜 비동기적인 리소스 로더가 필요한지 살펴 봅니다. PROJECT 5 _ 코믹 스타일 CSS3를 사용하여 카툰 스타일의 콘텐츠를 제작해 봅니다. 이때 2D 변형에 대해 이해해 봅니다. PROJECT 6 _ 팝업북 CSS3에서 사용하는 3D 변형을 이해하고 간단한 팝업북을 제작해 봅니다. PROJECT 7 _ 춤추는 꽃, 모바일 편 1장에서 만든 PC 기반의 캔버스 콘텐츠를 모바일에 최적화된 콘텐츠로 변경해 봅니다. 이때 모바일에서만 사용할 수 있는 터치 이벤트를 학습하며, 더불어 미디어 쿼리를 통한 다양한 분기 처리를 이해해 봅니다. 브라우저별 실전학습 프로젝트 실행표 아직도 HTML5의 기능이 모든 브라우저에서 작동되는 것은 아닙니다. 그래서 실무에서는 폴리 필(polyfill)*이나 심(shim)**을 사용하여 모든 브라우저에서 작동될 수 있게 작업하곤 하지요. 대 중적으로 가장 인기가 있으며 많이 사용되는 스크립트 라이브러리가 Modernizr( * 폴리필(polyfill)이란 아직은 브라우저에서 지원하지 않는 기능을 브라우저에서 사용할 수 있게 별도로 만들어 놓은 코드다. [ 출처 ] ** 심(shim 또는 shiv)은 API를 가로채서 파라미터를 변경하거나 동작을 조작하거나 또는 다른 동작으로 리다이렉션하는 등의 기능을 가지는 작은 라이브러리다. [ 출처 ] 이 책에 대하여 11

12 com/download/에서 다운받을 수 있습니다)입니다. 물론 이것말고도 많은 폴리필이나 심이 존재합니 다. ( 방문해 보세요. 얼마나 많은지 놀랄 겁니다.) 하지만 이 책에서는 폴리필이나 심을 사용하지 않을 겁니다. 이것들을 사용하게 되 면 학습하는 입장에서는 혼란만 가중될 수 있다는 것이 제 판단이기도 하고요. 대신 이 책을 학습하는 분들을 위해 표를 하나 준비했습니다. 각 장의 실전학습 프로젝트가 의도했던 대로 작동되는지 브라우저별로 명시한 내용이지요. 공부하는 데 참고가 될 것이라 생각합니다. 브라우저별 실전학습 프로젝트 실행표 속성 크롬 파이어폭스 사파리 오페라 IE 9 IE 10 * * ** ** PROJECT 1 춤추는 꽃 PROJECT 2 중력 브라우저 PROJECT 3 비디오 크로마키 PROJECT 4 우쿨렐레 PROJECT 5 코믹 스타일 PROJECT 6 팝업북*** ios 안드로이드 PROJECT 7 춤추는 꽃 모바일 기본 브라우저 크롬 모바일**** 파이어폭스 안드로이드 오페라 미니 사파리 모바일 크롬 모바일***** * 중력이 적용된 돔 요소가 회전이 안 되며 실행 속도가 느림 ** 픽셀 처리된 비디오의 재생은 가능하나 픽셀이 뭉개지는 현상이 발생하며, 비디오를 서비스해 주는 서버에서 해당 비디오의 MIME Type을 지원하지 않으면 비디오가 나타나지 않는 경우가 있음 *** 3D Transforms와 perspective 속성 모두를 지원하지 않으면 이상한 오류가 발생. 현재 이 두 가지 모두를 지원해 주는 브라우저 는 크롬과 사파리뿐임 **** 안드로이드 4.0 아이스크림 샌드위치 이상에서 사용 가능 ***** ios 5.0 이상에서 사용 가능 12 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

13 코드 책에서 설명한 코드는 모두 깃허브에서 확인할 수 있습니다. 주소는 다음과 같습니다. master 브랜치 : 책의 master 브랜치입니다. 이곳은 앞으로도 계속 업데이트될 예정입니다. 종이에 한 번 적히면 수정하기 힘든 책의 특성을 감안하여, 오류와 에러가 발견될 때마다 이곳 master 브랜치에 수정된 내용을 올릴 것입니다. 코드처럼 책도 항상 버그(bug)가 있더군요. 오 류와 에러를 발견한 분은 언제든지 저에게 연락 주시면 감사하겠습니다. 여러분의 도움이 필요 한 부분입니다. tag 브랜치 : 책이 인쇄되는 시점에 작성된 동일한 버전의 코드는 위 주소에서 다운받을 수 있습니다. 가능 하면 책에 적힌 라인 번호까지 일치시키려고 확인하고 또 확인했는데 틀린 부분이 있는지 잘 모르겠습니다. 이 책에 대하여 13

14 책이 인쇄되는 시점의 tag 페이지입니다. 이 코드들은 절대 수정될 일이 없겠죠! 만약 깃허브에 접속하여 파일을 다운받는 것이 불편한 분을 위해 바로 다운받을 수 있는 주소 도 알려 드리지요. 브라우저에서 아래의 주소로 접속하면 파일이 바로 다운로드될 것입니다. 코드 다운로드 : 대개 개발 서적에서는 코드의 일부분만을 제시하고 나머지 부분 또는 전체 코드는 첨부 파일 에서 확인하도록 유도합니다. 이러한 방법이 틀렸다거나 잘못되었다고 말하는 것은 아니지만, 이러한 방법이 때론 핵심 내용을 이해하는 데 방해가 되는 요소로 작용하기도 하지요. 또한 책을 읽는 시점에 코드 전체를 확인할 수 없는 경우도 있을 수 있습니다. 따라서 가능하면 이 책에서는 샘플 코드 전체를 제시했습니다. (물론 필요에 따라 몇몇 샘플코드는 부분만 제시하기도 합 니다.) 결코 책의 분량을 늘리기 위한 저자의 숨은 의도라고 생각하지는 말아주세요. 14 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

15 대상독자 이 책을 읽는 목적에 따라 다음과 같은 두 부류의 독자군이 있지 않을까 싶습니다. 코드를 직접적으로 다루지 않는 독자군 아마도 개발자들과 함께하는 디자이너나 기획자가 될 것 같습니다. 이런 분들은 코드 자체에 는 관심이 없을 겁니다. 따라서 제가 제안하는 방법은 각 장에서 다루는 기술적 주제를 확인 한 후 이론학습 부분만 읽으면 될 것 같습니다. 이론학습이라도 간간이 개발자들을 대상으로 하는 내용이 있을 수 있습니다. 이러한 부분은 과감히 넘어가면 됩니다. 굳이 붙잡고 시간을 끌 필요는 없을 것 같습니다. 7개의 이론학습만 보더라도 충분히 많은 양의 지식을 쌓을 수 있 으며, 개발자들과 의사소통을 한다거나 기술적 맥락을 바탕으로 한 디자인과 콘텐츠 기획을 충분히 수행할 수 있게 될 겁니다. 코드를 직접 작성하는 독자군 개발자일 확률이 가장 높을 겁니다. 당연하겠지만 이 책을 읽고 자신의 코드로 소화하고 싶 은 분이라면 기본적인 HTML, CSS, JavaScript를 이해하고 있어야 합니다. 특히 자바스크립트 와 관련하여 변수가 무엇인지, 함수가 무엇인지 그 기본 문법을 알고 있어야 한다는 의미지요. 우선 이론학습과 그와 관련한 샘플코드를 실행해 보기 바랍니다. 길지 않은 샘플코드 같은 경 우에는 자신이 선호하는 IDE를 사용하여 직접 작성하는 수고를 마다치 않는 것도 좋은 학습법 일 것입니다. 물론 이러한 방법이 부담된다고 한다면, 최소한 제가 미리 작성해 놓은 코드를 다 운받아 실행해 보는 수고는 해야 합니다. 백문이불여일타! 개발자에겐 꼭 수행과 같은 작업이 지요. 그다음으로는 실전학습 프로젝트의 코드를 읽어야 합니다. 이때에는 굳이 코드를 따라 칠 필요는 없습니다. 가끔 이해가 되지 않는 부분이나 변경하여 적용해야 할 부분이 있다면 그 렇게 하면 되고요. 이 책에 대하여 15

16 실전학습 프로젝트에 작성된 코드를 모두 이해해야겠다는 부담감은 처음부터 가지지 않았으 면 좋겠습니다. 남이 작성한 코드를 어떻게 100% 이해할 수 있겠습니까? 그냥, 이론학습에서 살펴봤던 내용들이 실전학습 프로젝트 코드에서 어떻게 구현되었나에 초점을 맞춰 살펴보는 것으로도 충분한 학습이 될 테니까요. 그중에 여러분의 프로젝트에서 사용할 코드가 있다면 금상첨화가 아니겠습니까? 준비물 여러분이 이 책을 읽어나가기 위해서는, 특히 코드를 직접 다루는 개발자 분들은 다음의 두 가지 사항을 준비해야 합니다. 기능이 충실한 IDE가 준비되어야 합니다 저는 개인적으로 PhpStorm이라는 IDE를 사용하고 있습니다. ( 서 30일 체험 버전을 다운받아 사용해 볼 수 있습니다) 물론 이클립스 기반의 Aptana Studio를 다운 받아 설치해도 됩니다. ( 다운받을 수 있습니다) 이 툴은 오픈 소스 IDE이 기 때문에 경제적인 자유를 누릴 수 있습니다. 그 외에도 Sublime Text( 에서 다운받을 수 있습니다)나 맥에서만 사용할 수 있는 Coda 2( 다운받 을 수 있습니다)도 추천해 봅니다. 물론 절대적인 것은 아닙니다. 가장 좋은 IDE는 여러분이 지 금까지 사용하던 바로 그 IDE입니다. 웹 호스팅 또는 자신의 PC를 서버로 만들어야 합니다 책에서 다루는 일부 코드는 서버를 통해 브라우저를 열어야 제대로 작동됩니다. 다음 그림과 같이 보안 에러를 만나게 되는 경우가 있는데, 서버를 통해 접속하게 되면 문제가 말끔하게 사 라집니다. 16 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

17 서버를 통하지 않고 웹브라우저를 열면 보안 에러가 뜨기도 합니다. 물론, 이미 웹 호스팅을 이용하고 있는 분이라면 문제가 없겠지만, 그렇지 않은 분들은 여러 가지 이유로 난감할 것이 분명해 보입니다. 그래서 여러분의 PC를 서버로 만들 것을 제안합니 다. 윈도우 유저와 맥 유저를 구분하여 설명해야 하기 때문에, 편의상 이 내용은 부록에 옮겨 담았습니다. 꼭 참고하여 자신의 OS에 맞는 서버를 PC에 준비해 두고 이 책을 읽기 시작했으 면 좋겠습니다. A/S 책을 보다가 궁금한 내용이 있으면 아래에 있는 메일이나 카페를 통해 문의해 주세요. 메일 카페 이 책에 대하여 17

18 감사의 글 두 번째 책이 세상에 나왔네요. 장성두 대표님, 또 한 번의 책을 만날 수 있게 해주셔서 감사합 니다. 이민숙 과장님 그리고 이슬 씨, 따뜻하고 아름다운 편집으로 보답해 주셔서 감사합니다. 책이 책다운 이유는 다 두 분 때문입니다. 책에서 사용할 이미지를 그려준 우리 첫째 딸 하은이, 나이 차이가 많이 나는 동생 때문에 많 이 속상하고 힘들지? 아빠는 동생 예뻐해 주는 하은이가 너무 든든하단다. 예쁜 그림 그려줘 서 아주 고마워. 눈에 넣어도 아프지 않을 애굣덩어리 둘째 딸 성은이, 너의 그 미소와 뽀뽀가 없었다면 아빠는 아마 이 책을 마무리 짓지 못했을 거야. 고마워 성은아. 가족이란 이름이 가 장 소중하다는 것을 느끼게 해준 나의 반쪽 최경림, 두 아이의 엄마로서 살아가는 네가 있어 난 언제나 든든해. 사랑한다, 마누라. 책을 쓰는 처음부터 아이디어와 조언을 주며 좋은 책이 되길 기대해 주던 개발자 박기용 씨에 게 언제나 끊임없는 고마움을 느낍니다. 책 나오면 맛난 식사 함께해요. 정확한 시선으로 구성 의 장단점을 살펴봐주던 동료 개발자 김정구 씨의 냉철한 조언이 없었다면 지금과 같이 괜찮 은 책이 나올 수는 없었을 겁니다. 고마워요. 전화를 사이에 두고 묻고 또 묻는 저의 이야기에 하나하나 체크해 주며 좋은 방향을 제시해 주었던 jquery를 활용한 인터랙티브 웹 콘텐츠 제 작 의 저자 김춘경 씨에게도 감사의 말을 전합니다. 책 들고 사무실 놀러 갈게요. 플래시 게임 개발자에서 HTML5 게임 개발자로 적절한 시기에 전환할 수 있게 기회를 준 김찬수 팀장님께 도 감사를 드립니다. 게임 ZooVale을 통해 정말 많이 배웠습니다. 이곳에는 적지 못했지만, 물심양면으로 도움을 주신 모든 분께 진심으로 감사의 인사를 드립 니다. 평생 개발자로 살아가면서 좋은 책 좋은 글 많이 쓰고 싶은 꿈 이뤄갈 수 있도록 끊임없 는 관심과 애정 부탁드리겠습니다. 모두, 감사합니다. 진한 레몬에이드를 마시며... 이명희 올림 18 인터랙티브 웹 콘텐츠 제작 프로젝트 : HTML5, CSS3, JavaScript로의 코드 여행

19 HTML PROJECT 1 춤추는 꽃 딸 아이가 그린 그림을 유심히 보았습니다. 마을은 화사하고, 동물들은 웃으며, 꽃들은 춤추고 노래했지요. 하늘엔 구름이 뭉실뭉실 떠다니며 작은 파티를 열고 있었고요. 너 무나 기분이 좋았습니다. 닫혀있던 마음속 기쁨이 일어나며, 전 딸에게 예쁜 애니메이션 하나를 선물하고 싶었습니다.

20 학.습.목.표 이번 장에서 학습하게 될 내용입니다. 이미지를 출력하는 방법 로드한 이미지를 원하는 크기로 자른 후 저장하는 방법 캔버스와 컨텍스트를 생성하는 방법 캔버스에서 이미지를 변환하는 방법 캔버스에서 애니메이션 루프를 수행하는 방법 프.로.젝.트 아래의 URL에 방문해 보세요. 이번 장에서 배우게 될 내용이 무엇인 지 확인할 수 있습니다. 화면에는 구름이 흐르고 꽃이 춤추는 예쁘고 화사한 마을이 나타날 겁 니다. 아이들의 밝고 환한 마음이 전달되어 제 마음이 한껏 밝아지는 것 같습니다. 여러분도 입가에 미소를 머금게 되지요? 안 그런가요? 그림 1 1 <춤추는 꽃> 프로젝트 실행화면

21 1 이. 론. 학. 습 1-1 브라우저에 이미지를 출력하는 방법 일반적으로 아래 3가지 방법으로 이미지를 출력할 수 있습니다. HTML의 <img> 요소 사용 CSS의 background-image 속성 사용 JavaScript의 createelement 메소드 사용 (정확하게 표현한다면 Dom 트리의 최상위(Root) 객체인 Document의 createelement 메소드 라고 말해야 할 것 입니다. 하지만 이 메소드를 사용하는 곳이 대개 JavaScript 내부니까 편의상 이렇게 표현하겠습니다.) HTML의 <img> 요소 사용 <img src="이미지 파일 이름"> 위 스크립트를 HTML의 <body> 요소 안에 작성하면 src에 등록된 이미지가 브라우저에 출력됩니다. 그림 1 2 <img> 요소를 사용하여 이미지 표시하기 1-1 브라우저에 이미지를 출력하는 방법 21

22 위 이미지의 구현 코드는 다음과 같습니다. 코드 1-1 <img> 요소를 사용하여 브라우저에 이미지 표시하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>이미지 표시하기 - HTML</title> 6. </head> 7. <body> 8. <img src="res/burger_house.png"> 9. </body> 10. </html> 샘플코드 ch1_dancing_flower/sample/using_image_html.html CSS의 background-image 속성 사용 CSS #image { width : 이미지 가로 크기; height : 이미지 세로 크기; background-image : url("이미지 파일 이름"); } HTML <div id="image"></div> CSS 코드를 HTML의 <head> 요소에 <style> 요소로 감싸 넣고 HTML 코드를 <body> 요소 안에 작성하면 [그림 1 2]와 동일한 이미지를 표시할 수 있습니다. 실제로 작성된 코드는 다음 과 같습니다. 22 PROJECT 1 - 춤추는 꽃

23 코드 1-2 background-image 속성을 사용하여 브라우저에 이미지 표시하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>이미지 표시하기 - CSS</title> 6. <style> 7. #image { 8. width: 150px; 9. height: 164px; 10. background-image: url("res/burger_house.png"); 11. } 12. </style> 13. </head> 14. <body> 15. <div id="image"></div> 16. </body> 17. </html> 샘플코드 ch1_dancing_flower/sample/using_image_css.html 물론 위 코드를 inline style로 바꾸어도 동일한 결과를 얻을 수 있습니다. 다음과 같이 말이죠. 코드 1-3 CSS inline style을 사용하여 브라우저에 이미지 표시하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>이미지 표시하기 - CSS inline style</title> 6. </head> 7. <body> 8. <div style="width: 150px; height: 164px; background-image: url('res/burger_house.png');"></div> 9. </body> 10. </html> 샘플코드 ch1_dancing_flower/sample/using_image_css_inline.html 1-1 브라우저에 이미지를 출력하는 방법 23

24 1-1-3 JavaScript의 createelement 메소드 사용 document.createelement("만들고 싶은 요소의 Tag 이름"); createelement 메소드에 파라미터 값으로 태그 이름을 넣고 호출하면 해당 이름의 요소 객체를 얻을 수 있습니다. 이와 같은 방법은 자바스크립트 내에서 요소를 동적으로 생성할 때 주로 사 용하게 되지요. 아래의 코드는 이 메소드를 사용하여 [그림 1 2]와 동일한 내용을 구현하는 코 드입니다. 코드 1-4 createelement 메소드를 사용하여 브라우저에 이미지 표시하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>이미지 표시하기 - JavaScript</title> 6. </head> 7. <body> 8. <script> 9. var image = document.createelement("img"); 10. image.addeventlistener("load", imageloadhandler, false); 11. image.src = "res/burger_house.png"; function imageloadhandler(event) { 14. document.body.appendchild(image); 15. } 16. </script> 17. </body> 18. </html> 샘플코드 ch1_dancing_flower/sample/using_image_js.html document.createelement 메소드의 파라미터로 HTML 요소를 넣으면 해당 요소가 만들어집 니다. 위 코드에서는 img 를 넣었는데, 이는 <img> 요소를 만들겠다는 의미이지요. 만들어진 <img> 요소에 실제 이미지 파일의 이름을 넣고 이벤트 리스너를 연결시키면, 해당 이미지의 로드가 완료될 때 연결된 이벤트 리스너가 실행됩니다. 이때 document.body의 appendchild 메 소드를 사용하여 이미지 요소(<img>)를 브라우저에 표시할 수 있게 됩니다. 24 PROJECT 1 - 춤추는 꽃

25 1-2 캔버스를 생성하는 방법 이번엔 HTML5의 캔버스를 생성하는 방법을 살펴봅니다. 사실 <img> 요소만으로도 브라우저 에 무언가를 표시하는 것은 가능하지만, 저수준의 픽셀 조작 및 그래픽 처리 향상을 위해 캔 버스를 사용하는 것이 필요할 때가 있으며, 아래와 같은 두 가지 방법으로 <canvas> 요소를 생 성할 수 있습니다. HTML의 <canvas> 요소 사용 JavaScript의 createelement 메소드 사용 HTML의 <canvas> 요소 사용 <canvas id="캔버스 ID" width="캔버스 가로 크기" height="캔버스 세로 크기"></canvas> 위 스크립트로 브라우저에 캔버스를 생성할 수는 있으나 눈으로는 바로 확인이 되지 않을 겁 니다. 그래서 아래와 같이 캔버스 영역을 나타내는 임의의 스타일을 입혀 보았습니다. 코드 1-5 <canvas> 요소를 사용하여 캔버스 만들기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>캔버스 생성하기 - HTML</title> 6. </head> 7. <body> 8. <div id="canvascontainer"> 9. <canvas id="mycanvas" width="200" height="200" style="border: 1px dashed #ff255f;"></canvas> 10. </div> 11. </body> 12. </html> 샘플코드 ch1_dancing_flower/sample/creating_canvas_html.html 그리고 위 코드의 결과 화면은 [그림 1 3]과 같습니다. 1-2 캔버스를 생성하는 방법 25

26 실무에서는 <canvas> 요소를 바로 사용하는 것이 아니라, 코 드에서와 같이 <div> 요소로 감싸서 이를 조작하는 형태로 사용합니다. 이렇게 해야 캔버스 콘텐츠와 상관없이 위치잡기 등의 레이아웃 구성이 용이하기 때문입니다. 그림 1 3 <canvas> 요소를 사용하 여 캔버스 만들기 JavaScript의 createelement 메소드 사용 document.createelement("만들고 싶은 요소의 Tag 이름"); 앞에서 살펴보았던 내용이라 쉽게 이해할 수 있을 겁니다. 그러면 캔버스 요소를 생성하려면 어떻게 하면 될까요? 아래의 코드는 [그림 1 3]을 구현하는 코드입니다. 코드 1-6 createelement 메소드를 사용하여 캔버스 만들기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>캔버스 생성하기 - JavaScript</title> 6. </head> 7. <body> 8. <script> 9. var canvascontainer = document.createelement("div"); 10. var mycanvas = document.createelement("canvas"); 11. mycanvas.width = 200; 12. mycanvas.height = 200; 13. mycanvas.style.border = "1px dashed #ff255f"; 14. canvascontainer.appendchild(mycanvas); 15. document.body.appendchild(canvascontainer); 16. </script> 17. </body> 18. </html> 샘플코드 ch1_dancing_flower/sample/creating_canvas_js.html 26 PROJECT 1 - 춤추는 꽃

27 createelement 메소드를 사용하여 동적으로 <div> 요소와 <canvas> 요소, 이렇게 2개의 객체 를 만들었습니다. <canvas> 요소는 가로와 세로 크기를 임의의 크기로 정하지 않으면, 기본값 으로 가로는 300픽셀 세로는 150픽셀의 크기를 가지게 됩니다. 1-3 캔버스에 이미지를 그리는 방법 <canvas> 요소를 생성한 이유는 바로 그 위에 무언가를 표시하기 위해서 입니다. 그리고 이때 필요한 것이 캔버스의 컨텍스트(context)입니다. 다시 말해, 우리가 캔버스에 무언가를 그리거나 표시할 때는 캔버스가 아니라 캔버스의 컨텍스트를 이용하는 것입니다. 스케치북으로 비유를 하자면, 스케치북 또는 스케치북 커버는 캔버스에 해당되고 스케치북의 흰 종이는 컨텍스트에 해당됩니다. 스케치북 커버에 그림을 그리지는 않잖아요. 그렇죠? 캔버스의 참조 값.getContext("2d"); 캔버스의 컨텍스트를 얻기 위해서는 위와 같은 스크립트를 사용합니다. 그렇다면 위에서 말한 캔버스의 참조 값은 어떻게 얻을 수 있을까요? HTML에서 <canvas> 요소를 생성했을 때, 캔버스의 참조 값 얻기 HTML의 내부에서 직접 <canvas> 요소를 생성했을 때 id를 함께 사용했던 것을 기억할 겁니 다. 바로 이 id를 사용하여 자바스크립트 코드 내에서 해당 캔버스의 참조 값을 얻을 수 있습 니다. 이때 사용하는 메소드는 다음과 같습니다. document.getelementbyid("원하는 요소의 id"); HTML 내부에서 사용한 id를 이용하면 어떤 요소라도 참조 값을 얻을 수 있습니다. 이렇게 캔 버스의 참조 값을 얻었다면 해당 캔버스의 컨텍스트를 얻는 것은 식은 죽 먹기보다도 쉽겠지요. 1-3 캔버스에 이미지를 그리는 방법 27

28 코드 1-7 getelementbyid 메소드를 사용하여 캔버스의 참조 값 얻기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>캔버스의 참조 값 얻기</title> 6. </head> 7. <body> 8. <div id="canvascontainer"> 9. <canvas id="mycanvas" width="200" height="200" style="border: 1px dashed #ff255f;"></canvas> 10. </div> <script> 13. var mycanvas = document.getelementbyid("mycanvas"); 14. </script> 15. </body> 16. </html> 샘플코드 ch1_dancing_flower/sample/getting_context.html 위 코드는 <canvas> 요소의 id인 mycanvas 를 사용하여 캔버스 객체의 참조 값을 얻고 이를 변수 mycanvas에 저장하도록 구현하고 있습니다 <canvas> 요소를 동적으로 생성했을 때, 캔버스의 참조 값 얻기 동적으로 생성된 캔버스는 다른 작업이 필요없이 바로 컨텍스트를 불러올 수 있습니다. 다음 과 같이 말이죠. var mycanvas = document.createelement("canvas"); var mycontext = mycanvas.getcontext("2d"); <canvas> 요소를 생성한 후 이 요소에서 getcontext 메소드를 통해 해당 캔버스의 컨텍스트를 얻을 수 있습니다. 이제 캔버스에 그림을 그리기 위한 모든 준비가 끝났습니다. 바로 캔버스에 그림을 그려 볼까요? 28 PROJECT 1 - 춤추는 꽃

29 1-3-3 drawimage 메소드 컨텍스트.drawImage(image, dx, dy); 컨텍스트.drawImage(image, dx, dy, dw, dh); 컨텍스트.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); 컨텍스트에는 시그니처가 다른 세 종류의 drawimage 메소드가 있고 이를 통해 캔버스 에 이미지를 그릴 수 있습니다. 그리고 [그림 1 4]의 사이트에 방문하면 2D Context에 대한 스펙 문서를 볼 수 있습니다. W3C의 2D Context 스펙 페이지에서 조금만 내려가면 Conformance requirements 절이 있을 겁니다. 그곳에 CanvasRenderingCon text2d 인터페이스를 정의한 IDL이 보일 것이 고, 그 정의 속에는 앞에서 언급한 3종류의 drawimage 메소드가 보일 것입니다. 그림 1 4 W3C의 2D Context 스펙 문서 그림 1 5 drawimage 메소드 1-3 캔버스에 이미지를 그리는 방법 29

30 메소드 이름은 drawimage로 같은데 파라미터의 개수와 구성이 다른 것을 볼 수 있습니다. 이 는 기능의 차이가 존재하기 때문입니다. 지금부터 캔버스에 그림을 그리기 위해서 반드시 알아 야 할 drawimage 메소드에 대해서 자세히 살펴보겠습니다. 컨텍스트.drawImage(image, dx, dy); 이미지(image)를 원하는 캔버스 위치(dx, dy)에 그릴 때 사용합니다. dx dy canvas image 그림 1 6 첫 번째 drawimage 메소드 컨텍스트.drawImage(image, dx, dy, dw, dh); 이미지를 dx와 dy의 위치에 그리는데, 이때 그려지는 이미지의 가로와 세로 크기를 dw와 dh로 설정한다는 의미입니다. 따라서 dw나 dh가 image의 크기보다 작거나 크다면 이미지에는 변형 이 생기게 되지요. dx dy dh image canvas dw 그림 1 7 두 번째 drawimage 메소드 30 PROJECT 1 - 춤추는 꽃

31 컨텍스트. drawimage(image, sx, sy, sw, sh, dx, dy, dw, dh); 파라미터의 수가 굉장히 많지만 알고 보면 매우 간단한 메소드입니다. 주로 소스(source)가 되는 이미지의 일부만 캔버스에 그리려고 할 때 유용하게 사용할 수 있습니다. dy sy image dx sx dh sh dw sw image (source) 그림 1 8 세 번째 drawimage 메소드 canvas 즉 소스 이미지의 일부분을 선택한 후 캔버스의 특정 위치에 원하는 크기로 복사할 수 있다는 의미입니다. 물론 대개 복사된 이미지의 크기를 소스 이미지의 크기와 동일하게 사용하지만, 필요에 따라 그 크기를 변경할 수도 있습니다. 이때에는 당연히 복사한 이미지의 크기엔 변형 이 발생하겠지요. 다음 코드는 이미지를 로드한 후 캔버스의 특정 위치에 이미지를 다시 그리도록 구현한 내용 입니다. 1-3 캔버스에 이미지를 그리는 방법 31

32 코드 1-8 캔버스에 이미지 그리고 변환하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>캔버스에 이미지 그리고 변환하기</title> 6. </head> 7. <body> 8. <script> 9. // canvas 생성 10. var canvascontainer = document.createelement("div"); 11. var mycanvas = document.createelement("canvas"); 12. mycanvas.width = 400; 13. mycanvas.height = 400; 14. mycanvas.style.border = "1px dashed #ff255f"; 15. canvascontainer.appendchild(mycanvas); 16. document.body.appendchild(canvascontainer); // context 획득 19. var canvascontext = mycanvas.getcontext("2d"); // 표시할 이미지 로드 시작 22. var image = document.createelement("img"); 23. image.addeventlistener("load", imageloadhandler, false); 24. image.src = "res/giraffe.png"; // 표시할 이미지 로드 완료 27. function imageloadhandler(event) { 28. drawimageoncontext(); 29. } // canvas(context)에 이미지 표시 32. function drawimageoncontext() { 33. canvascontext.drawimage(image, 0, 0); // (A) 34. canvascontext.drawimage(image, 0, 240, 160, 84); // (C) 35. canvascontext.drawimage(image, 300, 50); // (B) 36. } 37. </script> 38. </body> 39. </html> 샘플코드 ch1_dancing_flower/sample/context_draw.html drawimageoncontext 메소드를 보면 컨텍스트의 drawimage 메소드를 사용한 것을 볼 수 있습 니다. 이 코드에 대한 결과 화면은 [그림 1 9]에 있습니다. 32 PROJECT 1 - 춤추는 꽃

33 A B C 그림 1 9 drawimage 메소드를 사용하여 이미지 출력 B 그림을 보면 캔버스 영역 밖으로는 이미지가 출력되지 않는 것을 볼 수 있습니다. C 또한 소 스 이미지의 크기와 동일하지 않으면 결과 화면의 이미지에 변형이 생기는 것도 확인할 수 있 습니다. drawimage의 시그니처(Method Signature)를 다시 한번 보도록 하겠습니다. void drawimage((htmlimageelement or HTMLCanvasElement or HTMLVideoElement) image, 그림 1-10 drawimage 시그니처 image 파라미터 앞에 3가지 타입(type)이 있는 것을 볼 수 있습니다. 바로 HTMLImageElement, HTMLCanvasElement, HTMLVideoElement입니다. 즉 drawimage의 첫 번째 파라미터인 image에는 위의 3가지 타 입에 속하는 요소라면 어떤 것이든지 사용할 수 있다는 의미입니다. <img> 요소뿐만 아니라 <canvas> 요소나 <video> 요소도 사용할 수 있다는 것은 HTML5의 캔버스가 얼 마나 다양하게 사용될 수 있는지 알 수 있는 중요한 특징이기도 합니다. 이번 프로젝트에서는 첫 번째 파라 미터인 image에 <canvas> 요소를 사용하는 것을 볼 수 있으며 <video> 요소의 사용은 비디오 관련 프로 젝트에서 살펴보도록 하겠습니다. 1-3 캔버스에 이미지를 그리는 방법 33

34 1-4 캔버스에서 이미지를 변환하는 방법 변환이라는 용어를 어렵게 생각하지는 마세요. 변환을 다른 말로 하면 이미지를 회전하거나 크 기를 변경하겠다는 의미입니다. 변환에 대한 일반적인 절차가 있는데 다음과 같은 순서로 작업 을 진행하게 되지요. 이미지 하나가 자신의 중심을 기준으로 회전한다고 생각하며 읽어주세요. ➊ 컨텍스트 상태, 즉 드로잉 상태(drawing states)를 저장합니다. ➋ 변환행렬을 단위행렬로 초기화합니다. ➌ 이미지의 중심으로 컨텍스트의 원점을 이동시킵니다. ➍ 컨텍스트를 원하는 각도만큼 회전합니다. 즉 변환을 실행합니다. ➎ 저장했던 컨텍스트 상태를 복구합니다. 지금부터는 위에서 언급한 각각의 절차에 대해서 자세하게 설명하겠습니다 컨텍스트 상태 저장 컨텍스트에는 상태 정보라는 것이 있습니다. 예를 들어 컨텍스트에 사각형을 그리려고 할 때 (context.fillrect) 사각형을 채우는 색깔을 빨간색으로 설정했다면(context.fillStyle) 이후로 어떠한 사 각형을 그리더라도 그 내부는 빨간색으로 채워집니다. 사각형을 채우는 상태 정보가 빨간색으 로 설정된 것이지요. 만약 녹색으로 사각형을 채우고 싶다면 사각형을 채우는 상태 정보를 녹색 으로 변경해야 합니다. 그러면 그다음부터 그려지는 모든 사각형은 녹색으로 채워지게 되지요. [그림 1 11]에는 4개의 사각형이 그려져 있습 니다. 왼쪽에서 오른쪽 순서대로 사각형을 그 렸다면 사각형을 채우는 상태 정보 를 설정하 는 context.fillstyle 메소드를 세 번 호출한 것 이라 생각할 수 있습니다. 그렇게 해야 마지막 사각형을 빨간색으로 채울 수 있으니까요. (기 본 색은 검정색입니다.) 정말 그렇게 했는지 [그 그림 1 11 컨텍스트의 상태 정보 림 1 11]을 구현하는 코드를 살펴보겠습니다. 34 PROJECT 1 - 춤추는 꽃

35 코드 1-9 컨텍스트의 상태정보 이해하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>컨텍스트 상태정보 이해하기</title> 6. </head> 7. <body> 8. <div id="canvascontainer"> 9. <canvas id="mycanvas" width="250" height="70" style="border: 1px dashed #ff255f;"></canvas> 10. </div> <script> 13. var mycanvas = document.getelementbyid("mycanvas"); 14. var mycontext = mycanvas.getcontext("2d"); // 첫 번째 사각형 17. mycontext.fillstyle = "#ff0000"; 18. mycontext.fillrect(10, 10, 50, 50); // 두 번째 사각형 21. mycontext.fillrect(70, 10, 50, 50); // 세 번째 사각형 24. mycontext.save(); 25. mycontext.fillstyle = "#00ff00"; 26. mycontext.fillrect(130, 10, 50, 50); // 네번째 사각형 29. mycontext.restore(); 30. mycontext.fillrect(190, 10, 50, 50); 31. </script> 32. </body> 33. </html> 샘플코드 ch1_dancing_flower/sample/context_states.html 눈을 아무리 씻고 봐도 색의 정보를 바꾸는 코드 라인은 2줄밖에 되지 않습니다. 그럼 어떻게 된 걸까요? 분명 [그림 1 11]에는 빨간색 사각형에서 녹색 사각형으로 그리고 다시 빨간색 사각 형으로 색의 상태 정보가 변경된 것 같은데 말이죠. 비밀은 24와 29라인에 적혀 있는 context. save 메소드와 context.restore 메소드에 있습니다. 메소드 이름 그대로 컨텍스트의 상태 정보를 저장하고 복원하는 기능을 가진 메소드지요. 만약 이 메소드를 사용하지 않았다면 빨간색 사 각형 2개와 녹색 사각형 2개가 그려질 것입니다. 하지만 위 [코드 1 9]에서는 녹색으로 색 상태 를 바꾸기 전에 빨간색의 색 상태를 24라인에서 저장하고 있습니다. 그리고 나서 녹색 사각형을 1-4 캔버스에서 이미지를 변환하는 방법 35

36 위해 색 상태 정보를 바꾸고 1개의 사각형을 그렸습니다. 마지막 상자를 그릴 때 앞에서 저장했 던 상태 정보를 다시 복원하는 코드가 29라인입니다. 그래서 마지막 상자는 녹색이 아닌 빨간색 으로 채워지게 된 것이고요. 이렇게 컨텍스트의 상태 정보는 저장할 수도 있고 복원도 할 수 있 습니다. 그렇다면 모든 상태 정보를 저장하고 복원할 수 있을까요? 그렇지는 않습니다. 우리가 저장할 수 있는 상태 정보는 아래와 같답니다. 뭐 그렇다고 적은 양은 아닌 것 같습니다. 현재의 변환행렬(The current transformation matrix) 현재의 클리핑 영역(The current clipping region) 아래 속성들에 대한 현재 값(The current values of the following attributes) strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline 중요한 것은 현재의 기본 패스 정보 나 현재의 비트맵 정보 는 상태 정보에 저장되지 않는다는 점입니다. 만약 이것들까지도 상태 정보에 저장이 된다면 애니메이션을 구현하기가 정말 힘들 었을 겁니다. 저장되었던 상태 정보를 다시 복원했을 때 이전에 저장되었던 패스 또는 비트맵 정보가 그대로 복원될 테니까요. 결과적으로 그렇게 된다면 [그림 1 12]와 같이 이미지의 흔적 들이 계속 남아있게 될 겁니다. 상상만 해도 끔찍한 일이네요. 사실 아직까지도 컨텍스트의 상태 정보가 왜 필요하며 어떻게 사용되는지 감이 안 오는 분 이 있을 겁니다. 그런 분들은 백업(backup)이 나 스냅샷(snapshot)을 떠올리면 될 것 같습니 다. 백업이나 스냅샷을 사용하는 가장 큰 이 유는 해당 시점의 상태로 빨리 복원하고 싶어 서 입니다. 이와 같이 컨텍스트의 특정 시점 상태를 있는 그대로 저장해 둘 수 있다면 다 시 그 상태로 돌아가는 것은 속도뿐만 아니라 코드 구현에도 이점이 될 것입니다. 그렇다면 컨텍스트의 특정 시점을 저장하려면 어떻게 하면 될까요? 그림 1 12 컨텍스트 상태에 비트맵 정보가 저장된다고 가정한다면 36 PROJECT 1 - 춤추는 꽃

37 컨텍스트.save(); 컨텍스트의 save 메소드를 사용하면 현재의 컨텍스트 상태 정보를 스택에 저장하게 됩니다. 이 미 앞에서 살펴본 적이 있지요? 컨텍스트.restore(); 그리고 컨텍스트의 restore 메소드를 사용하면 스택에 저장되어 있는 상태 정보를 꺼내와 현 재의 컨텍스트 정보로 사용합니다. 참고로 컨텍스트의 상태 정보에 대한 W3C의 스펙 정의는 에 나와 있습니다. 꼭 찾아가서 살펴보길 바랍니다 변환행렬을 단위행렬로 초기화 우선 내용을 계속 진행하기 전에 단위행렬 이라는 용어에 대해서 설명하고자 합니다. 단 위 가 뜻하는 것은 곱셈에서 1을 사용하는 것 과 비슷한 맥락을 가지고 있습니다. 생각해 보세요. 어떤 수에 1을 곱하면 결과 값은 무 엇일까요? 당연히 1을 곱해도 원래의 값이 바 뀌지는 않습니다. 즉 1은 곱셉이라는 연산의 항등원인 것이죠. 항등원 실수 + 0 실수 1 정사각행렬 + 영행렬 정사각행렬 단위행렬 만약 1이라는 수에 이런저런 연산을 하게 되 면 1은 10이 될 수도 있고 100이 될 수도 있습 그림 1 13 단위행렬은 다른 어떤 행렬과 곱해도 그 대 상을 변하게 하지 않는 행렬 니다. 그러다 처음부터 새롭게 연산을 해야 하는 경우가 생겼다고 가정해 봅시다. 이때 앞에서 변경된 수를 1로 초기화하지 않고 계속 사용한다면 어떻게 될까요? 아마 예상하지 않은 수가 나올 수도 있을 겁니다. 바로 이런 불확실성 때문에 새로운 연산을 시작하는 시점에는 1로 초 기화해야 하는 것이죠. 그런데 우리가 여기서 다루는 것은 실수가 아닌 행렬입니다. 그렇기 때 1-4 캔버스에서 이미지를 변환하는 방법 37

38 문에 초기화를 한다는 것은 단위행렬 을 만든다는 것과 동일한 의미가 되지요. 앞에서 말한 1 로 초기화하는 것처럼 말입니다. 결론적으로, 단위행렬로 초기화한다는 것은 어떠한 행렬과 곱해도 그 값이 변하지 않는 행렬 로 초기화한다는 의미입니다. 그렇게 단위행렬로 초기화를 해야 새롭게 적용하는 변환들이 오 류 없이 올바르게 적용됩니다. 이제 충분히 이해가 가죠? 그럼 단위행렬로 어떻게 초기화하면 될까요? 컨텍스트.transform(a, b, c, d, e, f); 컨텍스트에는 transform 메소드가 존재합니다. 그리고 많은 파라미터가 존재하지요. 이 파라미 터를 행렬로 표현하면 [그림 1 14]와 같게 되는데 값의 순서나 위치를 잘 보기 바랍니다. 그리고 단위행렬은 a와 d의 값이 모두 1이고 b, c, e, f의 값이 모두 0일 때를 말합니다. 즉 행 번호와 열 번호가 같은 위치의 값은 1이고 나머지는 모두 0을 가지는 행렬을 말하는데 [그림 1 15]에 이를 표시했으니 금방 이해할 수 있을 겁니다. a c e b d f 그림 1 14 transform 메소드의 파라미터 위치 그림 1 15 단위행렬 결론적으로, 변환행렬을 단위행렬로 초기화할 때는 아래와 같이 하면 됩니다. 컨텍스트.transform(1, 0, 0, 1, 0, 0); 38 PROJECT 1 - 춤추는 꽃

39 1-4-3 변환하려는 요소의 중심으로 컨텍스트 이동 변환하려면 기본적으로 기준점이 있어야 합니다. 예를 들어 어떤 이미지가 회전한다고 가정합 시다. 그런데 막상 회전하려고 하는데 기준점이 없다면 어떻게 해야 할까요? 어디를 중심으로 회전해야 하는지 막막할 따름입니다. 그래서 회전을 위한 기준점을 정해야 제대로 된 회전을 할 수 있게 되는 것이지요. 자, 다시 우리의 컨텍스트로 돌아와 봅시다. 컨텍스트 위에 이미지 하나를 표시했습니다. 그리 고 이 이미지를 회전하기 위해 컨텍스트에 있는 rotate 메소드를 사용하였습니다. 코드 1-10 컨텍스트의 이동 없이 이미지 회전하기 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>이미지의 회전1</title> 6. </head> 7. <body> 8. <script> 9. // canvas 생성 10. var canvascontainer = document.createelement("div"); 11. var mycanvas = document.createelement("canvas"); 12. mycanvas.width = 300; 13. mycanvas.height = 300; 14. mycanvas.style.border = "1px dashed #ff255f"; 15. canvascontainer.appendchild(mycanvas); 16. document.body.appendchild(canvascontainer); // context 획득 19. var canvascontext = mycanvas.getcontext("2d"); // 표시할 이미지 로드 시작 22. var image = document.createelement("img"); 23. image.addeventlistener("load", imageloadhandler, false); 24. image.src = "res/apple_tree.png"; // 표시할 이미지 로드 완료 27. function imageloadhandler(event) { 28. drawimageoncontext(); 29. } // canvas(context)에 이미지 표시 32. function drawimageoncontext() { 33. canvascontext.save(); 34. canvascontext.transform(1, 0, 0, 1, 0, 0); 35. canvascontext.rotate(45 * Math.PI / 180); 36. canvascontext.drawimage(image, 50, 50); 1-4 캔버스에서 이미지를 변환하는 방법 39

40 37. canvascontext.restore(); 38. } 39. </script> 40. </body> 41. </html> 샘플코드 ch1_dancing_flower/sample/context_transform1.html 위 코드를 실행해 보면 우리가 생각했던 대로 회전이 되지 않습니다. 즉 이미지를 중심으로 45도 회전하지 않고 다음 그림과 같이 브라우저 밖으로 나가버렸습니다. 당황스러울 뿐이지요. 무엇이 문제였을까요? 그 이유를 밝히기 위해서 [그림 1 16]에는 없는, 가상의 좌표들을 표시한 이미지를 하나 더 만들어 봤습니다. [그림 1 17]을 보면 실제로 회전한 것은 캔버스가 아니라 컨텍스트라는 점입니다. 물론 rotate 메 소드가 컨텍스트에 있었기 때문에 당연한 이야기가 아니냐고 반문하는 분도 있을지 모르겠지 만, 대개 이렇게 회전할 때 이미지 자체가 회전한다고 생각하는 분이 더 많습니다. 그러나 결 코 이미지는 회전한 적이 없습니다. 캔버스에서 일어나는 모든 변환은 컨텍스트에서 일어나는 것임을 명심해야 하지요. 이러한 개념을 처음 접하는 분은 굉장히 헷갈릴 수 있으나 알고 보면 너무나도 쉬운 개념입니다. X Y X canvas context 그림 1 16 브라우저 밖으로 회전된 이미지 그림 1 17 컨텍스트 이동 없이 회전 40 PROJECT 1 - 춤추는 꽃

41 그림 1 18 색연필로 그린 물고기와 색종이로 만든 물고기 캔버스의 컨텍스트는 보류 모드(Retained mode)가 아닌 즉시 모드(Immediate mode)로 작동됩니 다. 이건 이렇게 이해하면 될 것 같습니다. [그림 1 18]을 보면 물고기가 보입니다. 한 마리는 색 연필로, 또 한 마리는 색종이로 만들어졌지요. 만약 이 물고기들을 90도 회전시키고 싶다면 어 떻게 하면 될까요? 색종이로 만든 물고기는 그냥 돌려서 자리배치를 다시 해 주면 됩니다. (플 랫폼에서 이미 렌더링하여 객체화시켜 놨습니다.) 하지만 색연필로 그려진 물고기는 어떻게 해 볼 도 리가 없습니다. 그냥 스케치북을 깨끗이 지운 후(이게 가능하다면 말이죠!) 회전한 형태로 다시 그려야 합니다. 이처럼 보류 모드의 렌더링 스타일에서는 조 작이 가능한 완전한 객체가 미리 만들어지게 됩니다. 이를 바탕으로 쉽게 조작이 가능한 것이죠. 아마도 플래시로 콘텐츠를 만들었던 분이라면 익숙한 내용일 것입니다. (플래시는 보류 모드입니다.) 하지만 즉시 모드의 렌더링 스타일에서는 조작 가능한 객체 자체가 없습 니다. 필요할 때마다 새로운 데이터를 사용 하여 그림을 그리는 메소드를 호출해야만 하 지요. 그림 도 회전한 두 종류의 물고기 1-4 캔버스에서 이미지를 변환하는 방법 41

42 다시 [그림 1 17]을 살펴볼까요? 컨텍스트가 회전할 때 어디를 기준점으로 하여 회전하는지 살 펴봐야 합니다. 컨텍스트가 한 번도 이동한 적이 없으니 캔버스의 원점과 동일한 위치를 기준 으로 회전하고 있는 것을 알 수 있습니다. 그렇다면 컨텍스트가 회전하기 전에 컨텍스트의 위 치를 이미지의 중심으로 이동시키면 어떻게 될까요? 코드 1-11 컨텍스트의 이동과 회전 31. // canvas(context)에 이미지 표시 32. function drawimageoncontext() { 33. canvascontext.save(); 34. canvascontext.transform(1, 0, 0, 1, 0, 0); 35. canvascontext.translate(50 + image.width/2, 50 + image.height/2); 36. // canvascontext.scale(2, 2); 37. canvascontext.rotate(45 * Math.PI / 180); 38. canvascontext.drawimage(image, -(image.width/2), -(image.height/2)); 39. canvascontext.restore(); 40. } 샘플코드 ch1_dancing_flower/sample/context_transform2.html 위 코드가 [코드 1 10]과 다른 점은 이미지를 컨텍스트에 그리기 전에 컨텍스트가 이동했다는 것입니다. 35라인을 보면 컨텍스트의 translate 메소드를 사용하여 이미지가 놓이게 될 위치의 중심으로 이동하고 있습니다. 그렇게 이동한 후에야 회전하고 마지막으로 이미지를 컨텍스트 에 그리고 있습니다. 물론 이미지를 컨텍스트에 그릴 때 이전과는 다른 값을 drawimage 메소 드에 사용하고 있고요. (이유는 컨텍스트의 원점이 이미지의 중심으로 바뀌었기 때문입니다.) X (0, 0) (0, 0) Y (0, 0) canvas Y X context 그림 1 20 컨텍스트 이동 후 회전 42 PROJECT 1 - 춤추는 꽃

43 그림을 보면 명확하게 알 수 있지만 컨텍스트의 원점이 이제는 이미지의 중심으로 이동되었습니다. 따라서 회전을 하든 확대 를 하든 이미지의 중심을 기준으로 변환이 이뤄지게 됩니다. 결과적으로 우리가 원하는 형태의 회전이 이뤄지고 있는 것이 죠. 참고로 36라인의 주석을 제거해서 실행해 보면 이미지의 중심을 기준으로 회전과 함께 확대도 될 것입니다 적용하고 싶은 변환의 실행 그림 1 21 컨텍스트 이동 후 회전과 확대를 동시에 진행 앞에서 간단하게 살펴봤지만 컨텍스트의 메소드 중에 변환과 관련된 것은 다음과 같습니다. 컨텍스트.scale(x, y); 컨텍스트.rotate(angle); 컨텍스트.translate(x, y); 컨텍스트.transform(a, b, c, d, e, f); 위 메소드 중 앞의 세 가지는 네 번째의 transform 메소드로 대체가 가능합니다. [그림 1 22]를 보면 행렬의 원소가 각각 어떠한 역할을 수행하는 값인지 알 수 있습니다. 1 0 e 0 1 f 평행이동 context.transform(1, 0, 0, 1, tx, ty); a d a c 0 b d 확대 및 축소 context.transform(sx, 0, 0, sy, 0, 0); 회전 context.transform(cos(angle), -sin(angle), sin(angle), cos(angle), 0, 0); 그림 1 22 행렬의 원소가 수행하는 역할(angle은 라디안) 1-4 캔버스에서 이미지를 변환하는 방법 43

44 또한, rotate 메소드의 파라미터인 angle은 각도가 아닌 라디안을 넣어야 합니다. 각도를 라디안 으로 변환하는 공식은 다음과 같습니다. 라디안 = 각도 π 180 위 공식을 사용하면 원하는 각도를 라디안으로 변경할 수 있습니다. 이를 rotate 메소드의 파 라미터로 사용하면 되고요 저장했던 컨텍스트 상태 복구 저장했던 컨텍스트를 복구하지 않으면 이후에 적용하는 내용이 원하는 모습으로 적용되지 않 을 수 있습니다. 따라서 변환을 마쳤으면 특별한 의도가 없는 한 원래 상태로 복구하는 것이 좋습니다. 컨텍스트.restore(); 복구를 위해서는 위 메소드를 사용하면 됩니다. 앞에서 언급했는데, 기억나죠? 지금까지 캔버스에서 이미지를 변환하는 방법 에 대해 살펴봤습니다. 마지막으로, 앞에서 살펴 본 내용을 복습하는 차원으로 간단한 샘플코드 하나를 살펴보겠습니다. 코드 1-12 컨텍스트를 사용하여 이미지를 그리고 변환하기 (종합) 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>이미지의 변환 - 종합</title> 6. </head> 7. <body> 8. <script> 9. // canvas 생성 10. var canvascontainer = document.createelement("div"); 11. var mycanvas = document.createelement("canvas"); 12. mycanvas.width = 400; 13. mycanvas.height = 400; 14. mycanvas.style.border = "1px dashed #ff255f"; 44 PROJECT 1 - 춤추는 꽃

45 15. canvascontainer.appendchild(mycanvas); 16. document.body.appendchild(canvascontainer); // context 획득 19. var canvascontext = mycanvas.getcontext("2d"); // 표시할 이미지 로드 시작 22. var image = document.createelement("img"); 23. image.addeventlistener("load", imageloadhandler, false); 24. image.src = "res/apple_tree.png"; // 표시할 이미지 로드 완료 27. function imageloadhandler(event) { 28. drawimageoncontext(); 29. } // canvas(context)에 이미지 표시 32. function drawimageoncontext() { 33. // 빨간색 채우기 상태 정보 설정 34. canvascontext.fillstyle = "#ff0000"; // 이미지 표시하기 37. canvascontext.drawimage(image, 0, 0); // A 38. canvascontext.drawimage(image, 0, 260, 160, 84); // B 39. canvascontext.drawimage(image, 340, 50); // C // 현재의 컨텍스트 상태 정보 저장 42. canvascontext.save(); // 컨텍스트의 변환행렬 초기화 45. canvascontext.transform(1, 0, 0, 1, 0, 0); // 컨텍스트의 이동(이미지 중심으로) 48. canvascontext.translate(150 + image.width/2, image.height/2); // 새로운 컨텍스트 기준점으로 회전 51. canvascontext.rotate(45 * Math.PI / 180); // 이동된 컨텍스트에 이미지 표시하기 54. canvascontext.drawimage(image, -(image.width/2), -(image.height/2)); // D // 파란색 채우기 상태 정보 설정 및 사각형 그리기 57. canvascontext.fillstyle = "#0000ff"; 58. canvascontext.fillrect(0, 0, 50, 50); // E // 스택에 저장되어 있던 컨텍스트 상태 복원 61. canvascontext.restore(); // (복원된) 빨간색 컨텍스트 상태 정보로 사각형 그리기 64. // 그리기 기준점은 복원된 컨텍스트의 원점 (최초 원점) 65. canvascontext.fillrect(100, 0, 50, 50); // F 66. } 67. </script> 68. </body> 69. </html> 샘플코드 ch1_dancing_flower/sample/context_transform3.html 1-4 캔버스에서 이미지를 변환하는 방법 45

46 [코드 1 12]를 실행하면 다음과 같은 화면이 출력됩니다. (0, 0) X F Y A D C (0, 0) B Y E X 그림 1 23 이미지의 변환 (실제 결과 화면에 설명을 위한 좌표 표시) 예상했던 대로 이미지가 출력되었나요? 37, 38, 39라인에서 그리는 이미지는 [그림 1 23]의 A, B, C와 동일합니다. 이때는 아직 컨텍스트가 이동하지 않았기 때문에 이미지가 표시되는 기준 점이 캔버스의 원점과 동일합니다. 그림에 표시한 검은색의 좌표가 캔버스의 좌표이기도 하며 이동하기 전의 컨텍스트 좌표이기도 합니다. 코드 48라인에서는 드디어 컨텍스트를 이동합니 다. 이때 D 이미지가 놓이는 위치의 중앙으로 컨텍스트의 원점이 이동하게 되지요. 그리고 51 라인에서 회전도 수행하게 됩니다. 그림에 표시한 하늘색 좌표는 이와 같은 컨텍스트의 이동 과 회전 후에 가지게 되는 원점이 되지요. 이제 이미지를 표시하면 D처럼 컨텍스트에 그려지게 됩니다. 마지막으로 확인할 것은 빨간색과 파란색 사각형의 위치입니다. 58과 65라인에서 이 사각형들을 만들고 있는데 58라인에서 만든 사각형의 경우 그 위치가 캔버스의 원점이 아닌 이동된 컨텍스트의 원점을 기준으로 하고 있는 것을 알 수 있습니다. 46 PROJECT 1 - 춤추는 꽃

47 1-5 캔버스에서 애니메이션 루프를 수행하는 방법 우리가 TV에서 보는 애니메이션은 초당 25장에서 많게는 60장 정도의 이미지가 연속적으로 보 이는 것입니다. 캔버스에서의 애니메이션도 TV 애니메이션과 다르지 않습니다. 프레임에 해당 하는 이벤트 틱이 발생할 때마다 이미지나 데이터를 갱신하는 작업에 의해 애니메이션이 수행 될 뿐이지요. 1Frame 2Frame 3Frame 4Frame 5Frame 6Frame 7Frame 8Frame 그림 1 24 애니메이션은 이미지의 연속 재생 일반적인 방법: 타이머 사용 일반적으로 브라우저에서 애니메이션을 수행할 때는 초당 60프레임(1/60초) 정도의 속도로 화면 을 재생시킵니다. 그렇다면 초당 60번의 이벤트가 발생해야 하는데 이를 어떻게 하면 작동시킬 수 있을까요? 바로 아래의 메소드를 통해 이러한 기능을 구현할 수 있습니다. window.setinterval(실행할 함수, 간격 시간); 자바스크립트를 겪어본 분이라면 너무나 익숙한 메소드일 것입니다. 즉 두 번째 파라미터에 설 정한 시간 간격으로 첫 번째 파라미터에 설정한 함수가 실행되는 메소드지요. 코드 1-13 타이머를 이용한 이벤트 틱 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>특정 시간 간격으로 이벤트 발생시키기</title> 6. </head> 7. <body> 8. <script> 9. window.setinterval(function(event) { 1-5 캔버스에서 애니메이션 루프를 수행하는 방법 47

48 10. console.log("초당 60번, 이벤트 틱이 발생!"); 11. }, 1000/60); 12. </script> 13. </body> 14. </html> 샘플코드 ch1_dancing_flower/sample/animation_tick.html 위 코드는 초당 60번의 이벤트 틱을 발생시키며 그때마다 콘솔 창에 주어진 문구를 출력하게 됩니다 새로운 방법: requestanimationframe 메소드 사용 타이머를 이용한 애니메이션과 비교했을 때 더 효율적인 방법이 등장했습니다. 이전에는 브라 우저의 다른 탭에서 재생되던 애니메이션이 시야에서 사라지더라도 계속 재생되는 문제가 있 었습니다. 보고 있지도 않은데 CPU의 자원을 계속 사용한다는 것은 그렇게 바람직스러운 현 상이 아니죠. 하지만 이번에 새롭게 등장한 requestanimationframe 메소드를 사용하면 이런 현상은 더 이상 발생하지 않습니다. 또한 이 메소드는 초당 60프레임을 목표로 하므로 FPS에 대한 설정을 코드 에 명시할 필요가 없어졌습니다. 코드 1-14 requestanimationframe 메소드를 이용한 이벤트 틱 1. window.renderanimationframe = (function() { 2. return window.requestanimationframe 3. window.webkitrequestanimationframe 4. window.mozrequestanimationframe 5. function(callback) { 6. window.settimeout(callback, 1000/60); 7. }; 8. })(); 위 코드는 블로깅되어 있는 내 용인데(메소드명을 변경했습니다), 다양한 코드에서 이 내용을 발견할 수 있고 또 논리적으로도 좋은 코드라 판단하여 이 책 전반에서 많이 사용하였습니다. 48 PROJECT 1 - 춤추는 꽃

49 위 코드에서는 (function() { })(); 형태를 띠는 즉시 실행함수를 사용하였는데, 이 름에서 유추할 수 있듯이 즉시 실행함수는 인터프리터에 의해 해석되자마자 실행됩니다. 여기 서는 return 문 이하의 내용 중 참인 것을 만나면 바로 반환하여 그 값을 변수에 저장하게 되 는데 그 반환 값이 바로 함수입니다. 즉 앞에서 언급한 requestanimationframe 메소드가 반환 되는 것이죠. 아직 이 메소드는 모든 브라우저에서 지원하지 않습니다. 따라서 prefix를 사용하여 코드를 작 성해야 하는 불편함은 존재합니다. 그리고 오페라 브라우저에서는 아직까지 지원 자체를 하지 않기 때문에 위 코드에도 오페라에 대한 prefix는 사용하지 않은 것입니다. 대신 settimeout을 사용한 polyfill로 대체하고 있습니다. (MS의 prefix를 사용하지 않은 이유는 지원하지 않아서가 아니 라, 이미 표준 메소드를 지원하고 있기 때문입니다.) 지원 여부에 대한 자세한 내용은 caniuse.com을 참조하면 됩니다. 또한 [코드 1 15]에는 이 메소드가 어떻게 사용되었는지 확인해 볼 수 있는 코드가 적혀있습니다. 그림 1 25 requestanimationframe 지원 여부 캔버스에서 애니메이션 루프를 수행하는 방법 49

50 코드 1-15 requestanimationframe 메소드 1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"> 5. <title>requestanimationframe을 사용한 애니메이션</title> 6. </head> 7. <body> 8. <script> 9. window.renderanimationframe = (function() { 10. return window.requestanimationframe 11. window.webkitrequestanimationframe 12. window.mozrequestanimationframe 13. function(callback) { 14. window.settimeout(callback, 1000/60); 15. }; 16. })(); function update() { 19. console.log("requestanimationframe 메소드를 활용한 애니메이션"); 20. } function loopanimationframe() { 23. update(); 24. window.renderanimationframe(loopanimationframe); 25. } loopanimationframe(); 28. </script> 29. </body> 30. </html> 샘플코드 ch1_dancing_flower/sample/requestanimationframe.html 24라인을 보세요. requestanimationframe 메소드의 파라미터로 자신이 속한 부모 메소드를 사용하고 있습니다. 즉 재귀호출의 형태를 띠고 있지요. 이게 핵심입니다. 물론 재귀호출을 하 는 메소드 내에 연속적으로 호출하고 싶은 실제 메소드를 집어넣은 것도 잊지 마세요. 위 예제 의 경우엔 update 메소드가 프레임마다 호출됩니다. 이곳에 화면 갱신이 되는 실제 스크립트를 적어 넣으면 되겠지요. 기본적인 이론학습을 모두 마쳤습니다. 어떤가요? 생각보다 어렵다고 여겼던 분은 실전학습으 로 이동하기 전에 다시 한번 확인하여 꼭 자기 것으로 소화하길 바랍니다. 50 PROJECT 1 - 춤추는 꽃

SIGIL 완벽입문

SIGIL 완벽입문 누구나 만드는 전자책 SIGIL 을 이용해 전자책을 만들기 EPUB 전자책이 가지는 단점 EPUB이라는 포맷과 제일 많이 비교되는 포맷은 PDF라는 포맷 입니다. EPUB이 나오기 전까지 전 세계에서 가장 많이 사용되던 전자책 포맷이고, 아직도 많이 사 용되기 때문이기도 한며, 또한 PDF는 종이책 출력을 위해서도 사용되기 때문에 종이책 VS

More information

HTML5 웹 콘텐츠 제작_ indd

HTML5 웹 콘텐츠 제작_ indd 찾아보기 ㄱ 강체 77, 79, 83 개발자도구 54 검색 API 97, 108 고정물 (fixture) 77 광각렌즈 248, 263 구글 CDN 페이지 223, 224 그림영역 (Drawing Surface) 247 ㄴ 내부 IP 329, 334 ㄷ 단위행렬 37, 256 단일 var 패턴 (single var pattern) 56 데몬 293 두들 9

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

SBR-100S User Manual

SBR-100S User Manual ( 1 / 13 ) SBR-100S 모델에 대한 사용자 펌웨어 업그레이드 방법을 안내해 드립니다. SBR-100S 는 신규 펌웨어가 있을시 FOTA(자동업데이트) 기능을 통하여 자동 업그레이드가 되며, 필요시 사용자가 신규 펌웨어를 다운받아 수동으로 업그레이드 할 수 있습니다. 1. 준비하기 1.1 연결 장치 준비 펌웨어 업그레이드를 위해서는 SBR-100S

More information

Windows 8에서 BioStar 1 설치하기

Windows 8에서 BioStar 1 설치하기 / 콘텐츠 테이블... PC에 BioStar 1 설치 방법... Microsoft SQL Server 2012 Express 설치하기... Running SQL 2012 Express Studio... DBSetup.exe 설정하기... BioStar 서버와 클라이언트 시작하기... 1 1 2 2 6 7 1/11 BioStar 1, Windows 8 BioStar

More information

Web Scraper in 30 Minutes 강철

Web Scraper in 30 Minutes 강철 Web Scraper in 30 Minutes 강철 발표자 소개 KAIST 전산학과 2015년부터 G사에서 일합니다. 에서 대한민국 정치의 모든 것을 개발하고 있습니다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 목표 웹 스크래퍼를 프레임웍 없이 처음부터 작성해 본다. 스크래퍼/크롤러의 작동 원리를 이해한다. 목표

More information

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

Microsoft Word - windows server 2003 수동설치_non pro support_.doc Windows Server 2003 수동 설치 가이드 INDEX 운영체제 설치 준비과정 1 드라이버를 위한 플로피 디스크 작성 2 드라이버를 위한 USB 메모리 작성 7 운영체제 설치 과정 14 Boot Sequence 변경 14 컨트롤러 드라이버 수동 설치 15 운영체제 설치 17 운영체제 설치 준비 과정 Windows Server 2003 에는 기본적으로

More information

ActFax 4.31 Local Privilege Escalation Exploit

ActFax 4.31 Local Privilege Escalation Exploit NSHC 2013. 05. 23 악성코드 분석 보고서 [ Ransomware 악성코드 ] 사용자의 컴퓨터를 강제로 잠그고 돈을 요구하는 형태의 공격이 기승을 부리고 있 습니다. 이러한 형태의 공격에 이용되는 악성코드는 Ransomware로 불리는 악성코 드 입니다. 한번 감염 시 치료절차가 복잡하며, 보고서 작성 시점을 기준으로 지속 적인 피해자가 발생되고

More information

정부3.0 국민디자인단 운영을 통해 국민과의 소통과 참여로 정책을 함께 만들 수 있었고 그 결과 국민 눈높이에 맞는 다양한 정책 개선안을 도출하며 정책의 완성도를 제고할 수 있었습니다. 또한 서비스디자인 방법론을 각 기관별 정부3.0 과제에 적용하여 국민 관점의 서비스 설계, 정책고객 확대 등 공직사회에 큰 반향을 유도하여 공무원의 일하는 방식을 변화시키고

More information

PathEye 공식 블로그 다운로드 받으세요!! 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다.

PathEye 공식 블로그 다운로드 받으세요!!   지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다. PathEye Mobile Ver. 0.71b 2009. 3. 17 By PathEye 공식 블로그 다운로드 받으세요!! http://blog.patheye.com 지속적으로 업그래이드 됩니다. 여러분의 의견을 주시면 개발에 반영하겠 습니다. PathEye 설치 1/3 최종 배포 버전을 다 운로드 받습니다. 다운로드된 파일은 CAB 파일입니다. CAB 파일에는

More information

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상

아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상 Android 용 Brother Image Viewer 설명서 버전 0 KOR 아이콘의 정의 본 사용자 설명서에서는 다음 아이콘을 사용합니다. 참고 참고는 발생할 수 있는 상황에 대처하는 방법을 알려 주거나 다른 기능과 함께 작동하는 방법에 대한 요령을 제공합니다. 상표 Brother 로고는 Brother Industries, Ltd.의 등록 상표입니다. Android는

More information

View Licenses and Services (customer)

View Licenses and Services (customer) 빠른 빠른 시작: 시작: 라이선스, 라이선스, 서비스 서비스 및 주문 주문 이력 이력 보기 보기 고객 가이드 Microsoft 비즈니스 센터의 라이선스, 서비스 및 혜택 섹션을 통해 라이선스, 온라인 서비스, 구매 기록 (주문 기록)을 볼 수 있습니다. 시작하려면, 비즈니스 센터에 로그인하여 상단 메뉴에서 재고를 선택한 후 내 재고 관리를 선택하십시오. 목차

More information

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

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

More information

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

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

More information

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx

Microsoft PowerPoint - chap02-C프로그램시작하기.pptx #include int main(void) { int num; printf( Please enter an integer "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 을 작성하면서 C 프로그램의

More information

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가

지도상 유의점 m 학생들이 어려워하는 낱말이 있으므로 자세히 설명해주도록 한다. m 버튼을 무리하게 조작하면 고장이 날 위험이 있으므로 수업 시작 부분에서 주의를 준다. m 활동지를 보고 어려워하는 학생에게는 영상자료를 접속하도록 안내한다. 평가 평가 유형 자기 평가 수업주제 경찰 출동! (버튼, LED, 버저 사용하기) 9 / 12 차시 수업의 주제와 목표 본 수업에서는 이전 차시에 배웠던 블록들의 기능을 복합적으로 활용한다. 스위치 기능을 가진 버튼을 활용하여 LED와 버저를 동시에 작동시키도록 한다. 각 블록들을 함께 사용하는 프로젝트를 통해 각각의 기능을 익히고 보다 다양한 활용 방법을 구상할 수 있다. 교수 학습

More information

1

1 1 2 3 4 5 6 b b t P A S M T U s 7 m P P 8 t P A S M T U s 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Chapter 1 29 1 2 3 4 18 17 16 15 5 6 7 8 9 14 13 12 11 10 1 2 3 4 5 9 10 11 12 13 14 15

More information

RHEV 2.2 인증서 만료 확인 및 갱신

RHEV 2.2 인증서 만료 확인 및 갱신 2018/09/28 03:56 1/2 목차... 1 인증서 확인... 1 인증서 종류와 확인... 4 RHEVM CA... 5 FQDN 개인 인증서... 5 레드햇 인증서 - 코드 서명 인증서... 6 호스트 인증... 7 참고사항... 8 관련링크... 8 AllThatLinux! - http://allthatlinux.com/dokuwiki/ rhev_2.2_

More information

회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제

회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제 회원번호 대표자 공동자 KR000****1 권 * 영 KR000****1 박 * 순 KR000****1 박 * 애 이 * 홍 KR000****2 김 * 근 하 * 희 KR000****2 박 * 순 KR000****3 최 * 정 KR000****4 박 * 희 조 * 제 KR000****4 설 * 환 KR000****4 송 * 애 김 * 수 KR000****4

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

wtu05_ÃÖÁ¾

wtu05_ÃÖÁ¾ 한 눈에 보는 이달의 주요 글로벌 IT 트렌드 IDG World Tech Update May C o n t e n t s Cover Story 아이패드, 태블릿 컴퓨팅 시대를 열다 Monthly News Brief 이달의 주요 글로벌 IT 뉴스 IDG Insight 개발자 관점에서 본 윈도우 폰 7 vs. 아이폰 클라우드 컴퓨팅, 불만 검증 단계 돌입 기업의

More information

»êÇÐ-150È£

»êÇÐ-150È£ Korea Sanhak Foundation News VOL. 150 * 2011. 12. 30 논단 이슈별 CSR 활동이 기업 충성도에 미치는 영향 : 국가별 및 산업별 비교분석 최 지 호 전남대 경영학부 교수 Ⅰ. 서론 Ⅰ. 서론 Ⅱ. 문헌 고찰 및 가설 개발 2. 1. 호혜성의 원리에 기초한 기업의 사회적 투자에 대한 소

More information

178È£pdf

178È£pdf 스승님이 스승님이 스승님이 말씀하시기를 말씀하시기를 말씀하시기를 알라는 위대하다! 위대하다! 알라는 알라는 위대하다! 특집 특집 기사 특집 기사 세계 세계 평화와 행복한 새해 경축 세계 평화와 평화와 행복한 행복한 새해 새해 경축 경축 특별 보도 특별 특별 보도 스승님과의 선이-축복의 선이-축복의 도가니! 도가니! 스승님과의 스승님과의 선이-축복의 도가니!

More information

새로운 지점에서 단이 시작하는 경우 기둥코로 시작하라고 표시합니다. 기둥코(standing stitch)로 시작하는 방법은 YouTube 에서 찾아볼 수 있습니다. 특수 용어 팝콘뜨기: 1 코에 한길긴뜨기 5 코, 바늘을 빼고 첫번째 한길긴뜨기코의 앞에서 바늘을 넣은

새로운 지점에서 단이 시작하는 경우 기둥코로 시작하라고 표시합니다. 기둥코(standing stitch)로 시작하는 방법은 YouTube 에서 찾아볼 수 있습니다. 특수 용어 팝콘뜨기: 1 코에 한길긴뜨기 5 코, 바늘을 빼고 첫번째 한길긴뜨기코의 앞에서 바늘을 넣은 Desire Copyright: Helen Shrimpton, 2016. All rights reserved. By: Helen at www.crystalsandcrochet.com 12 인치 모티브 worsted/aran(10ply), 5mm 바늘 사용 약 10인치 Double Knitting(8ply), 4mm 바늘 사용 미국식 용어를 사용합니다. 약어

More information

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기 소규모 비즈니스를 위한 YouTube 플레이북 YouTube에서 호소력 있는 동영상으로 고객과 소통하기 소규모 비즈니스를 위한 플레이북 여기서 다룰 내용은 다음과 같습니다. 1. YouTube 소개 2. YouTube에서 비즈니스를 위한 채널 만들기 3. 눈길을 끄는 동영상 만들기 4. 고객의 액션 유도하기 5. 비즈니스에 중요한 잠재고객에게 더 많이 도달하기

More information

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집

Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와 디바이스에 관계 없이 언제, 어디서나 문서를 확인하고 편집 Modern Modern www.office.com ( ) 892 5 : 1577-9700 : http://www.microsoft.com/korea Microsoft 을 열면 깔끔한 사용자 중심의 메뉴 및 레이아웃이 제일 먼저 눈에 띕니다. 또한 은 스마트폰, 테블릿 및 클라우드는 물론 가 설치되어 있지 않은 PC 에서도 사용할 수 있습니다. 따라서 장소와

More information

¿©¼ºÀαÇ24È£

¿©¼ºÀαÇ24È£ Contents ㅣ반딧불이ㅣ뒤엉켜 버린 삶, 세월이 흘러도 풀 수 없는.. 실타래 벌써 3년째 시간은 흘러가고 있네요. 저는 서울에서 엄마의 갑작스런 죽음 때문에 가족들과 제주로 내려오게 되었답 니다. 몸과 마음이 지쳐있었고 우울증에 시달리며, 엄마의 죽음을 잊으려고 하였습 니다. 그러다 여기서 고향 분들을 만나게 되었고 그 분들의

More information

Microsoft PowerPoint - chap01-C언어개요.pptx

Microsoft PowerPoint - chap01-C언어개요.pptx #include int main(void) { int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); return 0; } 1 학습목표 프로그래밍의 기본 개념을

More information

<B3EDB9AEC0DBBCBAB9FD2E687770>

<B3EDB9AEC0DBBCBAB9FD2E687770> (1) 주제 의식의 원칙 논문은 주제 의식이 잘 드러나야 한다. 주제 의식은 논문을 쓰는 사람의 의도나 글의 목적 과 밀접한 관련이 있다. (2) 협력의 원칙 독자는 필자를 이해하려고 마음먹은 사람이다. 따라서 필자는 독자가 이해할 수 있는 말이 나 표현을 사용하여 독자의 노력에 협력해야 한다는 것이다. (3) 논리적 엄격성의 원칙 감정이나 독단적인 선언이

More information

HTML5-³¹Àå¿ë.PDF

HTML5-³¹Àå¿ë.PDF CHAPTER 2 Canvas 요소로그림그리기 HTML5 의 Canvas 요소는많은사람들이주목하고있는기능중하나로서그래픽을화면에표시할때사용된다 HTML5에서 Canvas 요소의생성은아래처럼아주간단하다 이코드가 Canvas 요소를생성하는데필요한전부이다 그렇다면이요소안에그림을그려넣기위해서는어떻게해야할까?

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 HTML5 웹프로그래밍입문 11 장. 캔버스 목차 11.1 캔버스이해하기 11.2 캔버스기본 API 사용하기 11.3 캔버스고급기능사용하기 2 11.1 캔버스이해하기 11.1.1 캔버스의특징 11.1.2 캔버스시작하기 3 HTML5 캔버스 자바스크립트를이용해서웹문서상에그림그리는기능 HTML5 이전 직접이미지파일을 태그를이용해서문서상에포함 자바애플릿이용

More information

내지-교회에관한교리

내지-교회에관한교리 내지-교회에관한교리 2011.10.27 7:34 PM 페이지429 100 2400DPI 175LPI C M Y K 제 31 거룩한 여인 32 다시 태어났습니까? 33 교회에 관한 교리 목 저자 면수 가격 James W. Knox 60 1000 H.E.M. 32 1000 James W. Knox 432 15000 가격이 1000원인 도서는 사육판 사이즈이며 무료로

More information

**09콘텐츠산업백서_1 2

**09콘텐츠산업백서_1 2 2009 2 0 0 9 M I N I S T R Y O F C U L T U R E, S P O R T S A N D T O U R I S M 2009 M I N I S T R Y O F C U L T U R E, S P O R T S A N D T O U R I S M 2009 발간사 현재 우리 콘텐츠산업은 첨단 매체의 등장과 신기술의 개발, 미디어 환경의

More information

750 1,500 35

750 1,500 35 data@opensurvey.co.kr 750 1,500 35 Contents Part 1. Part 2. 1. 2. 3. , 1.,, 2. skip 1 ( ) : 2 ( ) : 10~40 (, PC, ) 1 : 70 2 : 560 1 : 2015. 8. 25~26 2 : 2015. 9. 1 4 10~40 (, PC, ) 500 50.0 50.0 14.3 28.6

More information

152*220

152*220 152*220 2011.2.16 5:53 PM ` 3 여는 글 교육주체들을 위한 교육 교양지 신경림 잠시 휴간했던 우리교육 을 비록 계간으로이지만 다시 내게 되었다는 소식을 들으니 우 선 반갑다. 하지만 월간으로 계속할 수 없다는 현실이 못내 아쉽다. 솔직히 나는 우리교 육 의 부지런한 독자는 못 되었다. 하지만 비록 어깨너머로 읽으면서도 이런 잡지는 우 리

More information

E20023804(2005).hwp

E20023804(2005).hwp - 1 - - 2 - - 3 - - 4 - - 5 - - 6 - - 7 - - 8 - - 9 - - 10 - - 11 - - 12 - - 13 - - 14 - - 15 - - 16 - - 17 - - 18 - - 19 - - 20 - - 21 - - 22 - - 23 - - 24 - - 25 - - 26 - - 27 - 100 기초선 중재(마인드 맵핑 프로그램을

More information

특징 찾아보기 열쇠 없이 문을 열 수 있어요! 비밀번호 및 RF카드로도 문을 열 수 있습니다. 또한 비밀번호가 외부인에게 알려질 위험에 대비, 통제번호까지 입력해 둘 수 있어 더욱 안심하고 사용할 수 있습니다. 나만의 비밀번호 및 RF카드를 가질 수 있어요! 다수의 가

특징 찾아보기 열쇠 없이 문을 열 수 있어요! 비밀번호 및 RF카드로도 문을 열 수 있습니다. 또한 비밀번호가 외부인에게 알려질 위험에 대비, 통제번호까지 입력해 둘 수 있어 더욱 안심하고 사용할 수 있습니다. 나만의 비밀번호 및 RF카드를 가질 수 있어요! 다수의 가 www.kdnetwork.com 특징 찾아보기 열쇠 없이 문을 열 수 있어요! 비밀번호 및 RF카드로도 문을 열 수 있습니다. 또한 비밀번호가 외부인에게 알려질 위험에 대비, 통제번호까지 입력해 둘 수 있어 더욱 안심하고 사용할 수 있습니다. 나만의 비밀번호 및 RF카드를 가질 수 있어요! 다수의 가능할 삭제할 건전지 사용자를 위한 개별 비밀번호 및 RF카드

More information

CT083001C

CT083001C 발행인 : 송재룡 / 편집장 : 박혜영 / 편집부장 : 송영은 경희대학교 대학원보사 1986년 2월 3일 창간 02447 서울특별시 동대문구 경희대로 26 전화(02)961-0139 팩스(02)966-0902 2016. 09. 01(목요일) vol. 216 www.khugnews.co.kr The Graduate School News 인터뷰 안창모 경기대학교

More information

Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오.

Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오. Structure and Interpretation of Computer Programs: Assignment 3 Seung-Hoon Na October 4, 2018 1 George (아래 3개의 문제에 대한 구현이 모두 포함된 george.rkt파일을 제출하시오. 실행후 Problem 1.3에 대한 Display결과가 나와야 함) George 그림은 다음과

More information

H3250_Wi-Fi_E.book

H3250_Wi-Fi_E.book 무선 LAN 기능으로 할 수 있는 것 2 무선 LAN 기능으로 할 수 있는 것 z q l D w 3 Wi-Fi 기능 플로우차트 z q l D 4 Wi-Fi 기능 플로우차트 w 5 본 사용 설명서의 기호 설명 6 각 장별 목차 1 2 3 4 5 6 7 8 9 10 11 12 13 14 7 목차 1 2 3 4 8 목차 5 6 7 8 9 9 목차 10 11 12

More information

어린이 비만예방 동화 연극놀이 글 김은재 그림 이 석

어린이 비만예방 동화 연극놀이 글 김은재 그림 이 석 캥거루는 껑충껑충 뛰지를 못하고, 여우는 신경질이 많아졌어요. 동물 친구들이 모두 모두 이상해졌어요. 대체 무슨 일이 일어난 걸까요? 멧돼지네 가게와 무슨 관계가 있는 걸까요? 염소 의사 선생님은 상수리나무 숲으로 가면 병을 고칠 수 있다고 했답니다. 상수리나무 숲에는 어떤 비법이 숨겨져 있는 지 우리 함께 숲으로 가볼까요? 이 동화책은 보건복지부의 국민건강증진기금으로

More information

Vector Differential: 벡터 미분 Yonghee Lee October 17, 벡터미분의 표기 스칼라미분 벡터미분(Vector diffrential) 또는 행렬미분(Matrix differential)은 벡터와 행렬의 미분식에 대 한 표

Vector Differential: 벡터 미분 Yonghee Lee October 17, 벡터미분의 표기 스칼라미분 벡터미분(Vector diffrential) 또는 행렬미분(Matrix differential)은 벡터와 행렬의 미분식에 대 한 표 Vector Differential: 벡터 미분 Yonhee Lee October 7, 08 벡터미분의 표기 스칼라미분 벡터미분(Vector diffrential) 또는 행렬미분(Matrix differential)은 벡터와 행렬의 미분식에 대 한 표기법을 정의하는 방법이다 보통 스칼라(scalar)에 대한 미분은 일분수 함수 f : < < 또는 다변수 함수(function

More information

WebGL 레슨 3 - 회전 운동

WebGL 레슨 3 - 회전 운동 Created by Firejune at 2011/04/20, Last modified 2016/09/11 WebGL 레슨 3 - 회전 운동 세 번째 WebGL 레슨에 오신 것을 환영합니다. 레슨 2에 이어 이번 레슨에서는 객체가 회전 운동을 할 수 있도록 합니다. 이번 학습은 NeHe OpenGL의 네 번째 튜토리얼을 바탕으로 합니다. 다음 동영상은 이번

More information

PowerPoint Template

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

More information

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 :

HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : HLS(HTTP Live Streaming) 이용가이드 1. HLS 소개 Apple iphone, ipad, ipod의운영체제인 ios에서사용하는표준 HTTP 기반스트리밍프로토콜입니다. 2. HLS 지원대상 - 디바이스 : iphone/ipad/ipod - 운영체제 : ios 3.0 이상 - 콘텐츠형식 : MP4 (H264,AAC ), MP3 * 디바이스별해상도,

More information

2014학년도 수시 면접 문항

2014학년도 수시 면접 문항 안 경 광 학 과 세부내용 - 남을 도와 준 경험과 보람에 대해 말해 보세요. - 공부 외에 다른 일을 정성을 다해 꾸준하게 해본 경험이 있다면 말해 주세요. - 남과 다른 자신의 장점과 단점은 무엇인지 말해 주세요. - 지금까지 가장 고민스러웠던 또는 어려웠던 일과 이를 어떻게 해결하였는지? - 자신의 멘토(조언자) 또는 좌우명이 있다면 소개해 주시길 바랍니다.

More information

CSG_keynote_KO copy.key

CSG_keynote_KO copy.key 101. 3 Shutterstock 4 Shutterstock 5 Shutterstock? 6? 10 What To Create 10 Ways to Find Trends and Inspiration 12 15 17 :. 21 24 Shutterstock 26 29 -. 31 Shutterstock : 36 " " 37! 39 41 45 46 47 49 Copyright

More information

<C3CA36B0FAC7D020B1B3BBE7BFEB2E687770>

<C3CA36B0FAC7D020B1B3BBE7BFEB2E687770> 1. 한반도는 지진의 안전지대인가? 59 2. 일기 예보관이 되어서 69 3. 코일 나침반 79 4. 미니 전동기 만들기 93 5. 달걀을 먹는 세제 105 6. 재미있는 소다의 세계 117 7. 롱다리 프로젝트 127 8. 느낌으로 말해요 139 9. 침의 마술 152 1. 춤추는 인형 165 2. 저절로 움직이네! 177 3. 종이컵 스피커 189 4.

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

1.2 도형변환 Ÿ 캔버스의좌표계의이동, 회전및확대 / 축소기능을통한도형의변환을제공한다. Ÿ translate() 메서드는좌표공간의시작점을 (x,y) 로이동한다. Ÿ rotate() 메서드는좌표공간을시계방향으로회전한다. Ÿ scale() 메서드는좌표공간을수평 / 수직방

1.2 도형변환 Ÿ 캔버스의좌표계의이동, 회전및확대 / 축소기능을통한도형의변환을제공한다. Ÿ translate() 메서드는좌표공간의시작점을 (x,y) 로이동한다. Ÿ rotate() 메서드는좌표공간을시계방향으로회전한다. Ÿ scale() 메서드는좌표공간을수평 / 수직방 1. 도형합성및변환 1.1 도형합성 1.1.1 globalcompositeoperation 속성값 Ÿ globalcompositeoperation 속성을설명하면다양한기본합성동작을지정할수있다. 이속성을이용함으로써도형이그려진순서와상관없이겹쳐지는부분에대한처리가가능하다. 예제

More information

2. 4. 1. 업무에 활용 가능한 플러그인 QGIS의 큰 들을 찾 아서 특징 설치 마 폰 은 스 트 그 8 하 이 업무에 필요한 기능 메뉴 TM f K 플러그인 호출 와 TM f K < 림 > TM f K 종항 그 중에서 그 설치 듯 할 수 있는 플러그인이 많이 제공된다는 것이다. < 림 > 다. 에서 어플을 다운받아 S or 8, 9 의 S or OREA

More information

PowerPoint 프레젠테이션

PowerPoint 프레젠테이션 Translation Song 1 Finger Family 한글 해석 p.3 아빠 손가락, 아빠 손가락. p.4 p.5 엄마 손가락, 엄마 손가락. p.6 p.7 오빠 손가락, 오빠 손가락. p.8 p.9 언니 손가락, 언니 손가락. p.10 p.11 아기 손가락, 아기 손가락. p.12 p.13 p.14-15 재미있게 부르기 (Sing and Play Time)

More information

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로

쓰리 핸드(삼침) 요일 및 2405 요일 시간, 및 요일 설정 1. 용두를 2의 위치로 당기고 반시계방향으로 돌려 전날로 를 설정합니다. 2. 용두를 시계방향으로 돌려 전날로 요일을 설정합니다. 3. 용두를 3의 위치로 당기고 오늘 와 요일이 표시될 때까지 시계방향으로 한국어 표준 설정안내 서브 초침 시간 및 설정 1. 용두를 2의 위치로 뽑아냅니다. 2. 용두를 시계방향 또는 반시계방향으로 돌려(모델에 따라 다름) 를 전날로 설정합니다. 3. 용두를 3의 위치로 당기고 현재 가 표시될 때까지 시계방향으로 돌립니다. 4. 용두를 계속 돌려 정확한 오전/오후 시간을 설정합니다. 5. 용두를 1의 위치로 되돌립니다. 169 쓰리

More information

2015년9월도서관웹용

2015년9월도서관웹용 www.nl.go.kr 국립중앙도서관 후회의 문장들 사라져 버릴 마음의 잔해 지난해와 마찬가지로 이번 해에도 배추농사에서 큰돈을 남은 평생 머릿속에서 맴돌게 될 그 말을 다시 떠올려보 만졌다 하더라도 지난 여름 어느 날 갑자기 들기 시작한 았다. 맺지 못한 채 끝나버린 에이드리언의 문장도 함께. 그 생각만은 변함없을 것 같았다. 같은 나이의 다른 아이 그래서

More information

0.筌≪럩??袁ⓓ?紐껋젾001-011-3筌

0.筌≪럩??袁ⓓ?紐껋젾001-011-3筌 3 4 5 6 7 8 9 10 11 Chapter 1 13 14 1 2 15 1 2 1 2 3 16 1 2 3 17 1 2 3 4 18 2 3 1 19 20 1 2 21 크리에이터 인터뷰 놀이 투어 놀이 투어 민혜영(1기, 직장인) 내가 살고 있는 사회에 가치가 있는 일을 해 보고 싶 어 다니던 직장을 나왔다. 사회적인 문제를 좀 더 깊숙이 고민하고, 해결책도

More information

완벽한개념정립 _ 행렬의참, 거짓 수학전문가 NAMU 선생 1. 행렬의참, 거짓개념정리 1. 교환법칙과관련한내용, 는항상성립하지만 는항상성립하지는않는다. < 참인명제 > (1),, (2) ( ) 인경우에는 가성립한다.,,, (3) 다음과같은관계식을만족하는두행렬 A,B에

완벽한개념정립 _ 행렬의참, 거짓 수학전문가 NAMU 선생 1. 행렬의참, 거짓개념정리 1. 교환법칙과관련한내용, 는항상성립하지만 는항상성립하지는않는다. < 참인명제 > (1),, (2) ( ) 인경우에는 가성립한다.,,, (3) 다음과같은관계식을만족하는두행렬 A,B에 1. 행렬의참, 거짓개념정리 1. 교환법칙과관련한내용, 는항상성립하지만 는항상성립하지는않는다. < 참인명제 > (1),, (2) ( ) 인경우에는 가성립한다.,,, (3) 다음과같은관계식을만족하는두행렬 A,B에대하여 AB=BA 1 가성립한다 2 3 (4) 이면 1 곱셈공식및변형공식성립 ± ± ( 복호동순 ), 2 지수법칙성립 (은자연수 ) < 거짓인명제 >

More information

untitled

untitled 발 간 사 우리나라는 급속한 고령화로 노인의 경우 연령이 5세 증가할 때마다 치매 유병률이 두배씩 증가하며 65세 이상 노인의 치매 유병률은 계속 상승할 것으로 전망되고 있습니다. 이에 따른 치매환자 가정의 심리적, 신체적, 경제적 부담이 증가되고, 치매가 개인이나 한 가정의 책임을 넘어 국가가 책임지는 사회적 질병으로 인식되고 있습니다. 강원도광역치매센터는

More information

Ä¡¿ì_44p °¡À» 89È£

Ä¡¿ì_44p °¡À» 89È£ 2012 vol.89 www.tda.or.kr 2 04 06 8 18 20 22 25 26 Contents 28 30 31 38 40 04 08 35 3 photo essay 4 Photograph by 5 6 DENTAL CARE 7 Journey to Italy 8 9 10 journey to Italy 11 journey to Italy 12 13 Shanghai

More information

<34BFF9C8A320B4DCB8E9B0EDC7D8BBF32E706466>

<34BFF9C8A320B4DCB8E9B0EDC7D8BBF32E706466> ISSN 2288-5854 Print ISSN 2289-0009 online DIGITAL POST KOREA POST MAGAZINE 2016. APRIL VOL. 687 04 DIGITAL POST 2016. 4 AprilVOL. 687 04 08 04 08 10 13 13 14 16 16 28 34 46 22 28 34 38 42 46 50 54 56

More information

쉽게 풀어쓴 C 프로그래밍

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

More information

Javascript

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

More information

741034.hwp

741034.hwp iv v vi vii viii ix x xi 61 62 63 64 에 피 소 드 2 시도 임금은 곧 신하들을 불러모아 나라 일을 맡기고 이집트로 갔습니다. 하 산을 만난 임금은 그 동안 있었던 일을 말했어요. 원하시는 대로 일곱 번째 다이아몬드 아가씨를

More information

40043333.hwp

40043333.hwp 1 2 3 4 5 128.491 156.559 12 23 34 45 안녕하십니까? 본 설문은 설악산과 금강산 관광연계 개발에 관한 보다 실질적인 방향을 제시하고자 만들어졌습니다. 귀하께서 해주신 답변은 학문적인 연구에 도움이 될 뿐 아니라 더 나아가 다가오는 21세기 한국관광 발전에 많은 기여를 할 것입니다.

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

와플-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

Microsoft PowerPoint - chap05-제어문.pptx

Microsoft PowerPoint - chap05-제어문.pptx int num; printf( Please enter an integer: "); scanf("%d", &num); if ( num < 0 ) printf("is negative.\n"); printf("num = %d\n", num); 1 학습목표 제어문인,, 분기문에 대해 알아본다. 인 if와 switch의 사용 방법과 사용시 주의사항에 대해 알아본다.

More information

5월전체 :7 PM 페이지14 NO.3 Acrobat PDFWriter 제 40회 발명의날 기념식 격려사 존경하는 발명인 여러분! 연구개발의 효율성을 높이고 중복투자도 방지할 것입니다. 우리는 지금 거센 도전에 직면해 있습니다. 뿐만 아니라 전국 26

5월전체 :7 PM 페이지14 NO.3 Acrobat PDFWriter 제 40회 발명의날 기념식 격려사 존경하는 발명인 여러분! 연구개발의 효율성을 높이고 중복투자도 방지할 것입니다. 우리는 지금 거센 도전에 직면해 있습니다. 뿐만 아니라 전국 26 5월전체 2005.6.9 5:7 PM 페이지14 NO.3 Acrobat PDFWriter 제 40회 발명의날 기념식 격려사 존경하는 발명인 여러분! 연구개발의 효율성을 높이고 중복투자도 방지할 것입니다. 우리는 지금 거센 도전에 직면해 있습니다. 뿐만 아니라 전국 26개 지역지식재산센터 를 통해 발명가와 중소기업들에게 기술개발에서 선진국은 첨단기술을 바탕으로

More information

2015-05

2015-05 2015 Vol.159 www bible ac kr 총장의 편지 소망의 성적표 강우정 총장 매년 1학년과 4학년 상대로 대학생핵심역량진단 (K-CESA)을 실시한지 5년이 지났습니다. 이 진 단은 우리 학우들이 사회가 필요로 하는 직업인으로서 핵심역량을 어느 정도 갖추었나를 알아보는 진단입니다. 지난번 4학년 진단 결과는 주관처인 한국직업능력개발원

More information

레이아웃 1

레이아웃 1 03 04 06 08 10 12 13 14 16 한겨울의 매서운 추위도 지나가고 어느덧 봄이 성큼 다가왔습니다. 소현이가 이 곳 태화해뜨는샘에 다닌 지도 벌써 1년이 지났네요. 해샘에 처음 다닐 때는 대중교통 이용하는 것도 남을 의식해 힘들어하고, 사무실내에서 사람들과 지내는 것도 신경 쓰여 어려워했었습니다. 그러던 우리 소현이가 하루, 이틀 시간이 지나면서

More information

*074-081pb61۲õðÀÚÀ̳ʸ

*074-081pb61۲õðÀÚÀ̳ʸ 74 October 2005 현 대는 이미지의 시대다. 영국의 미술비평가 존 버거는 이미지를 새롭 게 만들어진, 또는 재생산된 시각 으로 정의한 바 있다. 이 정의에 따르 면, 이미지는 사물 그 자체가 아니라는 것이다. 이미지는 보는 사람의, 혹은 이미지를 창조하는 사람의 믿음이나 지식에 제한을 받는다. 이미지는 언어, 혹은 문자에 선행한다. 그래서 혹자는

More information

이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론

이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론 이도경, 최덕재 Dokyeong Lee, Deokjai Choi 1. 서론 2. 관련연구 2.1 MQTT 프로토콜 Fig. 1. Topic-based Publish/Subscribe Communication Model. Table 1. Delivery and Guarantee by MQTT QoS Level 2.1 MQTT-SN 프로토콜 Fig. 2. MQTT-SN

More information

4 7 7 9 3 3 4 4 Ô 57 5 3 6 4 7 Ô 5 8 9 Ô 0 3 4 Ô 5 6 7 8 3 4 9 Ô 56 Ô 5 3 6 4 7 0 Ô 8 9 0 Ô 3 4 5 지역 대표를 뽑는 선거. 선거의 의미와 필요성 ① 선거의 의미`: 우리들을 대표하여 일할 사람을 뽑는 것을 말합니다. ② 선거의 필요성`: 모든 사람이 한자리에 모여 지역의 일을 의논하고

More information

일반인을 위한 전자책 제작 방법

일반인을 위한 전자책 제작 방법 국립중앙도서관 디지털 정보활용능력 교육 이펍(ePub) 제작 입문 2015. 6. 강사 : 최 현 이북스펍 대표 (http://ebookspub.co.kr) - 1 - - 강의 내용 - 1. epub 이란 무엇인가 1.1. 전자책 출판 프로세스 이해 1.2. 전자책의 다양한 형태와 제작방식 1.2. epub 개념 이해 및 제작툴 종류 2. epub 제작툴 소개

More information

Art & Technology #5: 3D 프린팅 - Art World | 현대자동차

Art & Technology #5: 3D 프린팅 - Art World | 현대자동차 Art & Technology #5: 3D 프린팅 새로운 기술, 새로운 가능성 미래를 바꿔놓을 기술 이 무엇인 것 같으냐고 묻는다면 어떻게 대답해야 할까요? 답은 한 마치 한 쌍(pair)과도 같은 3D 스캐닝-프린팅 산업이 빠른 속도로 진화하고 있는 이유입니 가지는 아닐 것이나 그 대표적인 기술로 3D 스캐닝 과 3D 프린팅 을 들 수 있을 것입니 다. 카메라의

More information

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사

사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사 IDIS Mobile Android 사용설명서 Powered by 사용설명서를 읽기 전에 안드로이드(Android)용 아이디스 모바일은 네트워크 연결을 통해 안드로이드 플랫폼 기반의 모바일 기기에서 장치 (DVR, NVR, 네트워크 비디오 서버, 네트워크 카메라) 에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다. 장치의 사양 및 버전에 따라 일부

More information

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을

사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을 IDIS Mobile ios 사용설명서 Powered by 사용설명서를 읽기 전에 ios용 아이디스 모바일은 네트워크 연결을 통해 ios 플랫폼 기반의 모바일 기기(iOS 버전 6.0 이상의 ipod Touch, iphone 또는 ipad)에서 장치(DVR, 네트워크 비디오 서버 및 네트워크 카메라)에 접속하여 원격으로 영상을 감시할 수 있는 프로그램입니다.

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

예제 <!DOCTYPE html><html><head> <script type="text/javascript"> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get

예제 <!DOCTYPE html><html><head> <script type=text/javascript> function arcto() { var canvas = document.getelementbyid('canvas'); context = canvas.get 1. 원그리기 1.1 원 / 원호그리기 - arc() 메서드 Ÿ arc() 메서드에서는시작좌표 (x, y), 반지름 (radius), 시작각도 (startangle), 종료각도 (endangle), 그리는방향 (anticlockwise) 을지정해야한다. Ÿ 시작각도와종료각도는브라우저에서원주를따라그려지는호에대한각도로라디안을사용한다. 따라서각도에 Math.PI/180을곱해서사용한다.

More information

Vision Mission 15 174 121881 T 0269004400 F 0269004499 170 5 121140 T 0221264091 F 0221264044 4 112 203 425807 T 0314020442 F 0314020140 899 402061 T

Vision Mission 15 174 121881 T 0269004400 F 0269004499 170 5 121140 T 0221264091 F 0221264044 4 112 203 425807 T 0314020442 F 0314020140 899 402061 T 2014 Vol.130 Zoom In People Vision Mission 15 174 121881 T 0269004400 F 0269004499 170 5 121140 T 0221264091 F 0221264044 4 112 203 425807 T 0314020442 F 0314020140 899 402061 T 0324341391 F 0324391391

More information

<5BB0EDB3ADB5B55D32303131B3E2B4EBBAF12DB0ED312D312DC1DFB0A32DC0B6C7D5B0FAC7D02D28312E28322920BAF2B9F0B0FA20BFF8C0DAC0C720C7FCBCBA2D3031292D3135B9AEC7D72E687770>

<5BB0EDB3ADB5B55D32303131B3E2B4EBBAF12DB0ED312D312DC1DFB0A32DC0B6C7D5B0FAC7D02D28312E28322920BAF2B9F0B0FA20BFF8C0DAC0C720C7FCBCBA2D3031292D3135B9AEC7D72E687770> 고1 융합 과학 2011년도 1학기 중간고사 대비 다음 글을 읽고 물음에 답하시오. 1 빅뱅 우주론에서 수소와 헬륨 의 형성에 대한 설명으로 옳은 것을 보기에서 모두 고른 것은? 4 서술형 다음 그림은 수소와 헬륨의 동위 원 소의 을 모형으로 나타낸 것이. 우주에서 생성된 수소와 헬륨 의 질량비 는 약 3:1 이. (+)전하를 띠는 양성자와 전기적 중성인 중성자

More information

(Microsoft PowerPoint - \301\24613\260\255 - oFusion \276\300 \261\270\274\272)

(Microsoft PowerPoint - \301\24613\260\255 - oFusion \276\300 \261\270\274\272) 게임엔진 제 13 강 ofusion 씬구성 이대현교수 한국산업기술대학교게임공학과 학습목차 Ofusion 을이용한 export Export 된씬의재현 씬노드애니메이션을이용한수동카메라트래킹 ofusion OGRE3D 엔진용 3D MAX 익스포터 http://www.ofusiontechnologies.com ofusion 의특징 Realtime Viewport 3D

More information

2006.5ø˘ øÏæ - ª¡ˆ.pdf

2006.5ø˘ øÏæ - ª¡ˆ.pdf 2006. 05 17 18 2006. 05 19 20 2006. 05 21 22 2006. 05 23 24 01 26 2006. 05 27 28 2006. 05 29 30 2006. 05 31 32 2006. 05 33 02 34 2006. 05 35 36 2006. 05 37 38 2006. 05 39 03 04 40 2006. 05 41 05 42 2006.

More information

....pdf..

....pdf.. Korea Shipping Association 조합 뉴비전 선포 다음은 뉴비전 세부추진계획에 대한 설명이다. 우리 조합은 올해로 창립 46주년을 맞았습니다. 조합은 2004년 이전까 지는 조합운영지침을 마련하여 목표 를 세우고 전략적으로 추진해왔습니 다만 지난 2005년부터 조합원을 행복하게 하는 가치창출로 해운의 미래를 열어 가자 라는 미션아래 BEST

More information

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f

Index 1. Intro Install Connect Scratch 1.4 (Offline Editor) Scratch 2.0 (Online Editor) Connect f Scratch 호환 센서 보드 SKY SSB 설정 메뉴얼 1st of April 2016 Techdine Index 1. Intro... 03 2. Install... 04 3. Connect... 06 3-1. Scratch 1.4 (Offline Editor)... 06 3-2. Scratch 2.0 (Online Editor)... 09 3-2-1. Connect

More information

이상한 나라의 앨리스.pages

이상한 나라의 앨리스.pages 이상한 나라의 앨리스 01 문학의! 대한민국 문한 전문 사이트 문학의 사이트에서 자신의 콘텐츠를 등록하고 싶은 분은 위에 메일로 보내주세요. 궁금한 부분은 대표 전화로 연락을 주시면 상세히 상담해 드립니다. 화창한 오후마다 우린 느긋이 배를 타지 제1장 토끼굴 속으로 제2장 눈물 웅덩이 제3장 코커스 경주와 긴 이야기 제4장

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

춤추는시민을기록하다_최종본 웹용

춤추는시민을기록하다_최종본 웹용 몸이란? 자 기 반 성 유 형 밀 당 유 형 유 레 카 유 형 동 양 철 학 유 형 그 리 스 자 연 철 학 유 형 춤이란? 물 아 일 체 유 형 무 아 지 경 유 형 댄 스 본 능 유 형 명 상 수 련 유 형 바 디 랭 귀 지 유 형 비 타 민 유 형 #1

More information

슬라이드 1

슬라이드 1 모바일소프트웨어프로젝트 지도 API 1 조 20070216 김성수 20070383 김혜준 20070965 이윤상 20071335 최진 1 매시업? 공개 API? 2 매시업 웹으로제공하고있는정보와서비스를융합하여새로운소프트웨어나서비스, 데이터베이스등을만드는것 < 최초의매시업 > 3 공개 API 누구나사용할수있도록공개된 API 지도, 검색등다양한서비스들에서제공 대표적인예

More information

ISP and CodeVisionAVR C Compiler.hwp

ISP and CodeVisionAVR C Compiler.hwp USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler http://www.avrmall.com/ November 12, 2007 Copyright (c) 2003-2008 All Rights Reserved. USBISP V3.0 & P-AVRISP V1.0 with CodeVisionAVR C Compiler

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

슬라이드 1 고객의 불편을 모바일과 웹을 통해 실시간으로 해결하는 모바일 영상 기반 A/S 시스템 매뉴얼 (AnySupport Video) Contents 1. 애니서포트 비디오 소개 2. 각 부분별 기능 소개 3. 프로그램 설치 4. 주요기능 설명 고객의 불편을 웹과 모바일을 통해 실시간으로 해결 1. 애니서포트 비디오 소개 fdfsfds 고객과 기업이 모두 만족하는

More information

º´¹«Ã»Ã¥-»ç³ªÀÌ·Î

º´¹«Ã»Ã¥-»ç³ªÀÌ·Î 솔직히 입대하기 전까지만 해도 왜 그렇게까지 군대를 가려고하냐, 미친 것 아니냐는 소리도 많이 들었다. 하지만 나는 지금 그 때의 선택을 후회하지 않는다. 내가 선택한 길이기에 후회는 없다. 그런 말을 하던 사람들조차 지금의 내 모습을 보고 엄지 손가락을 치켜세운다. 군대는 하루하루를 소종하게 생각 할 수 있게 만들어 주었고, 점점 변해가는 내 모습을 보며

More information

SproutCore에 홀딱 반했습니다.

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

More information

ÆÞ¹÷-Æîħ¸é.PDF

ÆÞ¹÷-Æîħ¸é.PDF H.E.L.P. Vol. SUMMER Vol. WINTER 2015. vol 53 Pearl S. Buck Foundation Korea 4 Pearl S. Buck Foundation Korea 5 Pearl S. Buck Foundation Korea 프로그램 세계문화유산 걷기대회 Walk Together 탐방길곳곳에서기다리고있는조별미션활동! 남한산성 탐방길에는

More information

Artificial Intelligence: Assignment 6 Seung-Hoon Na December 15, Sarsa와 Q-learning Windy Gridworld Windy Gridworld의 원문은 다음 Sutton 교재의 연습문제

Artificial Intelligence: Assignment 6 Seung-Hoon Na December 15, Sarsa와 Q-learning Windy Gridworld Windy Gridworld의 원문은 다음 Sutton 교재의 연습문제 Artificial Intelligence: Assignment 6 Seung-Hoon Na December 15, 2018 1 1.1 Sarsa와 Q-learning Windy Gridworld Windy Gridworld의 원문은 다음 Sutton 교재의 연습문제 6.5에서 찾아볼 수 있다. http://incompleteideas.net/book/bookdraft2017nov5.pdf

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

......-....4300.~5...03...

......-....4300.~5...03... 덕수리-내지(6장~8장)최종 2007.8.3 5:43 PM 페이지 168 in I 덕수리 민속지 I 만 아니라 마당에서도 직접 출입이 가능하도록 되어있다. 이러한 장팡뒤의 구조는 본래적인 형태라 고 할 수는 없으나, 사회가 점차 개방화되어가는 과정을 통해 폐쇄적인 안뒤공간에 위치하던 장항 의 위치가 개방적이고 기능적인 방향으로 이동해가는 것이 아닌가 추론되어진다.

More information

USC HIPAA AUTHORIZATION FOR

USC HIPAA AUTHORIZATION FOR 연구 목적의 건강정보 사용을 위한 USC HIPAA 승인 1. 본 양식의 목적: 건강보험 이전과 책임에 관한 법(Health Insurance Portability and Accountability Act, HIPAA)이라고 알려진 연방법은 귀하의 건강정보가 이용되는 방법을 보호합니다. HIPAA 는 일반적으로 귀하의 서면 동의 없이 연구를 목적으로 귀하의

More information

: AA ( ) TV : ios ( ).. 2

: AA ( ) TV : ios ( ).. 2 : 2014... AA 1. 2. ( ) TV : ios ( ).. 2 ( ) TV : ios ( ).... 3 AA. `` 음악없음 을 To create 생성하기 a new 위해 group. 스피커를 choose some 선택하세요 speakers.. 모두 No 선택 Music + 음악없음 음악없음 Surround Group Soundbar 2 음악없음 완료

More information