구성요소별 스타일링

이미지 구성요소

이미지 구성요소는 scs-component-content 클래스 아래에 다음 CSS 클래스 구조를 갖습니다.

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

scs-image-image 클래스는 <img> 태그 자체에 적용됩니다. 캡션이 있는 경우 scs-image-caption 클래스는 캡션 스타일링에 사용됩니다.

scs-image-link 클래스는 이미지에 첨부된 링크가 있는 경우에만 제공됩니다. 이 클래스나 scs-image-container 클래스는 일반적으로 사용자정의 스타일링이 필요하지 않습니다.

기본적으로 이미지 캡션은 이미지 하단에 펼쳐진 반투명 오버레이로 렌더링됩니다.

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

이미지 상단에 캡션을 배치하고 색상을 변경하려면 design.json 파일에서 이미지 구성요소에 다른 스타일을 추가하고 design.css 파일에서 CSS를 정의합니다.

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

단추 구성요소

단추 구성요소는 다음 클래스 구조를 갖습니다.

scs-button-button
    scs-button-text

scs-button-button 클래스는 단추 스타일의 누르기 가능한 <div>입니다. scs-button-text 클래스는 단추 안의 텍스트 스타일링에 사용됩니다.

예를 들어, design.json 파일에 다른 스타일을 추가하고 design.css 파일에서 CSS를 정의하여 단추 구성요소의 모양 변경을 테스트합니다.

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

문서

문서 구성요소는 다음 클래스 구조를 갖습니다.

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

scs-document-container 클래스는 문서 뷰어를 래핑하며 일반적으로 스타일링하지 않습니다.

갤러리

갤러리 구성요소에는 기본 JSSOR 슬라이더 구성요소를 래핑하는 단일 클래스가 있습니다.

scs-gallery-container 

JSSOR 슬라이더는 스타일링 가능한 여러 클래스를 사용합니다.

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

갤러리 그리드

갤러리 그리드 구성요소에 사용되는 클래스는 설정 패널에서 선택한 레이아웃과 자르기에 따라 다릅니다.

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

갤러리 그리드에 선택된 자르기 및 레이아웃 설정에 따라 layout 값은 늘이기, 자르기, 맞춤 또는 흐름이 됩니다.

scs-gallerygrid-cell 클래스는 열 레이아웃에만 제공됩니다.

소셜 표시줄

소셜 표시줄 구성요소는 다음 클래스 구조를 갖습니다.

scs-socialbar-container
  scs-socialbar-icon

scs-socialbar-icon 클래스는 소셜 표시줄의 각 <img> 태그에 적용됩니다.

단락

단락 구성요소에는 실제 단락 텍스트를 래핑하는 단일 클래스만 있습니다.

scs-paragraph-text 

예를 들어, 단락 구성요소에 입력한 텍스트에 engraved-text-on-metal 효과를 주려면 design.json 파일에 다른 스타일 클래스를 추가하고 design.css 파일에서 CSS를 정의합니다.

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

또는 화려하게 보이려면 다음 예제와 같이 사용하십시오.

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

제목

제목 구성요소에도 실제 텍스트를 래핑하는 단일 클래스만 있습니다.

scs-title-text 

맵

맵 구성요소에는 맵 표현을 래핑하는 단일 클래스가 있습니다.

scs-map-content

이 클래스는 일반적으로 스타일링하지 않습니다.

사용자정의 로컬 구성요소

사용자정의 로컬 구성요소에는 실제 구성요소를 래핑하는 단일 클래스만 있습니다.

scs-custom-component-wrapper 

사용자정의 로컬 구성요소에 대한 사용자정의 뷰를 렌더링할 때 사용할 CSS 스타일을 완전히 제어할 수 있습니다. 로컬 구성요소는 인라인으로 렌더링됩니다. 즉, 테마 또는 design.css 파일에 정의된 CSS 스타일을 직접 적용할 수 있습니다.

사용자정의 원격 구성요소

사용자정의 원격 구성요소에는 iframe을 래핑하는 단일 클래스만 있습니다.

scs-app-iframe-wrapper

사용자정의 원격 구성요소에 정의된 CSS 스타일을 적용하는 것 외에, Sites SDK를 활용하여 호스트 사이트에서 design.css 파일을 인출할 수 있습니다.

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

따라서 구성요소 스타일을 호스트 스타일에서 상속하도록 만들 수 있습니다.

구분선

구분선 구성요소에 대한 구성요소별 클래스는 없지만 <hr> 태그 자체를 스타일링할 수 있습니다.

예를 들어, 점선 구분선을 생성할 수 있습니다.

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

비디오, YouTube, 스페이서

비디오, YouTube 또는 스페이서 구성요소에 대한 구성요소별 클래스는 없습니다.