2D 단추 스타일에 CSS 사용
스타일 탭에서 사용자의 경험에 대한 CSS 응용 프로그램 스타일을 정의할 수 있습니다. 스타일 옆의 드롭다운 화살표를 클릭한 다음 응용 프로그램을 클릭하면 스타일 편집기가 표시됩니다.
필요한 사항
• ThingWorx Studio 액세스
• 사용자의 경험에 연결할 ThingMark
• experience service 액세스
단계
1. ThingWorx Studio를 열고 새 모바일, AR 프로젝트를 만듭니다. ThingWorx Studio가 열리면 2D 캔버스로 전환합니다.
2. 두 단추 위젯을 캔버스로 드래그 앤 드롭합니다.
3. 캔버스에서 첫 번째 단추를 선택합니다. 텍스트 필드에 Play를 입력합니다.
캔버스에서 두 번째 단추를 선택합니다. 텍스트 필드에 Stop를 입력합니다.
4. 프로젝트 창에서 스타일 아래의 응용 프로그램을 클릭합니다.
응용 프로그램 스타일 편집기가 나타납니다. 여기서 CSS 클래스를 정의합니다.
5. 편집기에 다음을 입력합니다.
.my-button1 {
font-family: Century Gothic;
color: white;
background-color: green;
font-weight: bold;
font-style: italic;
}
.my-button2 {
font-family: Century Gothic;
color: white;
background-color: red;
font-weight: bold;
font-style: italic;
}
6. CSS 클래스를 정의했으면 저장을 클릭합니다. 저장이 완료되면 보기 아래의 홈을 클릭한 다음 2D 캔버스로 돌아갑니다.
7. 재생 단추를 클릭합니다. 세부 정보 창의 클래스 필드에 my-button1를 입력합니다.
중지 단추를 클릭합니다. 세부 정보 창의 클래스 필드에 my-button2를 입력합니다.
다양한 클래스를 정의해 보고 색상, 글꼴 등을 다양하게 테스트해 보십시오! 다양한 CSS 스타일에 대한 자세한 내용은
w3schools.com에서 확인하실 수 있습니다.
상위 주제
