# 셀 정렬 및 들여쓰기

## Content

셀에서 텍스트를 정렬하거나 들여쓰기를 설정할 수 있으며, 텍스트에 데코레이션을 추가할 수도 있습니다. 수직 및 수평 정렬은 [hAlign](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#hAlign) 과 [vAlign](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#vAlign) 메서드를 사용하여 지정할 수 있으며, 들여쓰기는 [textIndent](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#textIndent) 메서드를 사용하여 지정할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/cellalign.png)

[vAlign](/spreadjs/api/v18/classes/GC.Spread.Sheets.CellRange#vAlign) 메서드는 아래 그림과 같이 셀 편집 모드에서도 텍스트의 수직 정렬을 지원합니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/edit_mode_cell.png)

아래 표는 하이퍼링크 셀에서 수평 정렬과 텍스트 들여쓰기가 동시에 작동하는 방식을 설명합니다:

| HorizontalAlignment | TextIndent |
| ------------------- | ---------- |
| Left | `textIndent` 값이 증가하면 하이퍼링크 텍스트가 오른쪽으로 탭 너비만큼 이동합니다. |
| Center | 하이퍼링크 텍스트가 가운데로 정렬됩니다. |
| Right | `textIndent` 값이 증가하면 하이퍼링크 텍스트가 왼쪽으로 탭 너비만큼 이동합니다. |

> **참고**: 셀 편집 모드에서 텍스트의 수직 정렬은 `"textarea"` 요소가 아닌 `"editable div"`일 때만 지원됩니다. 텍스트 셀 타입의 셀을 데스크탑 장치에서 사용할 때, 편집 모드에서 텍스트 수직 정렬을 구현하려면 `textarea` 요소를 `editable div`로 교체해야 합니다.
> IME 모드는 Google Chrome과 Mozilla Firefox 브라우저에서는 작동하지 않습니다.

아래 코드 샘플은 셀 B2에 대해 수직 및 수평 정렬을 설정하고, 셀 B3에 대해 텍스트 들여쓰기를 지정하는 방법을 보여줍니다.

```javascript
window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
  
    // 문자열의 수평 및 수직 정렬을 "center"로 설정
   var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
   cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
   cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
   cell.value("Alignment");
    // 문자열의 들여쓰기를 설정
   cell = activeSheet.getCell(2, 1, GC.Spread.Sheets.SheetArea.viewport);
   cell.textIndent(2);
   cell.value("Indent");
   activeSheet.getRange(1, -1,  2, -1, GC.Spread.Sheets.SheetArea.viewport).height(40);
   activeSheet.getRange(-1, 1, -1, 1, GC.Spread.Sheets.SheetArea.viewport).width(120);
}
```

## 선택 영역 가운데 맞춤

SpreadJS는 셀을 병합하지 않고도 선택한 셀 범위의 가운데에 콘텐츠를 정렬할 수 있도록 하는 "선택 영역 가운데 맞춤(center across selection)"` `수평 정렬 기능을 제공합니다. 이 정렬은 **HorizontalAlign.centerContinuous** 열거형 옵션을 사용하여 설정할 수 있습니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/centerAcrossSelection.gif)

아래 표는 `"Center Across Selection"` 수평 정렬 사용 시의 다양한 동작을 보여줍니다:

| **동작** | **예시** |
| --- | --- |
| 정렬이 설정된 셀 범위에서 각 셀은 오른쪽으로 연속된 빈 셀을 확인한 후, 전체 셀을 기준으로 콘텐츠를 가운데에 배치합니다. | ![center-selection-1.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/center-selection-1.9c7358.gif) |
| 나중에 선택된 범위에 값이 입력되면, 선택 및 가운데 정렬 범위는 해당 셀 이후를 제외하도록 업데이트됩니다. | ![center-selection-2.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/center-selection-2.4e1a03.gif) |
| 선택 범위는 항상 포맷이 지정된 셀에서 시작됩니다. 따라서 셀 왼쪽에서 선택이 확장된 경우, 해당 셀들은 포함되지 않습니다. | ![center-selection-3.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/center-selection-3.674f8b.gif) |
| 열 크기가 조정되면 가운데 정렬 위치도 함께 조정됩니다. | ![center-selection-4.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/center-selection-4.8169d7.gif) |

다음 코드 샘플은 워크시트에서 `"Center Across Selection"` 수평 정렬을 구현하는 방법을 보여줍니다:

```javascript
activeSheet.getCell(1,1).value("Center Across Selection");
activeSheet.getRange(1, 1, 1, 5, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.centerContinuous);
```

"Center Across Selection" 수평 정렬은 SpreadJS의 다른 기능들과 다음과 같이 상호작용합니다:

* **Overflow (오버플로우)**: 정렬된 콘텐츠가 선택 범위 너비를 초과하면 양쪽으로 오버플로우가 발생합니다.
* **Wrap Text (줄 바꿈)**: 행 높이 속성이 적용되어, 선택된 영역 내에서 텍스트가 줄 바꿈됩니다.
* **Shrink to Fit (크기 자동 조정)**: 이 옵션이 선택된 경우, 콘텐츠가 선택된 범위 내에 맞도록 실제 글꼴 크기를 계산하는 데 너비 속성이 사용됩니다.
* **Accounting Number Format (회계 숫자 서식)**: 텍스트를 직접 가운데 정렬하는 대신, 기호와 값을 양쪽으로 분산시킵니다.
* **Text Indent (들여쓰기)**: 들여쓰기는 0으로 고정됩니다.
* **Orientation (텍스트 방향)**: 텍스트 방향은 0으로 고정됩니다.
* **Merged Cells (병합된 셀)**: 병합된 셀에서는 `"Center Across Selection"`을 사용할 수 없습니다. 병합된 셀에 적용하면 `"Center"`로 대체됩니다.

## SpreadJS 디자이너에서 사용하기

"셀 서식(Format Cells)" 창의 "맞춤(Alignment)" 탭에서 정렬 및 들여쓰기 기능을 사용할 수 있습니다.
홈(Home) 탭 > 맞춤(Alignment) 그룹 > 오른쪽 아래 화살표 버튼을 클릭하여 "셀 서식(Format Cells)" 창을 엽니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/alignment-tab-designer.gif)