Show Menu
화제×

적응형 양식의 스타일 지정 구문

전제 조건

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

사용자 정의 가능한 항목

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

적응형 양식의 스타일 사용자 정의

LESS 프레임워크를 사용하면 적응형 양식의 스타일을 사용자 정의할 수 있습니다. 이 프레임워크를 사용하면 변수 및 함수 집합(mixins)을 사용하여 스타일을 정의할 수 있습니다. 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 요소 레이블에는 레이블이 맨 위 또는 왼쪽에 있는지에 따라 왼쪽 또는위쪽클래스가 포함됩니다.
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 클래스를 갖습니다. 도움말 컨텐츠는 설명 스타일을 재정의하기 위해 단락 요소에 포함되어 있습니다. 도움말 설명(장단어와 단문 모두)은 다음 표에 설명된 대로 widgetshelp로 시작하는 변수를 사용하여 수정됩니다.
변수
설명
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
위젯의 짧은 도구 설명 글꼴 색상 도움말

Terms and Conditions

약관(TnC) 위젯을 사용하면 약관을 지정할 수 있습니다. 다음 표에 설명된 변수를 사용하여 위젯을 사용자 정의할 수 있습니다.
변수
설명
tnc-unvisited 방문되지 않은 tnc 링크의 글꼴 색입니다.
tnc-visited 방문한 tnc 링크의 글꼴 색입니다.

단추

버튼도 위젯입니다. 그러나 위젯과 스타일이 약간 다릅니다. 적응형 양식에서는 다음 중 하나가 단추로 구성됩니다.
  • 단추
  • element with 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
유용한 정보를 제공하는 단추를 위한 배경색(클래스 .buttoninvent가 포함된 단추)
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
경고 단추에 대한 테두리 색상

Question mark

위젯의 경우, 작성자가 도움말 컨텐츠에 긴 설명을 추가하면 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
파일 항목의 주석 높이

패널 스타일

패널에는 선택적 도구 모음 및 해당 컨텐츠가 포함되어 있습니다.
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)에는 이 클래스가 없습니다.

모바일 스타일

Header bar

이러한 변수는 모바일 장치 또는 패널 제목과 다음 및 뒤로 탐색기가 포함된 작은 화면 장치에 표시되는 헤더 막대에 영향을 줍니다.
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
모바일 디바이스의 툴바 배경색

테마별 변수

/etc/ clientlibs/fd/af/guidetheme/simpleEnrollment 및 카테고리의 간단한 등록 테마는 몇 가지 변수를 guide.theme.simpleEnrollment 제공합니다. 간단한 등록을 향상시키는 테마를 만들려면 다음 "추가 변수"를 사용할 수 있습니다.
변수
설명
button-focus-bg-color
초점 단추 배경색
button-hover-bg-color
마우스를 가져가면 단추의 배경색
button-radius
단추 반경
navigation-button-bg-color
탐색 단추용 배경색(뒤/다음)
navigation-button-bg-hover-color
마우스를 가져가면 내비게이션 단추(뒤/다음)의 배경색
initial-nav-color
처음 렌더링할 때 마법사 탐색기와 해당 진행률 표시줄을 위한 배경색입니다.
active-nav-color
현재/활성 마법사 탐색기와 해당 진행률 표시줄을 위한 배경색
visited-nav-color
마법사 탐색자의 배경색 및 방문한 해당 진행률 표시줄입니다.
tabs-bifercating-border-color
내비게이션 및 패널로 색상 혼합 컨테이너 테두리
tabs-navigator-separator-color
왼쪽 탭(탭 내비게이터)에 대한 탭 구분 탭의 아래쪽 테두리 색상
tabs-child-nav-bg-color
탐색기의 중첩/하위/하위 탐색기를 위한 배경색