사용자 정의 디자인 옵션 수정

개체

예:

"customStyles": { "all": { /* 모든 CSS 속성. */ /* 예, "flexDirection": "rowReverse" */ },

"desktop": { /* 모든 CSS 속성. */ /* 모든 섹션에 나열된 것 외에 적용할 속성 */ }

, "tablet": { /* 모든 CSS 속성. */ /* 모든 섹션에 나열된 것 외에 적용할 속성 */ }

, "mobile": { /* 모든 CSS 속성. */ /* 모든 섹션에 나열된 것 외에 적용할 속성 */ },

"mobile_landscape": { /* 모든 CSS 속성. */ /* 모든 섹션에 나열된 것 외에 적용할 속성 */ }, }

요소 또는 컨테이너에서 직접 CSS 스타일을 적용하는 데 사용됩니다. CSS 스타일 이름은 camel case 형식이어야 합니다. 예를 들어, flex-direction은 flexDirection이 됩니다. CSS 선택기는 허용되지 않습니다. 여기에 언급된 스타일은 해당 HTML 요소에 CSS 스타일로 직접 적용됩니다. 이러한 속성은 각 컨테이너의 시각적 속성에 매핑되지 않습니다. 바로 이러한 성격 때문에 "margin"과 같은 일부 속성이 "content-width"와 같은 시각적 속성과 동기화되지 않을 수 있습니다.

지침으로, 시각적 속성을 통해 무언가 제어할 수 있는 경우 이러한 속성을 "customProperties"에서 선언하고 나머지는 "customStyles"에서 CSS 속성으로 선언합니다.

개체

자세한 내용은 customProperties 테이블을 참조하세요.

카드 컨테이너 속성만

"cornerRadius": { "type": 1, "value": { "topLeft": 4, "bottomLeft": 4, "bottomRight": 4, "topRight": 4 } },

컨테이너에 배경을 추가하려면 fill 속성을 사용합니다. fill 속성에는 다음과 같은 정보가 포함됩니다.

1. Type: 채우기 유형을 지정합니다. 다음 옵션에서 선택할 수 있습니다.

   • 1: 단색 채우기
   • 2: 이미지 채우기
   • 3: 선형 그레이디언트
   • 4: 방사형 그레이디언트

2. Enabled: fill 속성이 사용되는지 여부를 나타내는 부울 값입니다.

3. Props: 색상, 불투명도(알파), 중간 색상, 끝점, 방사형 핸들 점 및 배경 이미지와 같은 채우기에 대한 모든 세부 사항을 포함합니다.

단색 채우기 JSON 구조

"fill": {
"type": 1,
"props": {
"color": "<채우기 색상>",(색상에 대한 16진 코드)
"alpha": <색상 불투명도(0 ~ 1의 값 범위)>
}
}

이미지 채우기 JSON 구조

"fill": {
"type": 2,
"props": {
"backgroundImage": "<확장자 포함 이미지 이름(이미지가 동일한 디렉토리에 있어야 함)>"
}
}

선형/방사형 그레이디언트 JSON 구조

• 중간 색상: 특정 위치에서 그레이디언트의 색상을 정의합니다. 각 중간 지점에는 다음과 같은 속성이 있습니다.
  • color: 그레이디언트 색상(16진수 형식).
  • alpha: 색상의 투명도(값의 범위는 0~1).
  • scaledPosition: 중간 색상의 위치(값 범위는 0~1).

"fill": {

"type": <채우기 유형(선형 그레이디언트의 경우 3, 방사형 그레이디언트의 경우 4를 사용함)>,
"props": {
"colorStops": [
{
"color": "cp-color-c7",
"alpha": 1,
"scaledPosition": 0
},
{
"color": "cp-color-c9",
"alpha": 0.5,
"scaledPosition": 1
}
]
}
}

fill 속성과 연결된 특성을 사용하여 컨테이너에 대한 다양한 배경 스타일을 정의할 수 있습니다.

shadow 속성을 사용하여 콘텐츠 블록이나 카드 컨테이너와 같은 컨테이너 요소에 그림자를 추가할 수 있습니다. 다음 특성이 그림자의 모양을 정의합니다.

그림자 속성

• x: 그림자의 가로 오프셋입니다.
• y: 그림자의 세로 오프셋입니다.
• blur: 그림자 흐림 효과의 반경입니다.
• color: 16진수 형식의 그림자 색상입니다.
• type: 그림자 유형을 지정합니다. 내부 그림자의 경우 1을 사용합니다.
• alpha: 그림자 불투명도입니다(값의 범위는 0~1).
• enabled: 그림자를 사용(true) 또는 사용 안 함(false)으로 설정하는 부울 값입니다.

콘텐츠 블록 컨테이너의 그림자

컨테이너에 그림자를 적용하려면 다음 속성을 사용합니다.

• x: 그림자의 가로 오프셋입니다.
• y: 그림자의 세로 오프셋입니다.
• blur: 그림자 흐림 효과의 반경.
• color: 그림자 색상(16진수 형식).
• type: 내부 그림자에 1을 사용합니다.
• alpha: 그림자 불투명도(0~1).
• enabled: 그림자를 사용하거나 사용하지 않도록 설정하는 부울입니다.

예:

"shadow": { "x": 1, "y": 2, "blur": 4, "color": "#b3b3b3", "type": 1, "alpha": 0.5, "enabled": false }

카드 컨테이너의 그림자

카드 컨테이너에 그림자를 추가하려면 다음 속성을 사용합니다.

• x: 그림자의 가로 오프셋입니다.
• y: 그림자의 세로 오프셋입니다.
• blur: 그림자 흐림 효과의 반경.
• color: 그림자 색상(16진수 형식).
• enabled: 그림자를 사용하거나 사용하지 않도록 설정하는 부울입니다.

예:

"shadow": { "x": 0, "y": 0, "blur": 10, "color": "#666666", "enabled": true }

border 속성을 사용하여 콘텐츠 블록이나 카드와 같은 컨테이너 요소에 테두리를 적용할 수 있습니다. 다음 특성이 테두리의 모양을 정의합니다.

테두리 속성:

• type: 테두리 유형을 지정합니다. 값의 범위는 0에서 5까지이며, Charm 테두리 드롭다운의 옵션에 해당합니다.
• capType: 테두리 대문자 유형을 정의합니다. 값의 범위는 0에서 2까지입니다.
• width: 테두리 너비를 지정합니다.
• color: 테두리 색상을 설정합니다(16진수 형식으로).
• alpha: 테두리 불투명도를 결정합니다(값 범위는 0~1).
• enabled: 테두리를 사용(true) 또는 사용 안 함(false)으로 설정하는 부울입니다.

예:

"border": { "enabled": false, "color": "cp-color-c4", "width": 8, "type": 0 }

카드 컨테이너의 테두리 속성

• enabled: 테두리를 사용(true) 또는 사용 안 함(false)으로 설정하는 부울입니다.
• color: 테두리 색상을 지정합니다(16진수 형식으로).
• width: 테두리 너비를 정의합니다.
• type: 테두리 유형을 지정합니다.

예:

"border": { "enabled": true, "color": "#666666", "width": 5, "type": 1 }

구성 요소 정렬 변경

• 콘텐츠 블록 내의 각 구성 요소에는 구성 요소 속성의 항목이 있습니다.
• alignment 속성은 각 구성 요소의 정렬을 지정하고 다음 값을 승인합니다.
  • left
  • right
  • center

카드 가시성 제어

• card 속성을 사용하여 카드의 가시성을 제어할 수 있습니다.
• 값을 true로 설정하면 카드가 활성화되고 false로 설정하면 카드가 비활성화됩니다.

예:
카드 컨테이너 속성

카드 컨테이너에는 구성 요소나 슬라이드 항목이 들어 있으며 components 속성을 사용하여 정렬 및 가시성을 사용자 정의할 수 있습니다.

구성 요소 정렬 변경

• 콘텐츠 블록 내의 각 구성 요소에는 구성 요소 속성의 항목이 있습니다.
• alignment 속성은 각 구성 요소의 정렬을 지정하고 다음 값을 승인합니다.
  • left
  • right
  • center

카드 가시성 제어

• card 속성을 사용하여 카드의 가시성을 제어할 수 있습니다.
• 값을 true로 설정하면 카드가 활성화되고 false로 설정하면 카드가 비활성화됩니다.

예

"components": {
"label": {
"alignment": "left"
},
"checkbox": {
"alignment": "left"
},
"buttons": {
"alignment": "left"
},
"card": false
}

alignmentAndSpacing 섹션 내에서 padding 속성을 사용하여 개체, 카드 컨테이너 또는 콘텐츠 블록에 대한 안쪽 여백을 정의할 수 있습니다.

안쪽 여백 속성

• left: 왼쪽의 안쪽 여백(픽셀 단위).
• right: 오른쪽의 안쪽 여백(픽셀 단위).
• top: 위쪽의 안쪽 여백(컨텍스트에 따라 픽셀 또는 백분율 단위).
• bottom: 아래쪽의 안쪽 여백(컨텍스트에 따라 픽셀 또는 백분율 단위).
• isDTMLinked: 안쪽 여백이 다른 장치 유형(예: 데스크톱, 태블릿, 모바일)에 연결되는지 여부를 결정하는 부울 값입니다.
• tablet: 태블릿에 대한 장치별 안쪽 여백(예: 위쪽).
• mobile: 모바일 장치용 장치별 안쪽 여백(예: 위쪽).

예:

"alignmentAndSpacing": { "padding": { "left": 10, "right": 10, "top": 50, "bottom": 50, "isDTMLinked": false, "tablet": { "top": 80 }, "mobile": { "top": 80 } } }

자동 맞춤 - 콘텐츠 블록에만 적용됩니다. 사용 가능한 공간에 자동으로 맞춰집니다.

예:

"alignmentAndSpacing": { "autoFit": false, "padding": { "left": 10, .... } },

텍스트 블록에만 적용할 수 있습니다. 예:

"customProperties":{

"textProps": {

        "listProps":{

          "listDepth":4,

          "listColor": "#EB2699",

          "listSize":"120%",

          "listType":"OrderedListRoman1"

        }

}

  }

"imageHeight"

"imageAspectRatio"

"imageBehavior"

이미지 콘텐츠 블록과 이미지 격자 콘텐츠 블록에만 적용됩니다. "imageBehavior"가 "IG_SCALE"로 설정된 경우 "imageAspectRatio"를 사용하여 다양한 뷰포트에서 개체를 크기 조정합니다. 그러나 "IG_FIXED_HEIGHT"로 설정된 경우 "imageHeight" 속성이 지정됩니다.

예:

{

"customProperties": {

        "alignmentAndSpacing": {

        .....

        "imageHeight": 768,

        "imageAspectRatio": 3.415,

        "imageBehavior": "IG_SCALE"

      }

동영상 카드 컨테이너에만 적용됩니다. 이것은 콘텐츠 블록에서 동영상 개체의 높이를 정의합니다. 예:

{"tag": "videoCard",

      "customStyles": {

        ...

        },

             "customProperties": {....

            "videoHeight": 400

      }

    }

문자 및 시나리오 콘텐츠 블록에만 적용됩니다. 

•  "imageHeight" - 콘텐츠 블록에 있는 문자의 기본 높이입니다.
•  "minImageHeight" - 크기 조정 시 이것은 개체에 대해 유지되는 최소 높이입니다.

예제는 다음과 같습니다.

{

"tag": "character-block-container",

      "customStyles": {

       ......

      "customProperties": {

        "imageHeight": 600,

        "minImageHeight": 200

}

}

질문 슬라이드의 [자막] 개체에만 적용됩니다. 위치는 질문 슬라이드에서 자막의 위치를 정의합니다.

• 위 
• 가운데
• 아래쪽

예:

 {

      "tag": "slide-item-question-caption",

      "customProperties": {

        "position": 1

      },

}