스타일을 사용하여 지정하여 적응형 양식의 전체 모양과 스타일을 정의할 수 있습니다 테마 편집기. 또한 개별 적응형 양식 구성 요소에 인라인 CSS 스타일을 적용하고 변경 사항을 즉시 미리 볼 수 있습니다. 인라인 스타일은 테마에 제공된 스타일을 재정의합니다.
구성 요소에 인라인 스타일을 추가하려면 다음을 수행하십시오.
양식 편집기에서 양식을 열고 모드를 스타일 지정 모드로 변경합니다. 모드를 스타일 지정 모드로 변경하려면 페이지 도구 모음에서 를 누릅니다 > 스타일.
페이지에서 구성 요소를 선택하고 편집 단추를 누릅니다 . 사이드바에서 열리는 스타일 지정 속성입니다.
사이드바의 양식 계층 트리에서 구성 요소를 선택할 수도 있습니다. 양식 계층 트리는 사이드바의 양식 개체로 사용할 수 있습니다.
사이드바에서 구성 요소를 선택할 수도 있습니다. 스타일 모드에서는 양식 객체 아래에 나열된 구성 요소를 볼 수 있습니다. 그러나 사이드바의 양식 객체 목록에는 필드 및 패널과 같은 구성 요소가 나열됩니다. 필드 및 패널은 텍스트 상자 및 라디오 단추와 같은 구성 요소를 포함할 수 있는 일반적인 구성 요소입니다.
사이드바에서 구성 요소를 선택하면 나열된 모든 하위 구성 요소와 선택한 구성 요소의 속성이 표시됩니다. 특정 하위 구성 요소를 선택하고 스타일을 지정할 수 있습니다.
사이드바의 탭을 클릭하여 CSS 속성을 지정합니다. 다음과 같은 속성을 지정할 수 있습니다.
마찬가지로 위젯, 캡션 및 도움말과 같은 구성 요소의 다른 부분에 스타일을 적용할 수 있습니다.
탭 완료 변경 사항을 확인하려면 취소 변경 사항을 취소하려면
다음 이미지는 인라인 스타일이 적용되기 전후의 텍스트 필드를 나타냅니다.
인라인 스타일 속성을 적용하기 전에 텍스트 상자 구성 요소
다음 CSS 속성을 적용한 후 다음 이미지에 표시된 텍스트 상자 스타일의 변경 사항에 주목하십시오.
선택기 |
CSS 속성 |
값 |
효과 |
필드 |
테두리 |
테두리 너비 = 2px 테두리 스타일=단색 테두리 색상=#1111 |
필드 주위에 검정 2px 너비 테두리를 만듭니다. |
텍스트 상자 |
background-color |
#6495ED |
배경색을 CornflowerBlue(#6495ED)으로 변경합니다 참고: 값 필드에 색상 이름 또는 16진수 코드를 지정할 수 있습니다. |
레이블 |
차원 및 위치 > 너비 |
100px |
레이블의 너비를 100px로 수정 |
필드 도움말 아이콘 | 텍스트 > 글꼴 색상 | #2ECC40 | 도움말 아이콘 화면의 색상을 변경합니다. |
긴 설명 |
text-align |
가운데 |
도움말을 가운데로 가져올 긴 설명을 맞춥니다. |
그림: 인라인 스타일 속성을 적용한 후 텍스트 상자 구성 요소
위의 단계에 따라 패널, 제출 단추 및 라디오 단추와 같은 기타 구성 요소를 선택하고 스타일을 지정할 수 있습니다.
스타일 지정 속성은 선택한 구성 요소에 따라 다릅니다.