---
sourceDocument: 요코하마 직원 서비스 관리
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/yokohama/employee-service-management

 Release :

    - yokohama

ft:locale :

    - ko-KR

ft:publication_title :

    - 요코하마 직원 서비스 관리

ft:clusterId :

    - emplsm

bundleId :

    - emplsm

workflow :

    - Employee


---

# 서식 있는 컨텐츠 편집기로 열 추가

# 서식 있는 컨텐츠 편집기로 열 추가 {#ariaid-title1}

* 릴리스 버전: Yokohama
* 
* 업데이트 날짜 2025년 01월 30일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 2분

서식 있는 컨텐츠 편집기 캔버스를 사용하여 페이지의 레이아웃을 정의하고 구성하는 데 도움이 되는 열을 생성합니다.

## 시작하기 전에

필요한 역할: sn_cd.content_manager

새 컨텐츠 양식( 참조[서식 있는 콘텐츠 생성](https://servicenow-prod.fluidtopics.net/JK583e_ZUVPvVp_mMUZwDQ "서식 있는 컨텐츠 편집기를 사용하여 사용하기 쉬운 웹 스타일 도구로 긴 양식 컨텐츠를 빌드합니다."))을 완료하고 서식 있는 컨텐츠 캔버스로 이동한 후에는 서식 있는 컨텐츠를 생성할 수 있습니다.  
1, 2 또는 3개의 열을 추가할 수 있습니다. 각 열은 다른 구성요소의 컨테이너 역할을 합니다. 구성요소를 선택하고 설정에서 속성을 업데이트하여 각 열 구성요소를 편집할 수도 있습니다.  
주:  
열 내 셀의 최소 높이는 75px입니다. 셀 높이를 더 작게 설정하면 셀이 행을 오버플로합니다.

## 프로시저

1. 새 컨텐츠 양식의 디자인 탭에서 편집기 열기 버튼을 선택하여 캔버스로 이동합니다.
2. 서식 있는 컨텐츠 편집기 캔버스에서 끌어서 놓기 방식을 사용하여 열을 추가할 수 있습니다.  
   열은 생성 중인 콘텐츠의 컨테이너 역할을 합니다.

   1열, 2열 또는 3열을 서식 있는 컨텐츠 편집기 캔버스에 놓으면 두 개의 구분 기호가 나타납니다. 바깥쪽 구분 기호에는 행이라는 레이블이 표시됩니다. 내부 구분 기호에는 셀이라는 레이블이 붙어 있습니다.

행 또는 셀에 배경색, 최대 너비 또는 패딩과 같은 스타일을 추가합니다. 스타일을 추가하지 않으려면 이 페이지 하단의 링크로 이동할 수 있습니다.

3. 편집할 행 또는 셀을 선택합니다.
4. 설정 탭으로 이동합니다.
5. 다음 스타일 설정 중 하나를 사용합니다.  
   {#ec-rich-content-canvas__table_zx2_tgw_jyb__entry__2}

   | 설정 필드 | 설명 |
   |-|-|
   | 스타일링 ||
   | 배경색 | 색상 선택기(회색 사각형)를 사용하여 색상을 선택하거나 표시할 배경색을 나타내는 색상 코드를 입력합니다. 모든 HTML 색상이 지원됩니다. 자세한 내용은 [HTML 색 이름을](https://htmlcolorcodes.com/color-picker/) 참조하십시오. |
   | 고급 스타일 ||
   | 너비 | 숫자를 입력하거나 셀의 오른쪽을 끌어서 값을 지정합니다. 측정 단위 선택: * px: 픽셀 * %: 백분율 {#ec-rich-content-canvas__ul_z1t_33z_z5b} |
   | 높이 | 숫자를 입력하거나 행 하단을 끌어 값을 지정합니다. 측정 단위 선택: * px: 픽셀 * %: 백분율 {#ec-rich-content-canvas__ul_dkg_mhw_jyb} |
   | 패딩 | 패딩은 콘텐츠와 요소의 테두리 사이의 공간입니다. 숫자를 입력하여 상단, 하단, 오른쪽 또는 왼쪽 패딩 값을 지정합니다. |
   | 여백(행에만 해당) | 여백은 행과 다른 요소/캔버스 경계 사이의 공간입니다. 숫자를 입력하여 상단, 하단, 오른쪽 또는 왼쪽 패딩 값을 지정합니다. |
   | 테두리(셀에만 해당) | 너비, 테두리 스타일 및 색상을 정의합니다. |
   | 테두리 반경(셀에만 해당) | 반경 설정은 테두리 모서리를 반올림합니다. |
   | 속성 ||
   | ID | HTML 요소를 식별하는 고유 ID입니다. |
   | 제목 | 사용자가 구성요소 위로 마우스를 가져갈 때 나타나는 도구 설명 또는 정보입니다. |
   [표 1. 스타일링 설정]

   {#ec-rich-content-canvas__table_zx2_tgw_jyb}
6. 저장을 선택합니다.

## 다음에 수행할 작업

열을 더 추가하고 스타일을 지정하여 페이지의 모든 콘텐츠에 대한 레이아웃을 만듭니다.  
그런 다음 이미지, 비디오, 텍스트 상자 및 버튼과 같은 구성요소를 추가합니다.

* [서식 있는 컨텐츠 편집기로 탭 추가](https://servicenow-prod.fluidtopics.net/iTjuOcM6bg1uGoD3CKuQpg "서식 있는 컨텐츠에 탭을 추가하면 사용자가 다양한 탭을 선택하여 연결된 컨텐츠를 표시할 수 있으므로 효율적으로 탐색할 수 있습니다.")
* [서식 있는 컨텐츠 편집기로 구분선 추가](https://servicenow-prod.fluidtopics.net/2hFLGe6_KrkbL8ZRzeqGHw "캔버스에 수평 구분선을 추가하여 요소를 시각적으로 분리하거나 중요한 섹션을 강조 표시합니다.")
* [서식 있는 컨텐츠 편집기로 이미지 추가](https://servicenow-prod.fluidtopics.net/jniIXHRNNrV5W53frHdd_Q "서식 있는 컨텐츠 편집기 캔버스를 사용하여 컨텐츠에 이미지를 추가합니다.")
* [서식 있는 컨텐츠 편집기를 사용하여 비디오 추가](https://servicenow-prod.fluidtopics.net/ZCFHxVrZobCTfVzqZy8mZA "서식 있는 컨텐츠 편집기 캔버스를 사용하여 컨텐츠에 비디오를 추가합니다.")
* [서식 있는 컨텐츠 편집기로 텍스트 또는 텍스트 섹션 추가](https://servicenow-prod.fluidtopics.net/HmdLI~F50RI02PSovcNYiw "서식 있는 컨텐츠 편집기 캔버스를 사용하여 컨텐츠에 텍스트 또는 텍스트 섹션 을 추가합니다.")
* [서식 있는 컨텐츠 편집기로 링크 또는 링크 블록 추가](https://servicenow-prod.fluidtopics.net/j2zYs91hV_NEdNHXnvTEbQ "서식 있는 컨텐츠 편집기 캔버스를 사용하여 링크 또는 링크 블록을 추가하여 사용자를 다른 컨텐츠나 웹 페이지로 리디렉션합니다. 링크는 텍스트 상자를 제공하고 링크 블록을 사용하면 링크 역할을 하는 이미지를 추가할 수 있습니다.")
* [서식 있는 컨텐츠 편집기로 버튼 추가](https://servicenow-prod.fluidtopics.net/eoX3zTi_Ps52mitbjnEwdQ "버튼을 추가하여 작업을 트리거하거나 사용자를 다른 컨텐츠로 리디렉션합니다.")
{#ec-rich-content-canvas__ul_ab5_2kw_jyb}