Slate 위젯의 사용자 스타일

위젯 하나를 선택하면 오른쪽 Styles 탭 아래에서 custom styles를 편집할 수 있습니다. 이 스타일은 다른 위젯과 공유하지 않습니다. 개별 위젯의 배경, 글꼴, 테두리와 정렬을 바꾸고 canvas에서 확인하는 용도입니다.

개별 스타일과 앱 스타일시트가 같은 요소의 같은 속성을 바꾸면 충돌할 수 있습니다. 이런 충돌을 피하려면 개별 스타일은 개발과 반복 조정에만 사용하고, 복잡한 스타일은 중앙 Styles editor에서 관리하는 것이 좋습니다.

ID로 한 위젯에 적용

Text 위젯 w1에 Hello World를 넣고 다음 스타일을 적용합니다.

#w1 {
  background: #d9eef2;
  font-size: 30px;
  color: #1685ca;
  border: 2px solid #89bff5;
  font-family: Times;
  text-align: center;
}

두 번째 Text 위젯에 Slate is awesome을 넣어도 #w1 규칙은 그 위젯에 적용되지 않습니다. #w1, #w2처럼 여러 ID를 지정할 수 있지만 같은 유형의 위젯이 계속 늘어난다면 요소나 공통 class 선택기를 사용합니다.

요소 선택기

Styles editor에서 sl-markdown 요소에 적용하면 같은 요소를 사용하는 Markdown 위젯에 공통으로 적용됩니다. 실제 렌더 요소는 Inspector에서 확인할 수 있습니다.

sl-markdown {
  background: #d9eef2;
  font-size: 30px;
  color: #1685ca;
  border: 2px solid #89bff5;
  font-family: Times;
  text-align: center;
}

세 번째 같은 유형의 위젯에도 이 규칙이 적용됩니다.

공통 스타일 위에 예외 적용

위의 sl-markdown 규칙을 유지하고 다음 #w1 규칙을 추가합니다.

#w1 {
  background: #f1cbd5;
  font-size: 30px;
  color: #ca1629;
  border: 2px solid #eb5c81;
  font-family: Helvetica;
  text-align: center;
}

이 예에서는 ID 선택자가 요소 선택자보다 구체적이므로 w1만 다른 스타일을 사용합니다.