1. 클래스 바인딩(Class Binding): Riot.js는 요소에 클래스를 동적으로 바인딩할 수 있는 기능을 제공합니다. 클래스를 바인딩하면 상황에 따라 요소의 스타일을 조절할 수 있습니다.

<my-component>
  <div class="{isRed ? 'red' : 'blue'}">Hello, Riot.js!</div>
</my-component>

위 예시에서 isRed 변수의 값에 따라 div 요소의 클래스가 동적으로 변경됩니다.

1. 스타일 태그(Style Tag): Riot.js는 컴포넌트 내에 스타일 태그를 사용할 수 있습니다. 스타일 태그를 이용하면 컴포넌트의 스타일을 모듈화하고 재사용할 수 있습니다.

<my-component>
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>

  <div class="{isRed ? 'red' : 'blue'}">Hello, Riot.js!</div>
</my-component>

위 예시에서 스타일 태그 안에 red와 blue 클래스를 정의하고, div 요소의 클래스를 동적으로 변경하여 스타일을 조절합니다.

1. 외부 스타일시트(External Stylesheet): Riot.js 컴포넌트는 외부 스타일시트를 사용할 수 있습니다. 외부 스타일시트를 이용하면 전역 스타일을 컴포넌트에 적용할 수 있으며, 관련된 스타일을 한 곳에서 관리할 수 있습니다.

<my-component>
  <link rel="stylesheet" href="styles.css">

  <div class="{isRed ? 'red' : 'blue'}">Hello, Riot.js!</div>
</my-component>

위 예시에서 styles.css 파일에 정의된 스타일이 my-component 컴포넌트에 적용됩니다.

Riot.js는 클래스 바인딩, 스타일 태그, 외부 스타일시트를 통해 다양한 스타일링 기능을 제공합니다. 이를 통해 컴포넌트의 스타일을 조절하고 유지보수를 용이하게 할 수 있습니다.

참고문서:

• Riot.js 공식 문서 (https://riot.js.org/guide/#css-and-styling)
• Riot.js GitHub 레포지토리 (https://github.com/riot/riot)