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