Vaadin은 풍부한 UI 컴포넌트를 제공하는 자바 기반의 웹 애플리케이션 프레임워크입니다. Vaadin을 사용하면 Java 코드로 UI를 작성할 수 있으며, 템플릿 또는 마크업 언어 없이 간단하게 UI를 작성할 수 있습니다. 이렇게 작성된 UI는 HTML 및 CSS로 변환되어 웹 브라우저에서 렌더링됩니다.
Vaadin은 기본적으로 기능적이고 실용적인 테마를 기본 제공합니다. 그러나 Vaadin의 테마와 스타일링 기능을 사용하면 UI를 맞춤화하고 고유한 모습을 만들 수 있습니다. 이를 통해 애플리케이션의 브랜딩과 일관성을 유지할 수 있습니다.
기본 테마 변경하기
Vaadin은 다양한 테마를 제공하며, 기본 테마는 “Lumo”입니다. Lumo 테마는 간결하고 모던한 디자인을 갖추고 있어 대부분의 경우에 적합합니다. 그러나 원한다면 다른 테마로 변경할 수도 있습니다.
Vaadin의 테마는 아래와 같은 순서로 지정할 수 있습니다.
@Theme("my-theme")
public class MyUI extends UI {
// ...
}
위 예제에서 “my-theme”은 사용자 정의 테마의 이름을 나타냅니다. 이 테마는 my-theme.scss 라는 파일로 작성할 수 있습니다. 이 파일을 생성하고 내용을 작성한 후, Vaadin 컴파일러를 실행하여 CSS로 컴파일할 수 있습니다.
컴포넌트 스타일링하기
Vaadin의 컴포넌트는 각자의 스타일 클래스를 가지고 있어 개별적으로 스타일링할 수 있습니다. 스타일 클래스에는 CSS로 정의된 스타일 속성이 포함되어 있습니다. 이를 통해 컴포넌트의 배경색, 텍스트 스타일, 여백 등을 조정할 수 있습니다.
예를 들어 Button 컴포넌트를 스타일링하고 싶다면, 다음과 같이 스타일 클래스를 사용할 수 있습니다.
Button button = new Button("Click me");
button.addClassName("my-button");
위의 예제에서 “my-button”은 사용자 정의 스타일 클래스의 이름입니다. 이렇게 추가된 스타일 클래스를 가지고 CSS 파일에서 해당 컴포넌트를 선택하여 원하는 스타일을 적용할 수 있습니다.