# 셀 테두리 구성

## Content

SpreadJS 디자이너에서는 **셀 서식** 대화 상자의 **테두리** 탭에서 셀 테두리를 구성할 수 있습니다. 테두리 탭에서는 테두리 선 스타일, 색상, 미리 설정, 개별 테두리 방향 및 테두리 반경을 설정할 수 있습니다.
그룹화된 보고서 블록, 양식 섹션 또는 대시보드 패널과 같이 셀이나 범위를 둥근 사각형 영역으로 표시하려는 경우 테두리 반경을 사용합니다.

## 테두리 설정 열기

다음 위치 중 하나에서 테두리 탭을 열 수 있습니다.

* 리본에서 **홈** \> **글꼴** \> **테두리** \> **다른 테두리**로 이동합니다.
    ![image-20260717.f18010.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260717.f18010-20260821.59e603.png?width=800)
* 워크시트 셀, 범위 또는 헤더 영역을 마우스 오른쪽 버튼으로 클릭한 다음 **셀 서식** \> **테두리**를 선택합니다.
    ![image-20260717.c92ba7.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260717.c92ba7-20260821.8cb33a.png?width=250)

테두리 탭에는 테두리 선, 미리 설정, 미리 보기 및 반경에 대한 설정이 포함되어 있습니다.
![image-20260717.4ce82f.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260717.4ce82f-20260821.a77fd1.png?width=400)

## 테두리 및 반경 미리 보기

테두리 탭 중앙의 미리 보기 다이어그램에는 현재 테두리 구성이 표시됩니다.
![image-20260717.97d168.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260717.97d168-20260821.401c22.png?width=600)
다음 항목에서 변경한 내용이 반영됩니다.

* 선 스타일 및 색상
* 테두리 미리 설정
* 개별 테두리 버튼
* 테두리 반경 값
* 반경 **적용 대상** 모드

## 테두리 선 스타일 및 색상 설정

**선** 영역을 사용하여 테두리 선 스타일과 색상을 선택합니다.
![image-20260717.a4fa6c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260717.a4fa6c-20260821.ebe407.png?width=600)
선 스타일과 색상을 선택한 후 다음 컨트롤 중 하나를 사용하여 적용합니다.

* **미리 설정**을 사용하면 **없음**, **윤곽선**, **안쪽**과 같은 일반적인 테두리 조합을 적용할 수 있습니다.
* 미리 보기 다이어그램 주변의 테두리 버튼을 사용하면 선택한 선을 바깥쪽 테두리, 안쪽 테두리 또는 대각선 테두리와 같은 특정 테두리 위치에 적용할 수 있습니다.
* 중앙의 미리 보기 다이어그램에는 현재 테두리 결과가 표시되며, 테두리 선을 적용하는 데에도 사용할 수 있습니다.

![demo-20260717.89bdcb.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/demo-20260717.89bdcb-20260821.cd7b06.gif?width=800)

## 테두리 미리 설정 적용

**미리 설정** 영역에서는 선택한 셀 또는 범위에 테두리를 빠르게 구성할 수 있습니다.

| 미리 설정 | 설명 |
| ----- | --- |
| 없음 | 선택한 대상에서 테두리 선을 제거합니다. |
| 윤곽선 | 선택한 대상의 바깥쪽 가장자리에 테두리를 적용합니다. |
| 안쪽 | 선택한 범위의 안쪽 선에 테두리를 적용합니다. |

![preset-20260717.5bc962.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/preset-20260717.5bc962-20260821.c8ae25.gif?width=800)

>type=note
> **안쪽** 미리 설정은 선택한 범위의 셀 사이에 테두리를 적용하므로 범위에 사용할 때 의미가 있습니다. 테두리 반경은 제어하지 않습니다. 둥근 모서리를 구성하려면 **반경** 그룹을 사용합니다.

## 테두리 반경 구성

**반경** 그룹에서는 선택한 셀, 범위 또는 지원되는 스타일 영역의 둥근 모서리를 제어합니다.
![image-20260717.583858.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260717.583858-20260821.a079f6.png?width=600)
테두리 반경은 테두리 선 미리 설정과 독립적으로 적용됩니다. 예를 들어 **윤곽선** 또는 **안쪽**을 사용하여 테두리 선을 설정한 다음 **반경** 그룹을 사용하여 둥근 모서리의 적용 방식을 제어할 수 있습니다.
반경 그룹에는 다음 항목이 포함됩니다.

| 영역 | 설명 |
| --- | --- |
| 적용 대상 | 현재 반경 작업이 적용되는 대상 범위를 정의합니다. |
| 모서리 | 왼쪽 위, 오른쪽 위, 오른쪽 아래 및 왼쪽 아래 반경 값을 설정할 수 있는 편집기를 제공합니다. |
| 연결 버튼 | 네 모서리 값을 연결하거나 연결을 해제합니다. |

![radius-20260717.820c6c.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/radius-20260717.820c6c-20260821.1840b7.gif?width=800)

### 적용 대상 모드

**적용 대상** 설정은 현재 반경 값이 선택한 대상에 적용되는 방식을 제어합니다. 이는 편집 명령이며 별도의 도형 상태로 저장되지 않습니다.

| 모드 | 설명 |
| --- | --- |
| 없음 | 현재 작업에서 둥근 모서리를 비활성화합니다. 모서리 편집기에 0이 표시되고 편집기가 비활성화됩니다. |
| 모두 | 선택한 셀 또는 범위의 적용 가능한 모든 모서리에 반경을 적용합니다. 여러 셀 범위의 경우 적용된 테두리 구조에 따라 각 셀에 둥근 모서리가 표시될 수 있습니다. |
| 바깥쪽 | 선택한 범위의 바깥쪽 윤곽에 반경을 적용합니다. |

대화 상자를 열면 **바깥쪽**이 초기 편집 범위로 사용됩니다. 편집기에는 바깥쪽 모서리의 현재 반경 값이 표시됩니다.
![applyTo-20260717.7c1b88.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/applyTo-20260717.7c1b88-20260821.00ab90.gif?width=800)

>type=warning
> **적용 대상**을 변경하면 다음 반경 편집의 적용 범위만 변경됩니다. 기존 반경 값이 원래 어떻게 생성되었는지는 나타내지 않습니다.

![note-20260717.a8993a.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/note-20260717.a8993a-20260821.92f37d.gif?width=800)

### 모서리 값 편집

각 모서리 편집기에는 음수가 아닌 정수 값을 입력할 수 있습니다.

* 빈 값은 `0`으로 처리됩니다.
* 음수 값은 지원되지 않습니다.
* 소수 값은 지원되지 않습니다.
* 단위 및 백분율은 지원되지 않습니다.

연결 편집이 활성화된 경우 모서리 값 중 하나를 변경하면 동일한 값이 네 모서리에 모두 적용됩니다.
연결 편집이 비활성화된 경우 각 모서리 값을 개별적으로 편집할 수 있습니다.

## 지원되는 스타일 영역

반경 편집기는 셀 스타일 정보를 편집하는 지원되는 대화 상자에서 사용할 수 있습니다.

| 영역 | 동작 |
| --- | --- |
| 워크시트 셀 서식 | 선택한 셀, 범위 또는 헤더 영역에 반경 변경 사항을 적용합니다. |
| 셀 스타일 | 유효한 반경 값을 스타일 정의에 저장합니다. |
| 조건부 서식 사용자 지정 서식 | 반경 값을 규칙 스타일에 저장합니다. |
| 셀 상태 | 선택한 상태 스타일의 반경 값을 저장합니다. |
| 명명된 셀 템플릿 스타일 | 반경 값을 템플릿 스타일의 일부로 유지합니다. |
| 테이블 시트 및 데이터 매니저 스타일 영역 | 해당 영역에서 호환되는 셀 스타일을 편집하는 경우 반경을 지원합니다. |
| 리포트 시트 스타일 영역 | 해당 영역에서 호환되는 리포트 스타일을 편집하는 경우 반경을 지원합니다. |

>type=note
> **참고:** 특정 대화 상자에서 셀 스타일 또는 호환되는 스타일 옵션을 편집할 수 있는지에 따라 사용 가능 여부가 달라질 수 있습니다.

## 피벗 테이블 선택 동작

선택한 워크시트 범위가 피벗 테이블과 겹치는 경우 디자이너는 피벗 테이블 스타일 대상을 통해 테두리 반경을 적용합니다.

* **모두**는 선택 영역에서 확인된 각 피벗 테이블 스타일 영역에 전체 반경 값을 적용합니다.
* **바깥쪽**은 원래 워크시트 선택 영역의 바깥쪽 모서리 위치 중 피벗 테이블 페이지 또는 콘텐츠 범위 안에 있는 위치에만 반경을 적용합니다.

**적용 대상** 설정은 디자이너가 현재 편집 작업을 적용하는 방식을 제어합니다. 이 설정은 피벗 테이블 스타일의 일부로 저장되지 않으며 이후 피벗 테이블이 렌더링되는 방식을 제어하지 않습니다.

## 제한 사항

디자이너에서 테두리 반경을 구성할 때 다음과 같은 제한 사항이 적용됩니다.

* 반경 값은 음수가 아닌 정수만 지원합니다.
* 단위, 백분율, 음수 값 및 소수 정밀도는 지원되지 않습니다.
* 기존의 유효하지 않은 `borderRadius` 값이 있어도 대화 상자를 열 수 있습니다. 디자이너에서는 이러한 값을 반경이 0인 값으로 표시합니다.
* 런타임 테두리 렌더러에서 지원하지 않는 일부 헤더, 레이아웃 및 테두리 조합은 디자이너에서도 지원되지 않습니다.