상황

CSS Flyout toolbox에 사용자가 입력한 클래스명이 담긴 블록을 띄우고자 한다.

구현에 앞서 기본 제공 기능과 시안이 꽤 달라 커스텀 가능 여부를 체크해보고자 한다.

Flyout toolbox란?

[Blockly](https://developers.google.com/blockly/guides/get-started/workspace-anatomy?_gl=1*z95crs*_up*MQ.._gaMTE0Njk1MDY2OC4xNzMxMzgyNTMy*_ga_R5G2Y6GLVC*MTczMTM4MjUzMi4xLjEuMTczMTM4MjUzMi4wLjAuMA..)에서 정의한 용어는 다음과 같다.

모든 컴포넌트를 포함하는 개념이다.

즉, HTML/CSS에 따른 블록 요소를 가져오고 조립할 수 있는 공간 모두를 포함한다.

블록을 가져올 수 있는 공간으로 Workspace에서 왼쪽에 위치해있다.

그 중에서 블록들이 포함된 영역을 Flyout이라 한다.

이러한 블록들을 Category로 묶을 수 있다.

블록은 크게 HTML 태그와 CSS 속성을 담은 클래스명으로 나뉜다.