CSS 및 LESS 프레임워크에 대한 지식.
이 문서에는 적응형 양식의 공개적으로 사용 가능한 css 클래스가 나열되어 있습니다. 이러한 클래스를 활용하여 적응형 양식의 다양한 구성 요소에 스타일을 지정할 수 있습니다. 경고를 표시하는 대화 상자 및 상태 표시줄과 같은 작성 구성 요소의 스타일은 이 문서의 범위를 벗어납니다. 다음 스타일 구문을 사용하여 구성 요소의 스타일을 지정할 수 없는 경우에만 스타일을 만듭니다(CSS 또는 그 이하 사용). 테마 편집기.
LESS 프레임워크를 통해 사용 사례를 간소화하여 적응형 양식에서 스타일을 사용자 지정할 수 있습니다. 프레임워크를 사용하면 변수 및 함수 집합(mixin)을 사용하여 스타일을 정의할 수 있습니다. LESS 프레임워크는 번들형 코드의 크기를 줄이고 재사용성을 높이는 데 도움이 됩니다.
다음 방법으로 적응형 양식 스타일을 사용자 지정할 수 있습니다.
적응형 양식의 모양을 적응형 양식이 포함된 웹 페이지와 일치하도록 적응형 양식의 테마를 변경할 수 있습니다.
CSS 속성을 사용한 적응형 양식의 전체 모양 변경은 일반적으로 테마 변경의 일부입니다. 적응형 양식의 "확인 및 느낌"에 대한 주요 변경 사항(예: 레이아웃 및 구성 요소 배치 변경 사항)은 테마 변경으로 간주되지 않습니다.
부트스트랩을 기반으로 다음 CSS 속성 세트는 웹 페이지의 테마를 정의합니다.
현재 LESS 변수는 적응형 양식에 있는 다양한 요소의 이러한 속성에 대해서만 정의됩니다.
요소의 모양, 레이아웃, 위치 및 가시성을 변경할 수 있습니다. 이 작업을 수행하려면 이 문서에 나열된 스타일 구문을 포함하도록 사용자 지정 .css 파일을 만들거나 업데이트합니다.
적응형 양식에 스타일을 적용하려면 편집할 적응형 양식을 열고 적응형 양식 컨테이너의 속성을 열고 기본 탭에서 사용자 지정 CSS 파일의 경로를 지정합니다. 적응형 양식의 기본 스타일 구문이며 사용자 지정 .css 파일에 나열된 구문으로 재정의됩니다.
이 문서에서 설명하는 구성 요소에는 사전 정의된 CSS 클래스가 있습니다. 변수를 편집하여 CSS 클래스의 스타일을 수정할 수 있습니다. 또는 전체 클래스를 다시 작성할 수 있습니다. 이 단원에서는 변수를 사용하여 수정할 수 있는 구성 요소 및 스타일 내의 클래스에 대해 설명합니다.
컨테이너는 최상위 구성 요소입니다. 다른 패널과 필드는 컨테이너 구성 요소 아래에 있습니다.
CSS 클래스 |
|
변수 설명 |
변수 설명 |
|
컨테이너의 배경색 |
|
컨테이너의 패딩 |
|
컨테이너의 여백 |
|
컨테이너의 글꼴 색상 |
적응형 양식에는 다양한 유형의 필드가 포함됩니다. 각 필드에는 필드 이름인 고유한 클래스 이름이 있습니다. 필드에는 일반적인 클래스 이름도 있습니다 guideFieldNode
.
필드에는 레이블, 위젯, 도움말 설명(긴 설명 및 짧은 설명 모두) 및 필드 도움말 아이콘(물음표)이 포함됩니다.
CSS 클래스 |
|
변수 |
설명 |
|
필드 패딩 |
|
필드 오류 메시지의 글꼴 색상 |
|
필드 오류 메시지의 글꼴 크기 |
HTML 요소 레이블 필드에는 클래스가 포함됩니다. left 또는 top 레이블이 맨 위에 있는지 아니면 왼쪽에 있는지에 따라 다릅니다.
CSS 클래스 |
|
변수 |
설명 |
|
필드 레이블의 글꼴 색상 |
|
필드 레이블의 글꼴 크기 |
|
필드 레이블의 CSS 라인 높이 속성 |
|
필드 레이블의 CSS 글꼴 두께 속성 |
|
필드 레이블의 여백 |
레이블의 CSS 규칙은 guideFieldLabel 레이블. 작성자인 경우 이 규칙을 재정의하여 사용자 지정 변경 사항을 표시합니다.
유형에 따라 위젯에도 클래스가 포함됩니다. 일반적으로 위젯에는 guideFieldWidget
클래스. HTML과 함께 제공되는 위젯은 일반적으로 표준 HTML 요소 입력을 사용하고 선택합니다. 그에 따라 스타일링이 수행됩니다. 변수를 변경하여 사용자 정의 위젯의 스타일을 지정할 수 없습니다.
CSS 클래스 |
|
변수 |
설명 |
|
위젯의 배경색(확인란 및 라디오 버튼에 대해 작동하지 않음) |
|
위젯의 테두리 색상 |
|
위젯의 테두리 크기 |
|
위젯의 테두리 반경 |
|
위젯에 대한 테두리 유형 |
|
위젯 테두리에 대한 포커스 유형 |
|
위젯의 통합 테두리 스타일 |
|
위젯 내부의 텍스트 색상 |
|
위젯 내부의 텍스트 크기 |
|
위젯에 대한 CSS lineheight 속성 |
|
위젯에 대한 CSS 패딩 속성 |
|
위젯에 포커스가 있을 때의 테두리 색상 |
|
필수 필드에 대한 위젯의 테두리 색상 |
|
필수 필드에 대한 위젯의 배경색 |
|
필드가 비활성화될 때 위젯의 배경색 |
|
필드가 비활성화될 때 위젯의 글꼴 색상 |
|
필드가 비활성화될 때 위젯의 테두리 색상 |
|
위젯 높이(확인란 및 라디오 버튼에 대해 작동하지 않음) |
|
확인란 및 라디오 버튼의 높이입니다. |
|
다중 선택 드롭다운의 최대 높이 |
집중, 필수 및 비활성화 필드의 스타일이 변수를 사용하여 제한됩니다. 그러나 스타일을 재정의하여 변경할 수 있습니다. 변수를 사용하는 제한은 주로 변수의 수를 확인하기 위해 제공됩니다. 필드의 외형이 크게 바뀌는 경우, 그 제한은 앞서 논의한 주 중 어느 곳에서든 있기 때문에 완화될 수 있다.
작성자는 짧은 설명 및 긴 설명 구성 요소를 사용하여 필드에 도움말 콘텐츠를 지정할 수 있습니다. 두 구성 요소에는 공통 클래스가 있습니다 .guideHelpDescription
외 클래스 .long
/ .short
설명 유형에 따라 다릅니다. 도움말 콘텐츠는 단락 요소에 포함되어 설명의 스타일을 재정의합니다. 도움말 설명(긴 설명 및 짧은 설명 모두)은 다음 표에 설명된 대로 widgetshelp로 시작하는 변수를 사용하여 수정됩니다.
변수 |
설명 |
|
위젯의 긴 도움말의 배경색 |
|
위젯의 긴 도움말의 테두리 색상 |
|
위젯의 긴 도움말의 왼쪽 표시기 테두리 색상 |
|
위젯의 짧은 도움말의 배경색 |
|
위젯의 짧은 도움말의 글꼴 색상 |
|
위젯의 짧은 도구 설명의 배경색입니다. 도움말 |
|
위젯의 짧은 도구 설명의 글꼴 색상 도움말 |
약관(TnC)
) 위젯을 사용하여 약관을 지정할 수 있습니다. 다음 표에 설명된 변수를 사용하여 위젯을 사용자 정의할 수 있습니다.
변수 |
설명 |
tnc-unvisited |
방문하지 않은 tnc 링크의 글꼴 색입니다. |
tnc-visited |
방문한 tnc 링크의 글꼴 색입니다. |
버튼은 위젯이기도 합니다. 하지만 그들의 스타일은 위젯과 약간 다릅니다. 적응형 양식에서는 다음 중 하나가 버튼을 구성합니다.
단추에 대한 HTML 코드:
<button type="button" >
<span class="iconButtonicon"></
span>
<span class="iconButtonlabel"></
span>
</button>
CSS 클래스 |
설명 |
|
버튼의 아이콘을 제공합니다. |
|
스타일 단추 레이블/캡션 |
변수 |
설명 |
|
단추의 테두리 크기 |
|
테두리 유형 |
|
단추의 CSS 패딩 속성 |
|
단추의 글꼴 크기 |
|
단추의 배경색 |
|
단추의 글꼴 색상 |
|
단추의 테두리 색상 |
|
큰 단추 패딩(클래스 .buttonlarge가 있는 단추) |
|
큰 단추의 글꼴 크기 |
|
작은 단추 패딩(클래스 .buttonsmall이 있는 단추) |
|
작은 단추의 글꼴 크기 |
|
정보 제공 단추의 배경색(클래스 .buttoninformative가 있는 단추) |
|
정보 제공 단추의 글꼴 색상 |
|
정보 제공 단추의 테두리 색상 |
|
경고 스타일이 지정된 단추의 배경색입니다(.buttonwarning 클래스가 있는 단추). |
|
경고 스타일이 지정된 단추의 글꼴 색상 |
|
경고 스타일이 지정된 단추의 테두리 색상 |
|
경고 단추의 배경색(클래스 .buttonalert가 있는 단추) |
|
경고 단추의 글꼴 색상 |
|
경고 단추의 테두리 색상 |
위젯의 경우 작성자가 도움말 콘텐츠에 긴 설명을 추가하면 물음표가 표시됩니다. 부트스트랩에 제공된 기본 아이콘이 사용됩니다. 사용자 지정 아이콘을 사용하려면 부트스트랩 아이콘을 사용자 지정할 수 있습니다.
CSS 클래스 |
|
변수 |
설명 |
|
아이콘 색상 |
|
마우스를 아이콘 위로 가져간 경우의 아이콘 색상 |
다음 변수를 사용하여 테이블의 머리글 및 본문 행에 대한 색상 테마를 변경할 수 있습니다.
변수 |
설명 |
|
머리글 행의 배경색입니다. 기본값은 |
|
홀수 본문 행의 배경색입니다. 기본값은 |
|
짝수 본문 행의 배경색입니다. 기본값은 |
적응형 양식의 파일 첨부 파일 위젯을 사용하여 파일을 업로드할 수 있습니다. 변수를 사용하여 위젯을 사용자 정의할 수도 있습니다.
변수 |
설명 |
|
위젯에 표시된 파일의 패딩 |
|
파일 항목의 배경색 |
|
상단 테두리의 테두리 색상 |
|
파일 항목의 글꼴 색상 |
|
위젯의 미리 보기 아이콘(Bootstrap 아이콘)에 대한 색상 |
|
파일 항목에 대한 주석 높이 |
네비게이터 탭에는 네 가지 유형이 있습니다. 여기에는 왼쪽, 상단, 마법사 및 아코디언의 탭이 포함됩니다. 각 네비게이터에는 서로 다른 분류가 있습니다.
네비게이터 |
CSS 클래스 |
|
.accordion-navigators |
|
.tab-navigators-vertical |
|
.tab-navigators |
|
.wizard-navigators |
다음은 부트스트랩 탭과 유사한 탭 네비게이터 요소에 대한 HTML 코드입니다.
<li>
<a>tab title</a>
</li>
Accordion navigator is an exception, it has following barebone
structure:
<div class="accordion.navigators">
<div>
<div class = "guideHeader">
<a>
<span class = "guideSummary" ></code>
........................... 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 클래스 |
설명 |
|
중첩된/하위/하위 탐색기가 있는 탭 탐색기(왼쪽 및 위쪽) |
|
중첩된/하위/하위 탐색기가 없는 탭 탐색기(왼쪽 및 위쪽) |
guideNavIcon 클래스는 탭 탐색기(왼쪽 및 위쪽 모두)와 마법사 탐색기에 기본 아이콘을 제공합니다.
CSS 클래스 |
|
작성 중인 패널에 CSS 클래스를 제공하여 특정 탐색기의 아이콘을 변경할 수 있습니다(예: 양식 ) <class_name>. 을(를) 추가합니다. <class_name>_nav 네비게이터 아이콘.
변수 |
설명 |
탭 네비게이터 |
|
|
전체 탭 탐색기의 배경색 |
|
탭의 배경색 |
|
탭의 글꼴 색상 |
|
마우스로 가리키면 탭의 배경색 |
|
마우스로 가리키면 탭의 글꼴 색상 |
|
패널이 포커스에 있을 때의 배경색(활성) |
|
패널이 포커스에 있을 때의 글꼴 색상 |
|
패널의 완료 표현식이 true를 반환하는 경우의 배경색 |
|
패널의 완료 표현식이 true를 반환하는 경우 글꼴 색상 |
|
패널이 한 번 포커스에 있지만 완료 표현식이 false를 반환하는 경우 배경색입니다. |
|
패널이 한 번 포커스에 있었으나 완료 표현식이 false를 반환하는 경우 글꼴 색상 |
|
탭의 테두리 색상 |
|
탭의 글꼴 크기 |
|
탭의 패딩 |
|
탭의 여백 |
|
세로 탭의 여백 |
|
탭의 테두리 크기 |
|
탭의 최소 높이 |
|
중첩된 탭의 들여쓰기 |
마법사 탐색기 |
|
|
전체 마법사 탐색기의 배경색 |
|
마법사의 배경색 |
|
마법사의 글꼴 색상 |
|
패널이 포커스에 있을 때의 배경색(활성) |
|
패널이 포커스에 있을 때의 글꼴 색상(포커스 지정) |
|
패널의 완료 표현식이 true를 반환하는 경우의 배경색 |
|
패널의 완료 표현식이 true를 반환하는 경우 글꼴 색상 |
|
패널이 한 번 포커스에 있지만 완료 표현식이 false를 반환하는 경우 배경색입니다. |
|
패널에 한 번 포커스를 설정했지만 완료 표현식이 false를 반환하는 경우 글꼴 색상 |
|
마법사 색상 |
|
마법사의 글꼴 크기 |
|
마법사의 패딩 |
|
마법사의 테두리 크기 |
|
마법사 네비게이터 글머리 기호의 테두리 색상(캡션/레이블 접두사 사용) |
|
마법사 탐색기 진행률 표시줄의 배경색 |
|
진행률 표시줄의 채우기 색상 |
어코디언 탐색기 |
|
|
아코디언에 대한 패딩 |
패널 에는 선택적 도구 모음 및 그 컨텐츠가 포함되어 있습니다.
CSS 클래스 |
|
변수 |
설명 |
|
패널의 배경색 |
|
패널 텍스트의 글꼴 크기 |
|
패널 텍스트의 글꼴 색상 |
|
패널 내부 패딩 |
|
패널 설명의 글꼴 크기 |
|
패널 설명의 패딩 |
|
패널 도움말의 배경색 |
|
패널 도움말의 표시기 테두리 색상 |
패널 노드는 탐색기와 콘텐츠로 나뉩니다. 거기
콘텐츠에 대한 별도의 스타일 구성 요소가 없습니다. 설명된 변수는 콘텐츠뿐만 아니라 navigator에도 적용됩니다.
맨 위 패널(RootPanel)에 이 클래스가 없습니다.
이러한 변수는 패널 제목과 다음 및 뒤로 탐색기가 포함된 모바일 장치나 작은 화면 장치에 표시되는 헤더 막대에 영향을 줍니다.
CSS 클래스 |
|
변수 |
설명 |
|
헤더 막대의 배경색 |
|
헤더 막대 내의 텍스트에 대한 글꼴 색상 |
|
헤더 막대에 대한 패딩 |
이러한 변수는 모바일 장치나 작은 화면 장치에 표시되는 주황색 화살표인 스크롤 표시기에 영향을 줍니다. 스크롤 표시기는 화면에 표시되는 부분 너머에 콘텐츠가 있음을 나타냅니다. 아래로 스크롤하여 볼 수 있습니다. 콘텐츠의 끝에 도달하면 화살표가 사라집니다.
CSS 클래스 |
|
변수 |
설명 |
|
아래에서 scrollindicator의 위치가 고정됨 |
|
오른쪽에서 scrollindicator 고정 위치 |
|
scrollindicator 폭 |
|
스크롤 제한기 높이 |
다음 표의 이러한 변수는 모바일 고정 도구 모음 레이아웃에 영향을 줍니다.
CSS 클래스 |
|
변수 |
설명 |
|
모바일 장치에서 아래쪽에서 도구 모음 위치 고정 |
|
모바일 장치에서 위에서 도구 모음의 위치가 수정되었습니다. |
|
모바일 장치에서 왼쪽에서 도구 모음의 위치가 수정되었습니다. |
|
모바일 장치에서 오른쪽에서 도구 모음 위치 고정 |
|
도구 모음 단추 아이콘의 위치를 위에서 수정했습니다. |
|
모바일 장치에서 도구 모음의 버튼 아이콘 폭 |
|
모바일 장치에서 도구 모음의 버튼 아이콘 높이 |
|
모바일 장치에서 도구 모음의 배경색 |
다음 단순 등록 /etc/clientlibs/fd/af/guidetheme/simpleEnrollment의 테마 및 카테고리 guide.theme.simpleEnrollment
몇 가지 변수도 소개합니다. 단순 등록을 개선하는 테마를 만들려면 다음 "추가 변수"를 사용할 수 있습니다.
변수 |
설명 |
|
포커스 단추 배경색 |
|
마우스로 가리키면 단추의 배경색 |
|
단추 반경 |
|
탐색 단추의 배경색(뒤/다음) |
|
마우스로 가리키면 탐색 단추(뒤/다음)의 배경색 |
|
마법사 탐색기의 배경색 및 해당 진행률 표시줄(처음 렌더링될 때). |
|
현재/활성 마법사 탐색기 및 해당 진행률 표시줄의 배경색입니다. |
|
방문한 마법사 탐색기와 해당 진행률 표시줄의 배경색입니다. |
|
탐색기와 패널에 테두리 색상 분기 컨테이너 |
|
왼쪽 탭의 하단 테두리 색상 분리 탭(탭 탐색기). |
|
네비게이터의 중첩/하위/하위 네비게이터의 배경색 |