구성요소의 기본 모양 변경
구성요소 및 래퍼의 스타일을 설정하여 기본 모양을 변경합니다.
이 비디오는 다음 절차를 수행하는 방법을 보여줍니다.
시작하기 전에
필요한 역할: ui_builder_admin
이 태스크 정보
이 작업에서는 구성요소 및 구성요소를 포함하는 래퍼(예: 본문, 열 레이아웃 또는 열)에 스타일을 추가하는 방법에 대해 설명합니다. 콘텐츠 트리에서 구성요소를 선택하여 구성요소 스타일을 사용자 지정하거나 래퍼 내에 구성요소를 배치하여 여러 구성요소에 스타일을 적용합니다.
전체 환경에 스타일을 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 UI 빌더 환경의 시각적 스타일 관리.
이 작업은 에 소개된 오스트레일리아새 레이아웃 시스템에 적용됩니다. 페이지가 이전 레이아웃 시스템을 사용하는 경우 자세한 내용을 참조하십시오 이전 레이아웃 시스템을 사용하여 구성요소에 스타일 추가 .
프로시저
-
본문 또는 구성요소의 경우 구성 패널에서 스타일 탭을 선택합니다.
-
스타일 탭의 시각적 표현을 사용하여 페이지의 모양과 느낌에 가장 적합한 것을 결정합니다.
- 접근성(열 레이아웃 및 열)
- ARIA 지역 이름, ARIA 지역 제목 수준, ARIA 역할 및 ARIA 제목 포함과 같은 접근성 설정을 지정합니다. 자세한 내용은 developer.servicenow.com 에 대한 ARIA 설명서를 참조하십시오.
- 정렬(열 및 구성요소)
- 열의 경우 구성요소가 열 내에서 그룹으로 정렬되는 방식을 정의합니다. 구성요소의 경우 구성요소가 열 또는 열 레이아웃과 같은 상위 레이아웃 요소 내에서 정렬되는 방식을 정의합니다.
- 배경(본문, 열 레이아웃, 열 및 구성요소)
- 레이아웃 요소 뒤에 있는 배경색을 설정합니다. 그리드 또는 목록에서 사용 가능한 색상을 볼 수 있는 색상 선택기 내 색상 탭에서 색상을 선택합니다. 또는 사용자 지정 탭을 사용하여 16진수, RGB 또는 HSL로 색상을 지정합니다.
- 테두리(열 레이아웃, 열 및 구성요소)
- 콘텐츠 주위에 테두리를 추가합니다. 테두리는 여백의 바로 안쪽과 패딩의 바로 바깥쪽에 배치됩니다. 테두리 두께, 유형, 색상 및 모서리 모양을 지정합니다. 구성요소의 경우 테두리에 사용자 지정 CSS를 사용할 수 있습니다.
- 레이아웃(본문, 열 레이아웃, 열 및 구성요소)
- 본문과 열에 대해 방향, 정렬 및 컨텐츠 정당성을 지정합니다. 열 레이아웃의 경우 열 수와 열 간격(열 간 공간)을 지정합니다. 카드 기본 컨테이너와 같은 일부 구성요소의 경우 [CSS 편집] 을 선택하여 컨테이너 레이어와 컨테이너 내의 구성요소를 제어하는 내부 레이어에 특정 CSS 스타일을 적용합니다.
- 섀도우(열 레이아웃, 열 및 구성요소)
- 콘텐츠 주변에 섀도 효과를 추가합니다. 사용자 지정 CSS를 사용할 수 있는 옵션이 있습니다.
- 크기 조정(구성요소)
- 적용 가능한 구성요소의 경우 구성요소의 기본, 최소, 최대 높이와 너비(px, %, em, rem 또는 사용자 지정 값)를 설정합니다. 이 값은 브라우저 창의 크기가 조정되는 시기와 관련이 있습니다.
- 간격(본문, 열 레이아웃 및 구성요소)
- 여백은 본문, 열 레이아웃 또는 구성요소의 바로 안쪽에 있는 공간의 크기를 설정합니다. 패딩은 본문, 열 레이아웃 또는 구성요소의 바로 바깥쪽에 있는 공간의 크기를 설정합니다. 여백(Margin) 또는 패딩(Padding)을 선택하여 4면 모두에 대해 동일한 크기를 설정합니다.
- 현재 설정을 선택한 다음 옵션을 선택하여 각 여백 또는 패딩 면의 크기를 설정할 수 있습니다.
- 옵션: 본문 및 구성요소의 경우 스타일 탭 하단에 있는 CSS 보기 및 편집 링크를 선택하여 CSS 코드를 편집할 수 있습니다.
스타일 탭에는 CSS 스타일 코드 편집기가 표시됩니다. 가장 일반적으로 사용되는 CSS 속성은 다음과 같습니다.
배경색background-image테두리 스타일테두리 너비테두리 색상테두리 반경상자 그림자height최소-높이최대 높이마진오버플로우패딩width최소폭최대 너비z-인덱스
중요사항:일부 구성요소에는 에서 CSS UI 빌더로 재정의할 수 없는 기본 제공 스타일 구성이 포함되어 있습니다. 이러한 스타일 구성을 재정의하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 UI 빌더 환경의 시각적 스타일 관리.
이전 레이아웃 시스템을 사용하여 구성요소에 스타일 추가
구성요소의 CSS 스타일을 설정하여 기본 모양을 변경합니다.
시작하기 전에
필요한 역할: ui_builder_admin
이 태스크 정보
이 작업에서는 구성요소에 스타일을 직접 적용하는 대신 일반적으로 권장되는 구성요소가 포함된 래퍼에 스타일을 추가하는 방법을 설명합니다. 구성요소를 래퍼에 넣으려면 스타일을 정의하려는 구성요소가 컨테이너 구성요소 내에 배치되어 있는지 확인합니다. 구성요소의 래퍼는 콘텐츠 계층 구조의 구성요소보다 한 수준 높으며 기본적으로 기본으로 레이블이 지정됩니다.
전체 페이지에 스타일을 추가하려면 페이지 래퍼에 표준 기반 CSS를 사용할 수 있습니다. 전체 환경에 스타일을 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 UI 빌더 환경의 시각적 스타일 관리.
프로시저
-
기본 헤더에서 저장을 선택하여 변경 내용을 저장합니다.
그림 1. 스타일 구성 패널에서 구성요소에 스타일 추가