# 이름 상자

## Content

SpreadJS는 Excel과 유사한 **이름 상자** 컴포넌트를 제공하여, 선택된 **셀 범위**, **항목**, **명명된 범위**를 표시할 수 있습니다. 이 기능은 Spread 컨트롤과 함께 **이름 상자 컴포넌트를 프로젝트에 추가**하여 사용할 수 있게 해줍니다.
이름 상자는 기본적으로 **선택된 셀의 주소**를 표시하며, **선택 박스**와 **드롭다운 목록** 으로 구성되어 있습니다.
![namebox-container.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/namebox-container.f8028b.png)
다음과 같이 이름 상자 선택기에 선택 내용을 표시할 수 있습니다:

* 선택이 변경될 때 선택 범위를 표시
    ![select-a-range.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/select-a-range.9597ff.png)
* 선택이 완료되었을 때 활성 셀을 표시
    ![namebox-gif.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/namebox-gif.427d32.gif)
* 도형이 선택되었을 때 도형 이름을 표시
    ![selection-drawing.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/selection-drawing.147c9f.png)
* 선택한 범위가 명명된 범위 또는 테이블 이름과 같을 경우 해당 이름을 표시
    ![select-table.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/select-table.addd81.png)

이름 상자의 드롭다운에는 다음과 같은 사용자 지정 이름 목록이 표시됩니다<span lang="EN-US" style="font-size:12.0pt;font-family:Montserrat;mso-fareast-font-family:
Montserrat;mso-bidi-font-family:Montserrat;color:#3A4652">:</span>

* 통합 문서 사용자 지정 이름 및 그 표현식 유형이 **<span style="font-size:12.0pt;
    font-family:Montserrat;mso-fareast-font-family:Montserrat;mso-bidi-font-family:
    Montserrat;color:#3A4652" lang="EN-US">GC.Spread.CalcEngine.ExpressionType.reference</span>**인 항목
* 활성 워크시트의 사용자 지정 이름 및 그 표현식 유형이 **<span style="font-size:12.0pt;
    font-family:Montserrat;mso-fareast-font-family:Montserrat;mso-bidi-font-family:
    Montserrat;color:#3A4652" lang="EN-US">GC.Spread.CalcEngine.ExpressionType.reference</span>**인 항목
* 모든 워크시트의 모든 테이블 이름

## 이름 상자 구성

이름 상자 구성 요소를 만들기 위해 아래 단계를 따르시기 바랍니다:

1. HTML에 `gc.spread.sheets.all.x.x.x.min.js` 참조를 추가합니다.

    ```JavaScript
    <script type="text/javascript" src="scripts/modules/gc.spread.sheets.all.x.x.x.min.js"></script>
    ```
2. 호스트 DIV 요소를 추가합니다.

    ```JavaScript
    <div id="NameBox" style="width:100px"></div>
    ```
3. [NameBox](/spreadjs/api/v19/classes/GC.Spread.Sheets.NameBox.NameBox) 요소를 Spread 인스턴스에 바인딩합니다.

    ```JavaScript
    var sheet = spread.getActiveSheet();
    var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('NameBox'), spread);
    ```
4. 추가로 이름 상자 옵션을 설정할 수도 있습니다. 자세한 내용은 아래의 **이름 상자** **옵션 설** 섹션을 참고하세요.

## 이름 상자 옵션 설정

**[INameBoxOptions](/spreadjs/api/v19/interfaces/GC.Spread.Sheets.NameBox.INameBoxOptions)**[ ](/spreadjs/api/v19/interfaces/GC.Spread.Sheets.NameBox.INameBoxOptions)인터페이스를 사용하여 이름 상자의 동작을 제어할 수 있는 다양한 옵션을 설정할 수 있습니다.
예를 들어, 드롭다운 목록의 높이 설정, 사용자 정의 이름 추가, 범위로의 이동, 사용자 정의 이름 표시 등을 제어할 수 있습니다.

| 옵션 이름 | 값 | 설 |
| ----- | --- | --- |
| dropDownMaxHeight | Number | 드롭다운 목록의 최대 높이를 지정합니다. 기본값은 `500px`입니다. |
| enableAddCustomName | Boolean | 선택기에 존재하지 않는 이름을 입력할 때 사용자 정의 이름을 추가할지 여부를 지정합니다. 기본값은 `true`입니다. |
| enableNavigateToRange | Boolean | 이름 또는 사용자 정의 항목을 클릭할 때 명명된 범위 또는 도형 항목으로 이동할지 여부를 지정합니다. 기본값은 `true`입니다. |
| showCustomNameList | Boolean | 사용자 정의 이름 목록 드롭다운 표시 여부를 지정합니다. |

다음 코드는 이름 상자 옵션을 설정하는 방법을 보여줍니다:

```JavaScript
 var nameBox = new GC.Spread.Sheets.NameBox.NameBox(document.getElementById('NameBox'), spread, {
                showCustomNameList: false,
                dropDownMaxHeight: 200,
                enableAddCustomName: false,
                enableNavigateToRange: false
 });
```

>type=warning
> **참고**: **이름 상자**에는 다양한 Excel 테마를 적용할 수 있습니다.
> SpreadJS 구성 요소에 테마를 적용하는 방법에 대한 자세한 내용은 [테마](/spreadjs/docs/v19/features/styletheme) 항목을 참조하시기 바랍니다.