컨테이너 스타일 지정

매쉬업 스타일 테마를 통해 또는 스타일 속성 패널에서 컨테이너에 직접 스타일을 적용할 수 있습니다. 스타일 속성을 사용하면 특정 위젯에 대한 전역 테마 스타일이 무시됩니다. 기본적으로 컨테이너는 매쉬업 스타일 테마를 사용하여 스타일 지정되지만 스타일 정의를 사용할 수도 있습니다. 속성 패널의 UseTheme 속성은 컨테이너에 대한 테마 모드를 제어합니다.

컨테이너에 대한 스타일 테마 속성을 표시하려면 다음을 수행합니다.

1. 탐색기 패널에서 컨테이너를 선택합니다.

◦ 또는 컨테이너 내부의 빈 영역을 클릭합니다.

2. 스타일 속성 패널을 클릭합니다.

3. 기본 상태를 확장합니다. 스타일 속성은 Container 섹션 아래에 나열됩니다.

스타일 테마 스타일에서 스타일 정의로 전환할 수 있습니다. 스타일 정의를 사용하려면 다음을 수행합니다.

1. 컨테이너를 선택합니다.

2. 속성 패널에서 UseTheme 확인란의 선택을 취소합니다.

3. 스타일 속성 패널을 클릭합니다.

이제 스타일 속성 대신 컨테이너에 대한 스타일 정의가 표시됩니다.

사용자 정의 CSS

사용자 정의 CSS, 스타일 테마 및 스타일 속성과 같은 다양한 스타일 조합을 컨테이너에 적용할 수 있습니다. 다음은 스타일 지정 규칙 우선 순위를 내림차순으로 정리한 목록입니다.

우선 순위	스타일 지정 방법	설명
가장 높음	스타일 속성	스타일 속성 패널을 사용하여 컨테이너에 적용되는 스타일입니다. 스타일 속성을 사용하여 스타일 테마에서 적용된 기본 스타일을 재정의할 수 있습니다.
	매쉬업 사용자 정의 CSS	매쉬업 엔티티의 사용자 정의 CSS 탭에 적용되는 CSS 규칙입니다. 매쉬업 CSS 규칙은 두 규칙의 특이성이 동일한 경우 스타일 테마 CSS 규칙을 재정의합니다.
	스타일 테마 사용자 정의 CSS	스타일 테마 엔티티의 사용자 정의 CSS 탭에 적용되는 CSS 규칙입니다.
가장 낮음	스타일 테마	매쉬업에 적용된 스타일 테마에서 상속된 스타일입니다. 테마를 사용하여 매쉬업의 모든 컨테이너에 일관된 기본 스타일을 적용할 수 있습니다.

일반적으로 매쉬업 수준의 CSS는 스타일 테마 CSS보다 우선 순위가 높습니다. 그러나 CSS 규칙의 특수성에 따라 우선 순위가 변경될 수 있습니다. 예를 들어 다음과 같이 속성에 !important 규칙을 추가하여 사용자 정의 CSS 규칙의 특수성을 높일 수 있습니다.

.containerClass > .widget-content {
margin: 50px !important;
padding: 25px !important;
}

사용자 정의 CSS 규칙을 작성하는 대신 스타일 테마 및 스타일 속성을 사용하는 것이 좋습니다.

스타일 속성

다음과 같은 스타일 속성을 지정할 수 있습니다.

속성	설명
background	컨테이너의 배경색입니다.
border-color	테두리 선의 색입니다.
border-radius	테두리 코너의 반지름입니다. 이 속성은 컨테이너의 네 가지 코너 모두에 적용됩니다.
border-style	테두리 선의 스타일입니다. 이 스타일을 Dotted, Dashed, Solid, Double, Groove, Ridge, Inset, Outset, Inherit 또는 None으로 설정할 수 있습니다.
border-width	테두리 선의 너비입니다.

스타일 속성을 사용하여 ThingWorx 9.3.3 이상에서 다음 속성을 통해 컨테이너의 안쪽 여백을 구성할 수 있습니다.

• padding-bottom

• padding-left

• padding-right

• padding-top

자세한 내용은 컨테이너의 여백 및 안쪽 여백 구성을 참조하십시오.

컨테이너 스타일 속성 사용자 정의

다음 표에는 flexcontainer 요소에 대한 스타일 속성 값이 스타일이 지정된 컨테이너에 대한 사용자 정의 값과 비교되어 나열되어 있습니다.

스타일/속성	기본값	스타일 지정
속성	• background - #ffffff • border-color - inherit • border-radius - None • border-style - None • border-width - None	• background - #cccccc • border-color - #AAE09F • border-radius - 4px • border-style - Solid • border-width - 4px
미리 보기

기본 스타일 속성 값은 매쉬업 스타일 테마에서 파생됩니다.

도움이 되셨나요?