우기TIL

저번 포스팅을 읽으신 분이라면 Blockly의 창을 띄워보셨을 겁니다. 오늘은 띄운것에서 끝내는 것이 아닌 그것에 대한 상세 설정을 건드려보도록 해보죠. Add Custom Blocks 저번에 toolbox에서 xml안에 여러개의 블록을 추가해본적이 있죠? 하지만 그 블록들은 이미 google에서 기존에 정의해놓은 블록입니다. 그렇다면 기존에 없는 블록을 사용하고 싶다면 어떻게 해야할까요..? 다행히 방법이 두가지가 있습니다.. 첫번째 방법은 BlocklyGithub에서 다운받은 소스내에서 blocks/ 에 블록을 새롭게 정의해서 blocks_compressed.js를 새로 만들어 쓰는방법 또는 Blockly.inject를 하기전에 script에서 바로 블록을 선언해서 사용하는 방법이 있습니다. 우리는 ..

Blockly란 무엇인가 ? 기존의 우리가 알고 있는 언어와 다르게 시각적으로 코드를 편집할 수 있게 해주는 라이브러리이미 현재 Blockly를 사용하여 스크래치나 Code.org 등 같은 곳에서 아이들에 코딩교육을 진행하고 있습니다.Blockly는 텍스트 방식이 아닌 블록코딩 방식을 사용함으로써 프로그래밍이 익숙치 않은 아이들은 물론 전 연령이 쉽게 사용할 수 있게 되어 있습니다. 이런 점을 사용하여 어린아이들에게 컴퓨팅적인 사고를 키우기 위한 용도로써 코딩교육이 굉장히 HOT한 상태입니다.또한 프로그래밍 관련이 없는 사람들도 Blockly를 사용할 줄 안다면 MIT에서 제공하는 앱 인벤터(App Inventor)를 사용하여 안드로이드 앱을 간단하게 제작 할 수 있습니다. 하지만 우리가 이런것을 할 것..

SVG (Scalable Vector Graphics) XML 기반 표준 그래픽 포멧입니다. SVG 의 모든 요소와 속성들에 애니메이션을 적용시킬 수 있습니다. 벡터기반으로 구성되어 있어 해상도에 영향을 받지 않습니다. (확대 축소로 인해 이미지가 깨지는 현상이 X) Javascript SVG DOM API를 이용해서 모든 element를 자유롭게 컨트롤 할 수 있다. 문서 복잡도가 증가할수록 렌더링이 느리다.( Dom이 많을 수록 느려짐..게임에 비적합 ) HTML안에 SVG 넣어보기! SVG in HTML!! 더보기 SVG in HTML!! SVG에서는 모양을 만들 수 있는 여러 태그가 있습니다. 그것들의 대해서 예제를 보고 갑시다. 직사각형 만들기 - svg태그에 width, height는 svg영..