모든 내장 사이트 구성요소는 유사한 CSS 클래스 구조를 공유합니다.
각 구성요소는 다음 세 가지 CSS 클래스가 가장 바깥쪽 <div> 요소에 적용됩니다.
scs-component scs-type design-style
type은 구성요소 유형(예: image, gallery 또는 divider)입니다. design-style은 테마 파일에 정의된 대로 구성요소에 선택된 스타일 클래스입니다.
테마 스타일 기본사항
테마의 design.json 파일은 각 구성요소 유형(예: button 또는 image)에 적용할 수 있는 모든 스타일(frame, shadow, highlighted 등)을 나열합니다. 각 스타일에는 표시 이름과 클래스 이름이 있습니다. 표시 이름은 설정 패널의 스타일 탭에 표시됩니다. 클래스 이름은 테마의 design.css 파일에서 CSS 선택기를 나타냅니다. 예를 들어, button 구성요소의 항목은 다음과 같습니다.
"scs-button": {
"styles": [{
"name": "COMP_STYLE_ALTA_SMALL",
"class": "scs-button-default-style"
},
{
"name": "COMP_STYLE_ALTA_LARGE",
"class": "scs-button-style-2"
},
{
"name": "COMP_STYLE_SIMPLE",
"class": "scs-button-style-3"
}
]
},
내장 구성요소의 이름은 번역되므로 리소스 번들에서 스타일 이름을 가져오는 키가 표시됩니다. 페이지에 button 구성요소를 추가하고 설정 > 스타일 패널에서 단순 스타일을 선택하면 design.json 파일은 표시 이름 단순(키 COMP_STYLE_SIMPLE)을 클래스 이름 scs-button-style-3과 연관시킵니다. button은 다음 클래스로 렌더링됩니다.
scs-component scs-button scs-button-style-3
주어진 구성요소에 선택한 스타일이 없으면 기본 스타일인 scs-type-default-style이 사용됩니다. 앞의 예제에서 button은 다음 클래스로 렌더링됩니다.
scs-component scs-button scs-button-default-style
scs-component-content 스타일
모든 내장 구성요소에 대해 이전에 언급한 scs-component <div> 안에 CSS 클래스 scs-component-content와 함께 content <div>가 있습니다. 다시 말해, 다음과 같습니다.
scs-component scs-type design-style scs-component-content
design.css 파일에서 scs-component-content 클래스는 구성요소 주위의 "상자" 스타일링에 사용되기도 합니다(예: 테두리 또는 그림자 적용).
내장 comp.css 파일에서 공통 scs-component-content 클래스는 다른 CSS 속성 중에서 position:relative 및 display:inline-block으로 정의됩니다.
scs-component-content는 각 구성요소 주위의 "상자" 스타일링에 유용하지만, 구성요소를 완전히 스타일링하려면 구성요소별 클래스가 필요합니다. 구성요소별 스타일링을 참조하십시오.