이 페이지는 Cloud Translation API를 통해 번역되었습니다.

CSS로 스타일 지정

Blockly 애플리케이션은 HTML 및 SVG 요소로 구성됩니다. 이러한 요소에는 나타내는 항목 (예: blocklyBlock, blocklyField)과 상태 (예: blocklyEditing, blocklySelected)를 식별하는 CSS 클래스가 라벨로 지정됩니다. Blockly는 기본 CSS 규칙 집합도 제공합니다.

CSS를 사용하여 애플리케이션의 스타일을 지정할 수 있습니다.

자체 규칙으로 Blockly의 CSS 규칙을 재정의합니다.
추가적인 구체성을 위해 Blockly 구성요소에 자체 CSS 클래스를 추가합니다.
CSS 클래스와 규칙을 사용하여 맞춤 구성요소의 스타일을 지정합니다.

CSS 클래스

Blockly 애플리케이션은 CSS 클래스를 사용하여 스타일을 지정할 요소를 식별합니다. 이렇게 하면 유형 (요소) 선택기보다 더 세밀하게 제어할 수 있습니다.

Blockly CSS 클래스

Blockly는 CSS 클래스를 사용하여 사용하는 HTML 및 SVG 요소에 관한 다음 종류의 정보를 제공합니다.

유형 대부분의 Blockly CSS 클래스는 요소가 나타내는 것을 식별합니다. 예를 들어 블록의 루트 요소에는 blocklyBlock 라벨이 지정됩니다. 일부 요소에는 여러 클래스가 라벨로 지정되며, 각 클래스는 이전 클래스보다 더 구체적입니다. 예를 들어 텍스트 입력 필드의 루트 요소에는 blocklyField, blocklyInputField, blocklyTextInputField 라벨이 지정됩니다. 구성요소 수명 동안 유형 클래스는 동일하게 유지됩니다.
State. Blockly는 CSS 클래스를 사용하여 구성요소의 상태를 지정하기도 합니다. 예를 들어 커서가 텍스트 입력 필드에 있으면 루트 요소에 blocklyEditing 클래스가 라벨로 지정됩니다. 커서가 이동하면 이 클래스가 삭제됩니다.
추가 정보 Blockly는 몇 가지 CSS 클래스를 사용하여 추가 정보를 제공합니다. 예를 들어 <div> 삽입에는 작업공간의 현재 렌더러와 테마의 이름을 제공하는 클래스가 있습니다. 이러한 클래스는 일반적으로 애플리케이션 수명 동안 동일하게 유지됩니다.

Blockly에서 사용하는 CSS 클래스를 확인하는 가장 쉬운 방법은 브라우저의 개발자 도구를 열고 애플리케이션에서 사용하는 요소를 검사하는 것입니다.

맞춤 CSS 클래스

맞춤 CSS 클래스를 사용하여 Blockly 구성요소에 더 구체적인 정보를 제공할 수 있습니다.

작업공간

작업공간의 삽입 <div>에서 CSS 클래스를 추가하거나 삭제하려면 WorkspaceSvg.addClass 또는 WorkspaceSvg.removeClass를 호출합니다.

도구 상자

툴박스의 버튼이나 라벨에 CSS 클래스를 추가하려면 툴박스의 JSON 정의에서 web-class 키를 사용하세요. 자세한 내용은 버튼 및 라벨을 참고하세요.

카테고리의 다양한 부분에 사용되는 CSS 클래스를 재정의하려면 카테고리의 JSON 정의에서 cssConfig 키를 사용하세요. 이를 통해 개별 카테고리를 스타일링할 수 있습니다. 자세한 내용은 카테고리 CSS를 참고하세요.

블록

맞춤 블록에 CSS 클래스를 추가하려면 classes 키에 문자열 또는 문자열 배열을 전달합니다.

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "message0": 'length of %1',
  "args0": [
    {
      "type": "input_value",
      "name": "VALUE",
      "check": "String",
    }
  ],
  "classes": "myStringLengthBlock",
  "output": "Number",
  "colour": 160,
}]);

BlockSvg.addClass 또는 BlockSvg.removeClass를 호출하여 블록의 <g> 요소에서 CSS 클래스를 추가하거나 삭제할 수도 있습니다.

라벨 필드

라벨 필드 또는 직렬화 가능한 라벨 필드에서 사용하는 <text> 요소에서 CSS 클래스를 추가하거나 삭제하려면 FieldLabel.setClass를 호출하세요. 클래스 이름을 라벨의 생성자에 전달할 수도 있습니다.

CSS 클래스 및 맞춤 구성요소

맞춤 구성요소를 구성할 때는 다음 방법 중 하나를 사용하여 맞춤 CSS 클래스를 추가하세요.

구성요소가 Field 또는 Icon의 서브클래스인 경우 initView 메서드를 재정의합니다. 예를 들면 다음과 같습니다.

class MyCustomField extends Blockly.FieldTextInput {
  ...

  initView() {
    super.initView();

    // Add custom CSS class so we can style the field.
    if (this.fieldGroup_) {
      Blockly.utils.dom.addClass(this.fieldGroup_, 'myCustomField');
    }
  }
}

자세한 내용은 CSS로 필드 맞춤설정 또는 아이콘의 뷰 만들기를 참고하세요.

SVG 요소를 구성할 때 클래스를 Blockly.utils.dom.createSvgElement에 전달합니다.

this.svgRoot = Blockly.utils.dom.createSvgElement(Svg.G, {'class': 'myCustomComponent'});

HTML 요소를 구성할 때는 Blockly.utils.dom.addClass를 사용하세요.

const myDiv = document.createElement('div');
Blockly.utils.dom.addClass(myDiv, 'myInformation');

구조화 후 클래스를 추가하거나 삭제하려면 Blockly.utils.dom.addClass 또는 Blockly.utils.dom.removeClass를 사용하세요.

setMyHighlight(highlight) {
  if (highlight) {
    Blockly.utils.dom.addClass(this.svgRoot, 'myHighlight');
  } else {
    Blockly.utils.dom.removeClass(this.svgRoot, 'myHighlight');
  }
}

CSS 규칙 배경

SVG 스타일 지정 속성과 CSS 캐스케이드를 이해하는 경우 이 섹션을 건너뛰어도 됩니다.

SVG 스타일 지정 속성과 CSS 속성 비교

SVG 요소는 SVG 스타일 지정 속성으로 스타일이 지정됩니다. 이러한 속성은 SVG 요소 (프레젠테이션 속성이라고도 함) 또는 CSS 규칙에서 속성으로 사용할 수 있습니다. 따라서 다음은 모두 동일한 작업을 실행합니다.

<!-- SVG file with presentation attributes. -->
<circle fill="red" ... />

<!-- SVG file with <style> tag. -->
<style>
  circle {fill:red;}
</style>
<circle ... />

/* External CSS file.*/
circle {fill:red;}

<!-- SVG file with inline style. -->
<circle style="fill:red;" ... />

SVG 스타일 지정 속성 목록은 CSS 속성 목록과 관련이 있지만 다릅니다.

동일한 개념, 동일한 이름 예를 들어 SVG와 CSS는 모두 direction를 사용하여 텍스트가 LTR인지 RTL인지 지정합니다.
동일한 개념, 다른 이름 예를 들어 SVG는 fill를 사용하여 채우기 색상을 지정하고 CSS는 background-color를 사용합니다.
CSS만 해당 CSS에는 margin, padding 등 SVG에 없는 속성이 많이 있습니다.
SVG만 해당합니다. SVG에는 CSS에 없는 몇 가지 속성이 있습니다(예: x, y).

따라서 SVG 요소를 스타일 지정하는 경우 SVG 스타일 지정 속성을 사용하세요. HTML 요소를 스타일링하는 경우 CSS 속성을 사용합니다.

CSS 캐스케이드

CSS 캐스케이드는 CSS 규칙의 우선순위를 결정합니다. 우선순위는 특정 속성과 요소에 두 개 이상의 규칙이 적용되는 경우 사용할 규칙을 결정합니다. 다음은 Blockly에서 가장 일반적으로 사용되는 캐스케이드의 부분을 다루는 간소화된 캐스케이드로, '내 CSS가 작동하지 않는 이유는 무엇인가요?'라는 질문을 해결하는 데 도움이 될 수 있습니다.

간소화된 캐스케이드

특정 요소와 속성에 적용되는 규칙을 확인하려면 다음 단계를 따르고 규칙이 하나만 남으면 중지하세요.

속성과 요소에 적용되는 모든 규칙을 수집합니다.
규칙에 !important 주석이 있는 경우 !important 주석이 없는 규칙을 모두 삭제합니다.
구체성이 가장 높은 규칙을 선택합니다.
- SVG 프레젠테이션 속성의 특이성은 0입니다.
- <style> 태그 또는 외부 스타일시트의 규칙은 명시도가 정상적으로 계산됩니다.
- 인라인 스타일 (style 속성으로 설정된 스타일)은 모든 선택기보다 명시도가 높습니다.
문서에서 마지막에 표시되는 규칙을 선택합니다.
적용되는 규칙이 없으면 요소의 상위 요소에서 속성 값을 상속합니다.

이 알고리즘은 캐스케이드의 다음 부분을 고려하지 않습니다.

transition 속성(우선순위가 가장 높음) Blockly는 이러한 항목 중 일부를 사용합니다.
@media at-rule Blockly는 이 중 하나를 사용합니다.
브라우저 또는 사용자가 지정한 규칙입니다.
Blockly에서 사용하지 않는 @scope 및 @layer at-rule과 animation 속성

CSS 규칙

CSS 규칙은 애플리케이션의 스타일을 지정합니다. Blockly는 자체 규칙으로 재정의할 수 있는 기본 규칙 세트를 제공합니다.

Blockly CSS 규칙

Blockly는 기본 CSS 규칙 세트를 제공합니다. 이러한 규칙이 추가되는 방식과 위치는 우선순위에 영향을 미칩니다.

스타일 태그

Blockly의 CSS 규칙 대부분은 두 개의 <style> 태그에 지정됩니다. 이러한 태그는 페이지 상단에 표시되므로 태그의 규칙은 페이지 후반에 표시되는 동일한 구체성을 가진 규칙보다 우선순위가 낮습니다.

Blockly.css.register 규칙

Blockly가 삽입되면 <style> 태그가 <head> 태그의 하위 요소로 추가됩니다. 이 태그의 규칙은 다음에서 가져옵니다.

Blockly.css 네임스페이스 이러한 규칙을 확인하려면 core/css.ts를 열고 let content를 검색하세요.
Blockly.css.register를 호출하여 구성요소별 CSS 규칙을 추가하는 개별 구성요소 css.register는 이러한 규칙을 content 문자열의 끝에 추가하므로 이전에 추가된 동일한 구체성을 가진 규칙보다 우선순위가 높습니다. 이러한 규칙을 확인하려면 Blockly.css.register 호출을 참고하세요.

이러한 규칙을 사용하지 않으려면 css 구성 옵션을 false로 설정하세요. 이 경우 대체 CSS 규칙 집합을 제공해야 합니다.

렌더러 규칙

렌더러가 인스턴스화되면 렌더러별 CSS 규칙이 포함된 <style> 태그가 <head> 태그의 하위 요소로 추가됩니다. 이러한 규칙은 항상 추가되며 css 구성 옵션의 영향을 받지 않습니다. 이러한 규칙을 확인하려면 렌더러에서 getCss_ 메서드를 검색하세요.

인라인 스타일

인라인 스타일은 style 속성으로 지정되며 일반적으로 구성요소의 DOM이 생성될 때 생성됩니다. 일부 목록은 이 GitHub 쿼리를 참고하세요.

인라인 스타일은 스타일이 적용되는 요소에 직접 적용되며 선택기보다 구체성이 높습니다. 따라서 일반적으로 이를 재정의하려면 !important 주석을 사용해야 합니다.

SVG 프레젠테이션 속성

SVG 프레젠테이션 속성은 SVG 요소의 속성으로 사용되는 SVG 스타일 속성입니다. 구체성이 0이고 !important 주석을 포함할 수 없으므로 Blockly의 모든 규칙 중에서 우선순위가 가장 낮습니다. Blockly는 일반적으로 createSvgElement 호출에서 이를 만듭니다.

자체 CSS 규칙 추가

Blockly와 동일한 방법을 사용하여 자체 CSS 규칙을 추가할 수 있습니다.

Blockly를 삽입하기 전에 Blockly.css.register를 호출합니다. 규칙은 Blockly의 규칙 뒤에 추가되며 동일한 구체성을 가진 Blockly 규칙보다 우선순위가 높습니다.
<head> 태그의 후속 하위 요소로 <style> 태그를 추가하거나 외부 스타일 시트에 연결합니다. Blockly는 <head> 태그의 처음 두 하위 요소로 규칙을 추가하므로 규칙의 우선순위가 동일한 특정성을 가진 Blockly 규칙보다 높습니다.
인라인 스타일을 사용하여 맞춤 구성요소의 요소에 스타일을 추가합니다. 이러한 규칙은 선택기가 있는 규칙보다 특정성이 높습니다.
맞춤 구성요소에서 SVG 요소에 프레젠테이션 속성을 사용합니다. 이러한 규칙은 선택자가 있는 규칙보다 명시도가 낮습니다.

문제 해결

CSS가 작동하지 않는 경우 다음과 같은 원인이 있을 수 있습니다.

SVG 요소에 CSS 속성을 사용하거나 HTML 요소에 SVG 스타일 속성을 사용하고 있습니다. SVG 스타일 지정 속성과 CSS 속성 비교를 참고하세요.
규칙의 우선순위가 다른 규칙보다 낮습니다. 이는 일반적으로 구체성이 낮기 때문입니다. 이 문제를 해결할 수 있는 방법은 다음과 같습니다.
- 유형 (요소) 선택기 대신 클래스 선택기를 사용합니다.
- 여러 선택기를 사용합니다.
- 가능하면 타겟 요소에 맞춤 클래스를 추가하고 규칙에서 이 클래스를 사용하세요.
- 최후의 수단으로 규칙에 !important 주석을 추가합니다. 경쟁 규칙이 인라인 스타일(style 속성)을 사용하여 지정된 경우에만 이 옵션을 선택할 수 있습니다.
규칙의 명시도가 다른 규칙과 동일하지만 페이지에서 더 일찍 발생합니다. 규칙의 구체성을 높일 수 없는 경우 페이지에서 나중에 이동하세요.

재정의할 수 없는 CSS 규칙에는 두 가지 유형이 있습니다.

transition 규칙 내에 설정된 속성입니다.
브라우저에서 지정한 !important 규칙