구성요소에 대한 CSS 추가

구성요소에 대한 기본 스타일을 제공할 CSS를 추가할 수 있습니다.

1. 다음 내용과 함께 구성요소의 assets 폴더에 design.css 파일을 추가합니다.

   .h1-component-default-style .scs-component-content {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 24px;
    color:red;
    font-weight: normal; }

2. appinfo.json에 추가하여 구성요소 스타일링에 사용할 스타일 클래스 접두어를 선언합니다. styleClassName으로 h1-component를 추가하면 구성요소를 페이지 위에 놓을 때 기본 스타일은 h1-component-default-style이 됩니다. appinfo.json의 새로운 내용은 다음과 같습니다.

   {
      "id": "h1-component-id",
   
      "settingsData": {
                "settingsHeight": 90,
                "settingsWidth": 300,
                "settingsRenderOption": "inline",
                "componentLayouts": [ ],
                "triggers": [ ],
                "actions": [ ]
      },
      "initialData": {
                "componentId": "h1-component-id",
                "styleClassName":"h1-component",
                "customSettingsData": {
                        "headingText": "Heading 1"
                },
                "nestedComponents": [ ]
      }
   }

3. render.js를 업데이트하여 CSS 파일을 로드합니다. 2행(define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {)을 다음 행으로 바꾸십시오.

   define(['knockout', 'jquery', 'text!./render.html', 'css!./design.css'], function(ko, $, template, css) { 

   주:

   appinfo.json 파일을 변경했으므로 브라우저를 새로고침하고 페이지에 다시 구성요소를 추가하여 변경사항을 적용해야 합니다.