응용 양식 구성 요소의 인라인 스타일

테마 편집기를 사용하여 스타일을 지정하여 응용 양식의 전체 모양과 스타일을 정의할 수 있습니다. 또한 개별 적응형 양식 구성 요소에 인라인 CSS 스타일을 적용할 수 있으며 변경 내용을 바로 미리 볼 수 있습니다. 인라인 스타일은 테마에 제공된 스타일을 재정의합니다.

인라인 CSS 속성 적용

구성 요소에 인라인 스타일을 추가하려면:

양식 편집기에서 양식을 열고 모드를 스타일 모드로 변경합니다. 모드를 스타일 모드로 변경하려면 페이지 도구 모음에서 > 스타일을 탭합니다.
페이지에서 구성 요소를 선택하고 편집 단추 를 누릅니다. 스타일 지정 속성이 사이드바에 열립니다.

세로 막대의 양식 계층 트리에서 구성 요소를 선택할 수도 있습니다. 양식 계층 트리는 세로 막대에서 양식 개체로 사용할 수 있습니다.

사이드바에서 구성 요소를 선택할 수도 있습니다. 스타일 모드에서는 양식 개체 아래에 나열된 구성 요소를 볼 수 있습니다. 그러나 세로 막대의 [양식 개체] 목록에는 필드 및 패널과 같은 구성 요소가 표시됩니다. 필드 및 패널은 텍스트 상자 및 라디오 버튼과 같은 구성 요소를 포함할 수 있는 일반 구성 요소입니다.

세로 막대에서 구성 요소를 선택하면 나열된 모든 하위 구성 요소와 선택한 구성 요소의 속성이 표시됩니다. 특정 하위 구성 요소를 선택하고 스타일을 지정할 수 있습니다.
세로 막대에서 탭을 클릭하여 CSS 속성을 지정합니다. 다음과 같은 속성을 지정할 수 있습니다.
- Dimension 및 위치(표시 설정, 패딩, 높이, 너비, 여백, 위치, z-인덱스, 부동, 지우기, 오버플로우)
- 텍스트(글꼴 모음, 두께, 색상, 크기, 선 높이 및 정렬)
- 배경(이미지 및 그레이디언트, 배경색)
- 테두리(너비, 스타일, 색상, 반경)
- 효과(그림자, 불투명도)
- 고급(구성 요소에 대한 사용자 지정 CSS를 작성할 수 있음)
마찬가지로 위젯, 캡션 및 도움말과 같은 구성 요소의 다른 부분에 스타일을 적용할 수 있습니다.
완료를 눌러 변경 내용을 확인하거나 취소를 눌러 변경 내용을 취소합니다.

예:필드 구성 요소에 대한 인라인 스타일

다음 이미지는 인라인 스타일이 적용된 전후의 텍스트 필드를 나타냅니다.

인라인 스타일이 적용되기 전의 텍스트 상자 구성 요소

인라인 스타일 속성을 적용하기 전에 텍스트 상자 구성 요소

다음 CSS 속성을 적용한 후 다음 이미지에 표시된 텍스트 상자 스타일의 변경 사항을 확인할 수 있습니다.

선택기	CSS 속성	값	효과
필드	국경	테두리 너비 = 2px 테두리 스타일=단색 테두리 색상=#1111	필드 주위에 검정 2px 폭 테두리를 만듭니다.
텍스트 상자	background-color	#6495ED	배경색을 CornflowerBlue(#6495ED)으로 변경합니다. 참고:값 필드에 색상 이름 또는 해당 16진수 코드를 지정할 수 있습니다.
레이블	차원 및 위치 > 너비	100px	레이블의 너비를 100px로 수정
필드 도움말 아이콘	텍스트 > 글꼴 색상	#2ECC40	도움말 아이콘 현상의 색상을 변경합니다.
자세한 설명	text-align	가운데	도움말을 중심으로 긴 설명을 정렬합니다.