단계 12: 사용자정의 스타일 정의

직접 생성한 구성요소는 사이트에 사용된 테마에서 design.json 및 design.css 파일의 다른 구성요소처럼 취급됩니다.

사용자정의 구성요소에 고유의 스타일을 추가하려면 구성요소를 등록할 때 사용한 id 값을 확인하십시오. appinfo.json 파일에서 "id": "hello-world"였습니다.

이 값을 사용하여 테마의 design.json 파일을 편집하고 해당 id에 대해 지원할 새 스타일을 추가합니다. 예를 들어, 테마의 /designs/default/design.json 파일을 편집하고 이 코드를 추가합니다.

"hello-world": {
  "styles": [{
    "name": "Plain",
    "class": "hello-world-default-style"
  },
  {
    "name": "Gothic",
    "class": "hello-world-gothic-style"
  }]
},

구성요소에 대해 설정 패널을 불러오면 이제 스타일 탭에 나열된 두 옵션으로 Plain(기본값) 및 Gothic이 표시되어야 합니다. 그러나 이 옵션 간을 전환해도 실제로 design.css 파일에 나열된 스타일 클래스를 정의할 때까지 아무 것도 수행되지 않습니다.

테마의 design.css 파일을 편집하고 스타일의 CSS(종속형 스타일시트) 클래스를 추가합니다. 예를 들어, 테마의 /designs/default/design.css 파일을 편집하고 이 코드를 추가합니다.

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

.hello-world-gothic-style .scs-component-content {
  font-family: "Century Gothic","CenturyGothic","AppleGothic",sans-serif; 
  font-size: 32px;
  font-weight: bold; }

Oracle Content Management 인스턴스 서버에 파일을 저장하고 동기화합니다.