작업공간 만들기

Blockly 작업공간은 Blockly의 최상위 구성요소입니다. 블록으로 프로그래밍하는 데 사용하는 UI입니다.

작업공간 및 하위 구성요소에 대한 자세한 내용은 시각적 용어집을 참고하세요.

삽입 div

Blockly 작업 공간은 '삽입 div'라고 하는 <div>에 삽입해야 합니다.

삽입 div는 정적 또는 동적으로 크기를 조정할 수 있습니다. div 내의 Blockly 요소는 창 크기가 조절될 때 크기를 업데이트합니다.

다음 코드 스니펫은 정적으로 크기가 조정된 삽입 div의 HTML을 보여줍니다.

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

주사

삽입은 작업공간의 UI를 구성하는 모든 HTML 하위 요소를 만듭니다. 또한 작업공간을 사용할 수 있도록 준비하는 데 필요한 모든 초기화를 실행합니다.

삽입 함수는 삽입 div의 ID 또는 삽입 div 자체를 사용할 수 있습니다.

// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });

// Passes the injection div.
const workspace = Blockly.inject(
    document.getElementById('blocklyDiv'), { /* config */ });

구성

작업 영역은 삽입 중에 레이아웃, 스타일 등 다양한 옵션으로 구성할 수 있습니다.

구성 옵션에 관한 자세한 내용은 구성 옵션을 참고하세요.