적응형 양식에 대한 스타일 지정 구문

전제 조건

CSS 및 LESS 프레임워크에 대한 지식.

사용자 지정할 수 있는 항목

이 문서에는 응용 양식의 공개적으로 사용 가능한 css 클래스가 나열됩니다. 이러한 클래스를 활용하여 적응형 양식의 다양한 구성 요소에 스타일을 지정할 수 있습니다. 경고를 표시하는 대화 상자 및 상태 표시줄과 같은 작성 구성 요소의 스타일이 이 문서의 범위를 벗어납니다. 테마 편집기를 사용하여 구성 요소의 스타일을 지정할 수 없는 경우에만 이러한 스타일 구문을 사용하여 스타일(CSS 또는 Less 사용)을 만들 수 있습니다.

적응형 양식에서 스타일 사용자 지정

LESS 프레임워크는 사용 사례를 단순화하여 적응형 양식의 스타일을 사용자 지정합니다. 프레임워크를 사용하면 변수 및 함수(mixin) 세트를 사용하여 스타일을 정의할 수 있습니다. LESS 프레임워크는 번들로 제공되는 코드의 크기를 줄이고 재사용 가능성을 높이는 데 도움이 됩니다.

다음과 같은 방법으로 적응형 양식 스타일을 사용자 지정할 수 있습니다.

  • 테마 변경
  • 구성 요소의 스타일 변경

테마 변경

적응형 양식의 테마를 변경하여 적응형 양식이 포함된 웹 페이지와 모양이 일치하는지 확인할 수 있습니다.

CSS 속성을 사용하는 적응형 양식의 전체 모양 변경 사항은 일반적으로 테마 변경 사항의 일부입니다. 구성 요소의 레이아웃 및 배치 변경과 같은 적응형 양식의 로그 "확인 및 느낌"에 대한 주요 변경 사항은 테마 변경 사항으로 간주되지 않습니다.

부트스트랩을 기반으로 하는 다음 CSS 속성 세트는 웹 페이지의 테마를 정의합니다.

  • 배경색
  • 테두리(유형, 색상, 두께)
  • 글꼴 색상
  • 사진 간격
  • 여백
  • 글꼴 크기
  • 라인 높이

현재 LESS 변수는 적응형 양식에 있는 다양한 요소의 이러한 속성에 대해서만 정의됩니다.

구성 요소 스타일 변경

요소의 모양, 레이아웃, 위치 지정 및 가시성을 변경할 수 있습니다. 이 작업을 수행하려면 이 문서에 나열된 스타일 구문을 포함하도록 사용자 지정 .css 파일을 만들거나 업데이트하십시오.

적응형 양식에 스타일을 적용하려면 편집할 적응형 양식을 열고 적응형 양식 컨테이너의 속성을 열고 기본 탭에서 사용자 지정 CSS 파일의 경로를 지정합니다. 사용자 지정 .css 파일에 나열된 구문으로 대체되고 적응형 양식의 기본 스타일 구문입니다.

구성 요소

이 문서에서 설명하는 구성 요소에는 사전 정의된 CSS 클래스가 있습니다. 변수를 편집하여 CSS 클래스의 스타일을 수정할 수 있습니다. 또는 전체 클래스를 다시 작성할 수 있습니다. 이 섹션에서는 변수를 사용하여 수정할 수 있는 구성 요소 및 스타일 내의 클래스에 대해 설명합니다.

컨테이너 스타일링

컨테이너는 최상위 구성 요소입니다. 다른 패널 및 필드는 컨테이너 구성 요소 아래에 있습니다.

CSS 클래스

guideContainerNode

변수 설명

변수 설명

container-bgColor

컨테이너의 배경색

container-padding

컨테이너 패딩

container-margin

컨테이너의 여백

container-fontColor

컨테이너의 글꼴 색상

필드 스타일링

적응형 양식에는 다양한 유형의 필드가 포함됩니다. 각 필드에는 고유한 클래스 이름(필드의 이름)이 있습니다. 필드에 공통 클래스 이름 guideFieldNode도 있습니다.

필드에는 레이블, 위젯, 도움말 설명(긴 설명과 짧은 설명 모두) 및 필드 도움말 아이콘(물음표)이 포함됩니다.

CSS 클래스

guideFieldNode

변수

설명

field-padding

필드의 패딩

field-error-font-color

필드의 오류 메시지의 글꼴 색상

field-error-font-size

필드의 오류 메시지의 글꼴 크기

레이블 스타일링

필드에 사용되는 HTML 요소 label​에는 레이블이 맨 위에 있는지 왼쪽에 있는지 여부에 따라 left 또는 top​이 포함됩니다.

CSS 클래스

guideFieldLabel

변수

설명

label-font-color

필드 레이블의 글꼴 색상

label-font-size

필드 레이블의 글꼴 크기

label-line-height

 필드 레이블의 CSS 라인 높이 속성

label-font-weight

 필드 레이블의 CSS 글꼴 가중치 속성

label-margin

필드 레이블의 여백

레이블의 CSS 규칙은 guideFieldLabel 레이블을 사용하여 적용됩니다. 작성자인 경우 이 규칙을 무시하여 사용자 지정 변경 사항을 표시할 수 있습니다.

위젯 스타일

위젯은 유형에 따라 클래스도 포함합니다. 일반적으로 위젯에는 guideFieldWidget 클래스가 포함됩니다. HTML과 함께 제공되는 위젯은 일반적으로 표준 HTML 요소 입력을 사용하고 을 선택합니다. 스타일링이 그에 따라 수행됩니다. 변수를 변경하여 사용자 지정 위젯의 스타일을 지정할 수 없습니다.

CSS 클래스

guideFieldWidget

변수

설명

widgets-bg-color

 위젯의 배경색(확인란 및 라디오 단추에는 작동하지 않음)

widgets-border-color

위젯의 테두리 색상

widgets-border-thickness

위젯의 테두리 크기

widgets-border-radius

위젯의 테두리 반경

widgets-border-type

위젯의 테두리 유형입니다

widget-border-focus-type

위젯 테두리에 대한 포커스 유형

widgets-border

위젯의 통합된 테두리 스타일

widgets-font-color

위젯 내의 텍스트 색상

widgets-font-size

위젯 내의 텍스트 크기

widgets-line-height

 위젯의 CSS 라인 높이 속성

widgets-padding

위젯의 CSS 패딩 속성

widgets-focus-border-color

위젯이 포커스에 있을 때 테두리 색상

widgets-mandatory-border-color

필수 필드에 대한 위젯의 테두리 색입니다

widgets-mandatory-bg-color

필수 필드에 대한 위젯의 배경색입니다

widgets-disabled-bg-color

필드를 사용할 수 없을 때 위젯의 배경색입니다

widgets-disabled-font-color

필드를 사용할 수 없을 때 위젯의 글꼴 색입니다

widgets-disabled-border-color

필드가 비활성화되어 있으면 위젯의 테두리 색입니다

widget-height

 위젯의 높이(확인란 및 라디오 단추에 대해 작동하지 않음)

checkbutton-height

확인란 및 라디오 단추의 높이입니다.

listboxwidget-height

다중 선택 드롭다운에 대한 최대 높이

위젯 스타일링 의 제한 사항

집중, 필수 및 비활성화 필드의 스타일링은 변수를 사용하여 제한됩니다. 그러나 스타일을 재정의하여 변경할 수 있습니다. 변수를 사용하는 제한 사항은 주로 변수 수를 확인하기 위해 제공됩니다. 이전에 논의한 주 중 하나에 있기 때문에 필드의 모양이 크게 변경되면 제한이 완화될 수 있습니다.

도움말 설명

작성자는 짧은 설명 및 긴 설명 구성 요소를 사용하여 필드에 도움말 컨텐츠를 지정할 수 있습니다. 두 구성 요소 모두 설명 유형에 따라 공통 클래스 .guideHelpDescription 및 다른 클래스 .long/ .short가 있습니다. 설명 스타일을 재정의하기 위해 도움말 컨텐츠가 단락 요소로 묶입니다. 다음 표에 설명된 대로 도움말 설명(길고 짧은)은 위젯으로 시작하는 변수를 사용하여 수정됩니다.

변수

설명

widgets-help-long-bg-color

위젯의 배경색 긴 도움말

widgets-help-long-border-color

위젯의 테두리 색상 긴 도움말

widgets-help-long-border-indicator-color

위젯의 긴 도움말의 왼쪽 표시기 테두리 색입니다.

widgets-help-short-bg-color

위젯의 배경색 짧은 도움말

widgets-help-short-color

위젯의 글꼴 색상 도움말

widgets-help-short-tooltip-bg-color

위젯의 짧은 도구 설명 배경색 도움말

widgets-help-short-tooltip-color

위젯의 글꼴 색상 짧은 도구 설명 도움말

사용 약관

사용 약관(TnC ) 위젯을 사용하면 사용 조건을 지정할 수 있습니다. 다음 표에 설명된 변수를 사용하여 위젯을 사용자 지정할 수 있습니다.

변수

설명
tnc-unvisited 방문하지 않은 tnc 링크의 글꼴 색입니다.
tnc-visited 방문한 tnc 링크의 글꼴 색입니다.

단추

버튼도 위젯입니다. 그러나 위젯과 스타일이 약간 다릅니다. 적응형 양식에서 다음 중 어느 하나가 버튼을 구성합니다.

  • input[type = text]
  • 단추
  • class.button이 있는 요소

단추에 대한 HTML 코드:

<button type="button" >

<span class="iconButtonicon"></

span>

<span class="iconButtonlabel"></

span>

</button>

CSS 클래스

설명

iconButton-icon

단추에 대한 아이콘을 제공합니다

iconButton-label

스타일 단추 레이블/캡션

변수

설명

button-border-size

단추의 테두리 크기

button-border-type

테두리 유형

button-padding

단추에 대한 CSS 패딩 속성

button-font-size

단추의 글꼴 크기

button-background-color

단추의 배경색

button-font-color

단추의 글꼴 색상

button-border-color

단추의 테두리 색

button-large-padding

큰 단추에 대한 패딩(.buttonlarge 클래스가 있는 단추)

button-large-font-size

큰 단추의 글꼴 크기

button-small-padding

작은 단추에 대한 패딩(.buttonsmall 클래스가 있는 단추)

button-small-font-size

작은 단추의 글꼴 크기

button-info-background-color

유용한 단추의 배경색(.buttonadvertisive 클래스가 있는 단추)

button-info-font-color

유용한 단추의 글꼴 색상

button-info-border-color

유용한 단추의 테두리 색상

button-warning-background-color

경고 스타일의 단추에 대한 배경색(.buttonwarning 클래스가 있는 단추)

button-warning-font-color

경고 스타일 단추의 글꼴 색상

button-warning-border-color

경고 스타일 단추의 테두리 색

button-alert-background-color

경고 단추의 배경색(.buttonalert 클래스가 있는 단추)

button-alert-font-color

경고 단추의 글꼴 색상

button-alert-border-color

경고 단추의 테두리 색상

물음표

위젯의 경우, 작성자가 도움말 콘텐츠에 긴 설명을 추가하면 questionMark가 표시됩니다. 부트스트랩에 제공된 기본 아이콘이 사용됩니다. 사용자 정의 아이콘을 사용하기 위해 부트스트랩 아이콘을 사용자 정의할 수 있습니다.

CSS 클래스

guideHelpQuestionMark

변수

설명

questionmark-font-color

아이콘 색상

questionmark-hover-font-color

마우스를 위에 두면 아이콘의 색입니다

표

다음 변수를 사용하여 테이블의 머리글 및 본문 행에 대한 색상 테마를 변경할 수 있습니다.

변수

설명

table-header-bg-color

머리글 행의 배경색입니다. 기본값은 #333.
입니다.

table-odd-row-bg-color

홀수 본문 행의 배경색입니다. 기본값은 rgb(255, 255, 255)입니다.

table-even-row-bg-color

짝수 본문 행의 배경색입니다. 기본값은 #eee입니다.

첨부 파일

적응형 양식의 파일 첨부 위젯을 사용하면 파일을 업로드할 수 있습니다. 변수를 사용하여 위젯을 사용자 지정할 수도 있습니다.

변수

설명

fileItemPadding

위젯에 표시되는 파일에 대한 패딩

fileItemBackground

파일 항목의 배경색입니다

fileItemBorderColor

위쪽 테두리에 대한 테두리 색상

fileItemColor

파일 항목의 글꼴 색상

filePreviewIconColor

위젯의 미리 보기 아이콘(Bootstrap 아이콘)에 대한 색상

fileItemCommentHeight

파일 항목에 대한 주석 높이입니다

4가지 유형의 네비게이터 탭이 있습니다. 여기에는 마법사 및 아코디언 왼쪽, 상단 등의 탭이 포함됩니다. 각 네비게이터마다 다른 클래스가 있습니다.

Naviagator

CSS 클래스

Accordion

.accordion 탐색자

tabs on the left

.tab-navigator-vertical

tabs on the top

.tab-navigator

Wizard

.wizard-navigator

다음은 Tab Navigator 요소의 HTML 코드입니다(부트스트랩 탭과 유사).

<li>

tab title

</li>

Accordion navigator is an exception, it has following barebone

structure:

<div class="accordion.navigators">

<div>

<div class = "guideHeader">

<a>

<span class = "guideSummary" ></span>

........................... repeatable buttons, if the repeatable configuration is set ................................

<div class = "repeatableButtons">

<button name="Add" class="Add"/>

<button name="Remove" class="Remove"/>

</div>

</a>

</div>

................................ panel content ..................................

</div>

</div>

하위 선택기를 사용하여 요소를 선택하는 CSS 규칙을 사용하여 탐색기의 스타일을 변경할 수 있습니다. 예를 들어 앵커 태그에 텍스트 장식 스타일을 추가하려면 다음을 수행합니다.

맨 위에 있는 탭 탐색기:

.tab-navigators

li a {

text-decoration:

underline;

}

Tab navigator on left:

.tab-navigators-vertical

li a {

text-decoration:

underline;

}

Accordion navigator:

.accordion-navigators .guideHeader a .guideSummary {

text-decoration:

underline;

}

Wizard navigator:

.wizard-navigators

li a {

text-decoration:

underline;

}

또한 중첩/하위/하위 탐색 영역이 있는지 여부에 따라 탭 탐색 도구(왼쪽과 상단 모두)에 스타일을 지정하는 클래스가 있습니다.

CSS 클래스

설명

nested_true

중첩된/하위/하위 탐색자가 있는 탭 탐색자(왼쪽 및 상단)

nested_false

중첩된/하위/하위 탐색자가 없는 탭 탐색자(왼쪽 및 상단)

guideNavIcon 클래스는 탭 탐색자(왼쪽 및 상단 모두)와 마법사 탐색자에게 기본 아이콘을 제공합니다.

CSS 클래스

guideNavIcon
노트

작성의 패널에 CSS 클래스를 제공하여 특정 탐색기의 아이콘을 변경할 수 있습니다(예: <CLASS_NAME> ). 탐색기의 아이콘에 <CLASS_NAME>_nav​을 추가합니다.

변수

설명

탭 탐색자

navigator-bg-color

전체 탭 탐색기의 배경색

tabs-bg-color

탭의 배경색

tabs-font-color

탭의 글꼴 색상

tabs-hover-bg-color

마우스로 가리키면 탭의 배경색

tabs-hover-font-color

마우스로 가리키면 탭의 글꼴 색상

tabs-active-bg-color

패널에 초점이 맞춰진 경우 배경색(활성)

tabs-active-font-color

패널에 포커스가 있을 때 글꼴 색상

tabs-completed-bg-color

패널의 완료 표현식이 true를 반환하는 경우 배경색입니다

tabs-completed-font-color

패널의 완료 표현식이 true를 반환하는 경우 글꼴 색상

tabs-stepped-bg-color

 패널이 한 번 포커스에 있지만 완료 표현식이 false를 반환하는 경우 배경색입니다

tabs-stepped-font-color

 패널이 한 번 포커스에 있지만 완료 표현식이 false를 반환하는 경우 글꼴 색입니다

tabs-border-color

탭의 테두리 색상

tabs-font-size

탭의 글꼴 크기

tabs-padding

탭의 패딩

tabs-margin

탭의 여백

tabs-vertical-margin

세로 탭의 여백

tabs-border-thickness

탭의 테두리 크기

tabs-min-height

탭의 최소 높이

heirarichal-indent

중첩된 탭의 들여쓰기

마법사 탐색자

wizard-navigator-bg-color

 전체 마법사 탐색기의 배경색

wizard-tabs-bg-color

마법사의 배경색

wizard-tabs-font-color

마법사의 글꼴 색상

wizard-tabs-active-bg-color

패널에 초점이 맞춰진 경우 배경색(활성)

wizard-tabs-active-font-color

패널에 초점이 맞춰진 경우 글꼴 색상

wizard-tabs-completed-bg-color

패널의 완료 표현식이 true를 반환하는 경우 배경색입니다

wizard-tabs-completed-font-color

패널의 완료 표현식이 true를 반환하는 경우 글꼴 색상

wizard-tabs-stepped-bg-color

 패널이 한 번 포커스에 있지만 완료 표현식이 false를 반환하는 경우 배경색입니다

wizard-tabs-stepped-font-color

패널에 포커스를 지정했지만 완료 표현식이 false를 반환하는 경우 글꼴 색

wizard-tabs-border-color

마법사의 색상

wizard-tabs-font-size

마법사의 글꼴 크기

wizard-tabs-padding

마법사의 패딩

wizard-tabs-border-thickness

마법사의 테두리 크기

wizard-nav-bullet-border

마법사 탐색기 글머리 기호의 테두리 색상(캡션/레이블 사전 고정)

wizard-progress-bg-color

마법사 탐색기 진행률 표시줄의 배경색

wizard-progress-color

진행률 표시줄의 칠 색상

아코디언 탐색자

accordion-tabs-padding

아코디언 패딩

패널 스타일링

패널에는 선택적 도구 모음 및 해당 컨텐츠가 포함되어 있습니다.

CSS 클래스

guidePanelNode

변수

설명

panel-background-color

패널의 배경색

panel-font-size

패널 텍스트의 글꼴 크기

panel-font-color

패널 텍스트의 글꼴 색상

panel-padding

패널 내부 패딩

panel-description-font-size

패널 설명의 글꼴 크기

panel-description-padding

패널 설명 패딩

panel-help-bg-color

패널 도움말의 배경색

panel-help-border-indicator-color

패널 도움말의 표시기 테두리 색입니다

패널 노드는 탐색자와 컨텐츠로 구분됩니다. 컨텐츠에 대한 별도의 스타일 구성 요소가 에 없습니다. 설명된 변수는 컨텐츠뿐만 아니라 네비게이터에 적용됩니다.

*가장 위쪽 패널(RootPanel)에 이 클래스가 없습니다.

모바일 스타일링

헤더 막대

이러한 변수는 패널 제목과 다음 및 뒤로 탐색자가 포함된 모바일 장치나 작은 화면 장치에 표시되는 헤더 막대에 영향을 줍니다.

CSS 클래스

guide-header-bar

변수

설명

headerbar-background-color

헤더 막대의 배경색

headerbar-font-color

헤더 막대 안의 텍스트에 대한 글꼴 색상

headerbar-padding

헤더 막대에 대한 패딩

스크롤 표시기

이러한 변수는 모바일 장치나 작은 화면 장치에 표시되는 주황색 화살표인 스크롤 표시기에 영향을 줍니다. 스크롤 표시기는 화면의 보이는 부분을 벗어나는 콘텐츠가 있음을 나타냅니다. 아래로 스크롤하여 볼 수 있습니다. 컨텐츠 끝에 도달하면 화살표가 사라집니다.

CSS 클래스

mobileScrollIndicator

변수

설명

scrollIndicatorBottom

아래에서 스크롤린디케이터의 고정 위치

scrollIndicatorRight

오른쪽에서 스크롤린디케이터의 고정 위치

scrollIndicatorWidth

스크롤린디케이터의 너비

scrollIndicatorHeight

스크롤 표시기 높이

모바일 고정 도구 모음 레이아웃 관련 변수

다음 표의 이러한 변수는 모바일 고정 도구 모음 레이아웃에 영향을 줍니다.

CSS 클래스

mobileToolbar

변수

설명

mobileToolbarBottom

모바일 장치에서 맨 아래에서 도구 모음 위치가 수정되었습니다.

mobileToolbarTop

모바일 장치에서 맨 위에서 도구 모음 위치가 수정되었습니다.

mobileToolbarLeft

모바일 장치에서 왼쪽에서 도구 모음의 위치가 수정되었습니다.

mobileToolbarRight

모바일 장치에서 오른쪽의 도구 모음 위치가 수정되었습니다.

mobileButtonIconTopMargin

도구 모음의 단추 아이콘 위치를 맨 위에서 고정했습니다

mobileButtonIconWidth

모바일 장치에서 도구 모음 단추 아이콘 너비

mobileButtonIconHeight

모바일 장치에서 도구 모음 단추 아이콘 높이

mobilefixedtoolbarbgcolor

모바일 장치의 도구 모음 배경색

이 페이지에서는