# 수식 입력 상자를 컨트롤로 사용하기

## Content

페이지에서 수식 입력 상자를 컨트롤로 사용할 수 있습니다.
다음 이미지와 같이 수식 입력 상자 컨트롤에서 수식을 입력하거나 볼 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/formulaboxcontrol.png)
수식 입력 상자 컨트롤에 추가할 셀 범위를 선택할 수도 있습니다.
입력 상자에 있는 수식 범위 아이콘을 선택한 다음, Ctrl 키를 누르거나 텍스트 상자에 쉼표(,)를 추가하여 여러 범위를 선택합니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/formulacrange.png)
다음 코드 샘플은 페이지에 수식 입력 상자 컨트롤을 추가하는 예제입니다.

```html
<script>
window.onload = function(){
                var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
                var activeSheet = spread.getActiveSheet();
activeSheet.setArray(0, 0, [1, 2, 3, 4, 5]);
var fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("formulaTextBox"));
fbx.workbook(spread);
                      }
</script>
...
<input type="text" id="formulaTextBox" />
```

다음 코드 샘플은 선택한 범위를 수식 입력 상자에 추가할 수 있도록 합니다.

```javascript
<script type="text/javascript">
    window.onload = function(){
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 });
        rangeSelector = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(document.getElementById("ftb"), {rangeSelectMode: true});
        rangeSelector.workbook(spread);
    }
    function buttonClick(){
        alert(rangeSelector.text());
    }
</script>
...
<div id="ss" style="width:50%; height:400px; border:1px solid gray;"></div>
<div id="ftb" style="width:50%;height:20px;border:1px solid gray"></div>
<button onclick="buttonClick()">Get Range Text</button>
```

## **수식 입력 상자 레이아웃 변경**

SpreadJS에서는 셀 내 수식 입력 상자 및 해당 팝업 요소의 레이아웃을 워크시트 전반에 걸쳐 사용자 지정할 수 있습니다. 여러 워크시트에 대한 참조를 바인딩하는 동안 셀 내 수식 입력 상자를 숨기거나 이동할 수 있습니다. 이를 위해 CSS 파일에서 `.gc-across-sheet-ftb` 및 `.gc-across-sheet-func-popup` 클래스의 CSS 속성을 편집하면 됩니다.
다음 샘플 CSS 코드는 워크시트 전반의 셀 내 수식 입력 상자 레이아웃을 사용자 지정하는 방법을 설명합니다:

```html
<!-- 워크시트 전반의 셀 내 수식 입력 상자 숨기기 -->
<style>       
    .gc-across-sheet-ftb {            
        z-index: -1 !important;        
    }        
    .gc-across-sheet-func-popup {            
        z-index: -1 !important;        
    }   
</style>

// 또는    

<style>      
    .gc-across-sheet-ftb {            
        width: 0px !important;            
        height: 0px !important;            
        border: none !important;        
    }      
    .gc-across-sheet-func-popup {            
        width: 0px !important;            
        height: 0px !important;            
        border: none !important;            
        overflow: hidden;        
    }   
</style> 

<!-- 워크북 호스트 위로 셀 내 수식 입력 상자 이동 -->
    <style>        
        .gc-across-sheet-ftb {            
            top: 10px !important;        
        }        
        .gc-across-sheet-func-popup {            
            max-height: 80px;            
            overflow-y: scroll;       
        }
    </style>
```

> **참고:** 셀 내 워크시트 전반의 수식 입력 상자 및 팝업 요소는 SpreadJS Designer에서는 숨겨져 있습니다.