# 셀 정렬 및 들여쓰기
## Content
SpreadJS는 셀 내 텍스트의 정렬 및 들여쓰기에 대해 유연한 옵션을 제공합니다.
정렬과 들여쓰기는 API를 통해 프로그래밍 방식으로 설정할 수 있으며(`hAlign`, `vAlign`, `textIndent`와 같은 메서드 사용) 또는 디자이너에서 시각적으로 설정할 수도 있습니다.
이 기능들을 사용하면 셀 콘텐츠의 위치와 표시 방식을 완전히 제어할 수 있습니다.
[hAlign](/spreadjs/api/classes/GC.Spread.Sheets.CellRange#halign) 메서드를 사용하여 **가로 정렬**을 지정할 수 있습니다.
| **가로 정렬 유형** | **설명** |
| -------- | --- |
| 일반 | 셀 내용 유형에 따라 텍스트를 자동으로 정렬합니다. |
| 왼쪽 | 셀의 왼쪽 가장자리에 콘텐츠를 정렬합니다. |
| 가운데 | 셀 내에서 콘텐츠를 가로 방향으로 가운데 정렬합니다. |
| 오른쪽 | 셀의 오른쪽 가장자리에 콘텐츠를 정렬합니다. |
| 선택 영역의 가운데로 | 셀 병합 없이 선택한 범위 전체에서 콘텐츠를 가운데 정렬합니다. |
| 균등 분할 | 문자를 셀 너비 전체에 균등하게 분배합니다. |
| 양쪽 맞춤 | 텍스트 줄이 좌우 가장자리에 맞도록 간격을 조정합니다. |
[vAlign](/spreadjs/api/classes/GC.Spread.Sheets.CellRange#vAlign) 메서드를 사용하여 **세로 정렬**을 지정할 수 있습니다.
| **세로 정렬 유형** | **설명** |
| -------- | --- |
| 위쪽 | 셀의 상단 가장자리에 콘텐츠를 정렬합니다. |
| 가운데 | 셀 내에서 콘텐츠를 세로 방향으로 가운데 정렬합니다. |
| 아래쪽 | 셀의 하단 가장자리에 콘텐츠를 정렬합니다. |
| 양쪽 맞춤 | 줄 간격을 조정하여 텍스트가 셀 높이를 고르게 채우도록 합니다. |
## 선택 영역의 가운데로
SpreadJS는 셀을 병합하지 않고도 선택한 셀 범위의 가운데에 콘텐츠를 정렬할 수 있도록 하는 "선택 영역의 가운데로" 수평 정렬 기능을 제공합니다. 이 정렬은 **HorizontalAlign.centerContinuous** 열거형 옵션을 사용하여 설정할 수 있습니다.
아래 표는 `"Center Across Selection"` 수평 정렬 사용 시의 다양한 동작을 보여줍니다:
| **동작** | **예시** |
| --- | --- |
| 정렬이 설정된 셀 범위에서 각 셀은 오른쪽으로 연속된 빈 셀을 확인한 후, 전체 셀을 기준으로 콘텐츠를 가운데에 배치합니다. |  |
| 나중에 선택된 범위에 값이 입력되면, 선택 및 가운데 정렬 범위는 해당 셀 이후를 제외하도록 업데이트됩니다. |  |
| 선택 범위는 항상 포맷이 지정된 셀에서 시작됩니다. 따라서 셀 왼쪽에서 선택이 확장된 경우, 해당 셀들은 포함되지 않습니다. |  |
| 열 크기가 조정되면 가운데 정렬 위치도 함께 조정됩니다. |  |
다음 코드 샘플은 워크시트에서 `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의 다른 기능들과 다음과 같이 상호작용합니다:
* **오버플로우**: 정렬된 콘텐츠가 선택 범위 너비를 초과하면 양쪽으로 오버플로우가 발생합니다.
* **줄 바꿈**: 행 높이 속성이 적용되어, 선택된 영역 내에서 텍스트가 줄 바꿈됩니다.
* **크기 자동 조정**: 이 옵션이 선택된 경우, 콘텐츠가 선택된 범위 내에 맞도록 실제 글꼴 크기를 계산하는 데 너비 속성이 사용됩니다.
* **회계 숫자 서식**: 텍스트를 직접 가운데 정렬하는 대신, 기호와 값을 양쪽으로 분산시킵니다.
* **들여쓰기**: 들여쓰기는 0으로 고정됩니다.
* **텍스트 방향**: 텍스트 방향은 0으로 고정됩니다.
* **병합된 셀**: 병합된 셀에서는 `Center Across Selection`을 사용할 수 없습니다. 병합된 셀에 적용하면 `Center`로 대체됩니다.
## 가로 균등 분할
SpreadJS에서 가로 균등 분할 정렬은 셀 너비 전체에 텍스트를 고르게 분배합니다. 균등 분할 옵션은 가운데 정렬과 줄 바꿈의 조합입니다.
가로 균등 분할 정렬을 사용하면 텍스트의 각 줄마다 단어가 셀 너비 전체에 균등하게 배치되며, 들여쓰기 값이 적용되면 셀의 좌우 여백이 채워집니다.
따라서 균등 분할 옵션과 들여쓰기 값을 함께 적용하면 각 줄의 양쪽 가장자리가 모두 정렬됩니다. 이 가로 정렬 유형은 `HorizontalAlign.distributed` 열거형 옵션을 사용하여 설정할 수 있습니다.
다음 코드 샘플은 워크시트에서 가로 **균등 분할** 정렬을 구현합니다.
```auto
style.hAlign = GC.Spread.Sheets.HorizontalAlign.distributed;
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1, 1).value("This is Distributed Alignment");
```
가로 균등 분할 정렬과 SpreadJS의 다른 기능 간 상호작용:
* **줄 바꿈** \- 균등 분할 정렬된 콘텐츠는 줄 바꿈이 자동 적용되므로 별도로 설정해도 차이가 없습니다\.
* **자동 맞춤** \- 균등 분할 정렬은 이 옵션을 비활성화합니다\.
* **텍스트 들여쓰기** \- 균등 분할 정렬된 콘텐츠는 셀의 좌우가 모두 들여쓰기 됩니다\.
* **마지막 줄 맞춤** \- 균등 분할 정렬은 이 옵션을 비활성화합니다\.
* **말줄임표 표시** \- 균등 분할 정렬은 이 옵션을 비활성화합니다\.
## 양쪽 맞춤 정렬
**양쪽 맞춤 정렬 기능**은 텍스트를 셀 너비와 높이에 맞춰 수평 및 수직으로 고르게 분배합니다.
텍스트 줄 바꿈을 자동으로 적용하고 단어 및 줄 간격을 조정하여, 최소한의 수동 조정으로 깔끔하게 정렬된 문서를 만들 수 있습니다.
다음 그림과 표는 다양한 레이아웃 조건에서 정렬이 수평 및 수직으로 어떻게 작동하는지 보여줍니다.
| **텍스트 방향** | **동작 설명** | **예시 이미지** |
| ------ | ----- | ------ |
| 수평 | - 각 줄의 **첫 문자와 마지막 문자**를 셀의 **좌우 여백**에 맞춰 정렬합니다(**마지막 줄 제외**).
- **마지막 줄** 또는 **단일 줄 텍스트**는 기본적으로 **왼쪽 정렬**됩니다.
- 텍스트를 셀 너비 전체에 고르게 분배하기 위해 **단어 간격**과 필요시 **줄 간격**을 자동 조정합니다.
- 과도한 단어 간격을 줄이기 위해 **하이픈**을 지원합니다.
|  |
| 수직 | - 첫 줄은 셀의 **상단 여백**, 마지막 줄은 **하단 여백**에 맞춰 정렬합니다.
- 단일 줄 텍스트는 **상단**에 정렬됩니다.
- 여러 줄이 있을 경우, 텍스트 줄을 셀 높이에 맞춰 **균등 분배**합니다.
|  |
**사용 예시**
```javascript
var style = new GC.Spread.Sheets.Style();
style.hAlign = GC.Spread.Sheets.HorizontalAlign.justify;
style.vAlign = GC.Spread.Sheets.VerticalAlign.justify;
activeSheet.setStyle(1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.getCell(1, 1).value("Justified paragraph demonstration.");
```
**양쪽 맞춤 정렬과 다른 레이아웃 기능 간 상호작용**
| **관련 기능** | **상호작용 설명** |
| ----- | ------- |
| 자동 줄 바꿈 | - 양쪽 맞춤 적용 시 시스템이 자동으로 줄 바꿈을 활성화합니다.
- 양쪽 맞춤 적용 중에는 수동 줄 바꿈 토글이 무시됩니다.
|
| 병합 셀 | 병합된 셀의 너비와 높이에 맞춰 자동으로 텍스트를 균등 배치합니다. |
| 텍스트 방향 | - 임의 각도로 텍스트를 회전하면(< 0° 또는 > 0°) 양쪽 맞춤이 무시되고 회전 방향이 정렬을 결정합니다.
- -90° 또는 90°로 회전 시:
- 수평 양쪽 맞춤은 열 단위로 텍스트 배치
- 수직 양쪽 맞춤은 행 단위로 텍스트 배치
- 회전 텍스트 모드에서 양쪽 맞춤은 회전 기준에 따라 위쪽/아래쪽 또는 왼쪽/오른쪽 정렬과 유사하게 동작합니다.
|
| 자동 맞춤 | - 셀에 여러 줄이 있을 경우 자동 맞춤이 적용되지 않음
- 양쪽 맞춤 적용 시 자동 맞춤이 무시되고 비활성화됩니다.
|
| 말줄임표 | 양쪽 맞춤 적용 시 무시됩니다. |
| 서식 있는 텍스트 | - 밑줄/취소선: 양쪽 맞춤 적용 시 단어 사이에서 줄이 나뉠 수 있음
- 목록: 들여쓰기가 올바르게 표시되지 않을 수 있음
- 위/아래 첨자: 양쪽 맞춤 적용 시 비율에 맞게 크기 조정
|
| 들여쓰기 | 수평 정렬이 양쪽 맞춤으로 설정되면 무시됩니다. |
다음 그림은 병합 셀과 다양한 텍스트 방향에서 양쪽 맞춤 정렬이 어떻게 동작하는지 보여줍니다.
다음 그림은 밑줄, 취소선, 목록, 위/아래 첨자 등 다양한 서식의 리치 텍스트가 좌측 상단 기본 정렬과 양쪽 맞춤 정렬에서 어떻게 다른지 보여줍니다.
## SpreadJS 디자이너에서 사용하기
"셀 서식(Format Cells)" 창의 "맞춤(Alignment)" 탭에서 정렬 및 들여쓰기 기능을 사용할 수 있습니다.
홈(Home) 탭 > 맞춤(Alignment) 그룹 > 오른쪽 아래 화살표 버튼을 클릭하여 "셀 서식(Format Cells)" 창을 엽니다.
