---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# 사용자 지정 스타일 클래스 및 규칙 만들기

# 사용자 지정 스타일 클래스 및 규칙 만들기 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 1분

의 스타일 클래스 규칙 UI 빌더 을 사용하여 CSS 클래스를 참조하여 UI 요소에 사용자 지정 시각적 스타일을 적용합니다.

## 시작하기 전에

필요한 역할: 관리자

## 이 태스크 정보

인라인 스타일을 작성하지 않고도 필드, 컨테이너, 버튼 및 기타 인터페이스 구성요소의 모양을 제어하여 UI를 보다 깔끔하고 일관되며 유지관리하기 쉽게 만듭니다. 모든 스타일 클래스와 규칙을 페이지의 모든 컨테이너 또는 구성요소에 적용할 수 있습니다. CSS 스타일에 대한 자세한 내용은 [ServiceNow 개발자 사이트](https://developer.servicenow.com/dev.do#!/guides/yokohama/now-platform/next-experience-guide/now-experience-css) 와 [ServiceNow 커뮤니티 사이트를](https://www.servicenow.com/community/developer-blog/the-ultimate-service-portal-css-guide/ba-p/2290168) 참조하십시오.

## 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. 페이지를 만들거나 엽니다.
4. 페이지에 구성요소를 추가합니다.
5. 구성 패널에서 스타일 탭을 선택합니다.
6. 스타일 클래스 필드 옆에 있는 ... 아이콘을 선택합니다.  
   페이지 클래스 및 규칙 팝업이 나타납니다.
7. **옵션:** + 클래스 추가를 선택합니다.
   1. 스타일 클래스 이름 필드에 이름을 입력합니다.
   2. 구성요소에 적용할 CSS 스타일을 제공합니다.
   3. 적용을 선택합니다.
   {#custom-style-classes-rules__substeps_dqx_r2k_mfc}
8. **옵션:** + 규칙 추가를 선택합니다.
   1. 스타일 규칙 이름 필드에 이름을 입력합니다.
   2. 구성요소에 적용할 CSS 규칙을 제공합니다.
   3. 적용을 선택합니다.
9. 페이지 클래스 및 규칙 팝업을 닫습니다.
10. 스타일 클래스 필드를 선택합니다.
11. 목록에서 스타일 클래스 또는 스타일 규칙을 선택합니다.
12. 저장을 선택합니다.
13. 적용된 스타일 클래스 또는 스타일 규칙을 테스트하려면 미리 보기 를 선택합니다.