Show Menu
화제×

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

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

인라인 CSS 속성 적용

구성 요소에 인라인 스타일을 추가하려면:
  1. 양식 편집기에서 양식을 열고 모드를 스타일 지정 모드로 변경합니다. 모드를 스타일 모드로 변경하려면 페이지 도구 모음에서 > 스타일을 누릅니다 .
  2. 페이지에서 구성 요소를 선택하고 편집 단추를 . 스타일 속성이 세로 막대에 열립니다.
    세로 막대의 양식 계층 트리에서 구성 요소를 선택할 수도 있습니다. 세로 막대에서 양식 계층 트리를 양식 개체로 사용할 수 있습니다.
    세로 막대에서 구성 요소를 선택할 수도 있습니다. 스타일 모드에서는 양식 개체 아래에 나열된 구성 요소를 볼 수 있습니다. 하지만 세로 막대의 # 목록에는 필드 및 패널과 같은 구성 요소가 표시됩니다. 필드 및 패널은 텍스트 상자 및 라디오 버튼과 같은 구성 요소를 포함할 수 있는 일반 구성 요소입니다.
    세로 막대에서 구성 요소를 선택하면 나열된 모든 하위 구성 요소와 선택한 구성 요소의 속성이 표시됩니다. 특정 하위 구성 요소를 선택하고 스타일을 지정할 수 있습니다.
  3. 세로 막대의 탭을 클릭하여 CSS 속성을 지정합니다. 다음과 같은 속성을 지정할 수 있습니다.
    • 차원 및 위치(표시 설정, 패딩, 높이, 너비, 여백, 위치, z-인덱스, 부동, 지우기, 오버플로우)
    • 텍스트(글꼴 모음, 두께, 색상, 크기, 선 높이 및 정렬)
    • 배경(이미지 및 그라디언트, 배경색)
    • 테두리(너비, 스타일, 색상, 반경)
    • 효과(그림자, 불투명도)
    • 고급(구성 요소에 대한 사용자 정의 CSS를 작성할 수 있도록 해줍니다.)
  4. 마찬가지로 위젯, 캡션 및 도움말과 같은 구성 요소의 다른 부분에 스타일을 적용할 수 있습니다.
  5. 완료를 눌러 변경 사항을 확인하거나 취소를 눌러 변경 사항을 취소합니다.

예:필드 구성 요소의 인라인 스타일

다음 이미지는 인라인 스타일이 적용된 전과 후 텍스트 필드를 나타냅니다.
인라인 스타일 속성을 적용하기 전에 텍스트 상자 구성 요소
다음 CSS 속성을 적용한 후 다음 이미지에 표시된 텍스트 상자 스타일의 변경 사항을 확인할 수 있습니다.
선택기
CSS 속성
효과
필드
테두리
테두리 너비 = 2px
테두리 스타일=단색
테두리 색상=#1111
필드 주위에 검정 2px 너비 테두리 만들기
텍스트 상자
background-color
#6495ED
배경색을 CornflowerBlue(#6495ED)로 변경합니다.
참고:값 필드에서 색상 이름 또는 해당 16진수 코드를 지정할 수 있습니다.
레이블
크기 및 위치 > 너비
100px
레이블의 너비를 100px로 수정
필드 도움말 아이콘 텍스트 > 글꼴 색상 #2ECC40 도움말 아이콘 얼굴의 색상을 변경합니다.
자세한 설명
text-align
가운데
자세한 설명을 가운데에 맞춥니다.
인라인 스타일이 적용된​ 후 텍스트 상자 ​스타일:인라인 스타일 속성을 적용한 후 텍스트 상자 구성 요소
위의 단계에 따라 패널, 전송 단추 및 라디오 버튼과 같은 다른 구성 요소를 선택하고 스타일을 지정할 수 있습니다.
스타일 속성은 선택한 구성 요소에 따라 다릅니다.