자바스크립트45 자바스크립트와 캔버스 10, 테트리스를 만들어봐-6 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 9. 29. 자바스크립트와 캔버스 9, 테트리스를 만들어봐-5 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 9. 28. 자바스크립트와 캔버스 8, 테트리스를 만들어봐-4 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 | https://itadventure.. 2019. 9. 27. 자바스크립트와 캔버스 6, 테트리스를 만들어봐-2 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 / https://itadventure.tistory.com/132 4. 자바스크립트와 캔버스 4번째 시간, 마우스의 파동을 느껴봐! | https://itadventure.tistory.com/133 5. 자바스크립트와 캔버스, 테트리스를 만들어봐-1 | https://itadventure.tistory.com/136 ◐ 6. 자바스크립트와 캔버스, 테트리스를 만들어봐-2 ◑ 지난 시간에는 20행 10열의 .. 2019. 9. 24. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 ◐ 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 ◑ 매력덩어리 캔버스 3번째 시간입니다 :) 오늘은 공놀이를 할까 합니다. 떨어지는 공을 받아치며 벽돌을 깨뜨리는 게임을 해보신 적이 있다면 아주 친근하실텐데요. 벽돌까지는 안 나오고 공만 나옵니다. 사방이 꽉 막힌 공간이 있습니다. 그 속에서 하나의 공이 등장하며 여기저기를 떠돌아 다닙니다. 벽에 닿을때마다 반사되어 반대쪽으로 튀어다니긴 하지만 마찰력이 없기 때문에 튀어다니는 힘은 전혀 줄어듬이 없습니.. 2019. 9. 21. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 ◐ 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 ◑ 어릴 때 오락실에서 비행기 게임을 해본 적이 있다면, 수많은 적의 비행기와 총탄들이 자연스럽게 동시에 움직이는 것을 볼 수 있는데요. 크레이는 이제 평화주의인지라 전쟁과 관련된 것을 만들기는 싫고, 겨울에 내리는 눈송이들이 각각 속도와 크기, 속도(크기에 좌우됨) 등의 정보를 가지고 하늘에서 땅으로 떨어지는 장면을 묘사하려 합니다 :) 아래 URL에서 먼저 확인해보실 수 있습니다. http://dreamplan7.cafe24.com/canvas/cray02.php 캔바스 샘플#2 dreamplan7.cafe24.com .. 2019. 9. 21. HTML 표준 CANVAS 기술 소개 HTML 표준 CANVAS 기술 소개 오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :) 캔버스란 HTML 기술중 아직은 그리 널리 퍼지지 않은 매력덩어리 기술인데요. 이 기술이 매력덩어리인 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다. 아쉽지만, 이 페이지는 간단한 웹페이지를 구성하여 꾸미는 정도는 이해하시는 선에서 출발합니다. 그리고 IE8에서는 실행이 안됩니다. 최소 IE9 버전은 되어야 하며, 크롬브라우저의 경우 버전 관계없이 대부분 실행이 됩니다. 먼저 크레이가 준비한 소스를 보도록 하실까요? Canvas is not supported. 이 소스를 웹페이지에서 실행하시면, 구.. 2019. 9. 20. jQuery 함수 ( prototype ) 추가 자바스크립트에 프로토 타입이 있듯이 jQuery 에도 프로토 타입이 있습니다. 바로 $.fn 사용자 정의 프로토타입 기능인데요. 간단히 말해 jQuery 함수를 직접 추가할 수 있다는 의미입니다. jQuery 프로토타입은 보통 다음과 같이 선언이 가능합니다. $.fn.메소드명 = function(파라미터){ $(this).each(function(){ : // 처리할코드 }); }; 그러면 다음과 같이 사용할 수가 있지요. $('css셀렉터').메소드명(파라미터); 한번 예제를 볼까요? 아래 예제는 3개의 div 의 class 이름이 모두 CrayTest 입니다. 하나 둘 셋 그리고 3개의버튼이 마련되어 있지요. 빨강 버튼을 클릭해볼까요? 엇, div 요소 3개 모두 경계선 색상이 빨강 색으로 바뀌었.. 2019. 8. 25. 자바스크립트 일반메소드 vs 프로토타입 자바스크립트에는 클래스라는 개념이 없기 때문에, 함수를 마치 클래스처럼 사용합니다. 보통 다음과 같이 사용할수가 있는데요. 아주 간단한 형태의 클래스 선언입니다. function craySample2Class() { this.message="달린다2"; this.run = function(){ alert(this.message); } } 이 클래스는 클래스의 프로퍼티(property)로서, message 요소가 하나 정의되고, 아울러 run 이라는 메소드(method)가 정의됩니다. 이 클래스를 통해 객체 선언하는 문장은 아래와 같습니다. var craySample2 = new craySample2Class(); 그러면, craySample2 라는 객체가 생성되고, craySample2.message.. 2019. 8. 24. 자바스크립트 vs 제이쿼리 ( JQuery ) 웹에서는 필수불가결 기술인 자바스크립트와 jQuery, 과연 어느것이 더 뛰어날까요? 오늘은 잠깐 시간 내어 관련 부분을 논해 봅니다. 자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 서버 사이드가 아닌 클라이언트 기술이지요. 오래전부터 널리 사용되어 왔고 지금도 지속적으로 사용되고 있으며, 기능성 홈페이지 99% 이상이 이 기술을 사용하고 있다고 해도 과언이 아닐 겁니다. 그렇다면 jQuery 는 무슨 기술일까요? jQuery 역시 자바스크립트입니다. 다만 자바스크립트로 빈번하게 사용되는 기능들을 약간 다른 형식으로 사용하게 만든 라이브러리입니다. 프로그램 언어에서 '라이브러리'란 '도서관'의 의미보다는 '기능덩어리'라고 이해하시면 됩니다. 아래 샘플 웹페이지를 잠깐 보실까요? 이 웹페.. 2019. 8. 5. 3차원 웹, 오우~ 돌핀! - 27번째 시간 three.js 버전이 변경되어 소스가 일부 수정되었습니다(2020. 4. 12) 본문과 다소 상이할 수 있으며 작동 소스는 아래에서 확인 가능합니다. http://dreamplan7.cafe24.com/canvas2/three015.html 돌고래는 인간 친화적인 동물로 알려져 있습니다. 우선 친근한 그 미소부터가 마음에 들지 않습니까? 크레이처럼 말이죠 :) 3차원 웹 가상 공간의 바닷가에 이 친근한 돌고래를 출현시켜보고 싶긴 하지만 아직 크레이의 실력으로는 블렌더로 이런 동물을 모델링할 정도는 안됩니다. 그래서 생각해낸 것이 있습니다. 바로 무료 3D 모델이지요 :) 그런게 있나요? 물론 있습니다. 어디 있냐구요? 여기 있지요. https://free3d.com 무료 3D 모델 - Fre.. 2019. 7. 23. 3차원 웹 VR 모드, 모바일로 보는 딴 세상 - 26번째 시간 요새 VR 이다 해서 가상세계와 가상현실이 각광받는 듯 합니다. 물론 아직은 컨텐츠의 부족으로 가뭄을 겪고 있는듯 하지만, 5G 모바일 통신체계가 자리잡히고 모바일 기기의 성능이 점점 좋아짐에 따라 컨텐츠 더욱 제작도 쉬워지겠지요. 모바일웹에서 사용하는 HTML5 웹표준 기술은 이미 이런 기술을 위한 준비를 몇년전부터 해왔고, 현 시대에는 표준화하여 대부분의 브라우저에서 이미 지원되고 있습니다. 영상 한번 보실까요? 앞 부분은 PC 웹이고, 뒷부분은 모바일웹입니다. https://youtu.be/VJZPewzuf5w 이번 시간에는 지난 주에 이어, VR 모드를 추가하는 부분을 다뤄보도록 하겠습니다. 미리보기를 원하시는 분은 아래 URL 로 접속하시면 작동화면을 보실 수 있지요. http://dream.. 2019. 7. 21. 이전 1 2 3 4 다음
