[]
셀에서 텍스트를 정렬하거나 들여쓰기를 설정할 수 있으며, 텍스트에 데코레이션을 추가할 수도 있습니다. 수직 및 수평 정렬은 hAlign 과 vAlign 메서드를 사용하여 지정할 수 있으며, 들여쓰기는 textIndent 메서드를 사용하여 지정할 수 있습니다.
vAlign 메서드는 아래 그림과 같이 셀 편집 모드에서도 텍스트의 수직 정렬을 지원합니다.
아래 표는 하이퍼링크 셀에서 수평 정렬과 텍스트 들여쓰기가 동시에 작동하는 방식을 설명합니다:
HorizontalAlignment | TextIndent |
---|---|
Left |
|
Center | 하이퍼링크 텍스트가 가운데로 정렬됩니다. |
Right |
|
참고: 셀 편집 모드에서 텍스트의 수직 정렬은
"textarea"
요소가 아닌"editable div"
일 때만 지원됩니다. 텍스트 셀 타입의 셀을 데스크탑 장치에서 사용할 때, 편집 모드에서 텍스트 수직 정렬을 구현하려면textarea
요소를editable div
로 교체해야 합니다.IME 모드는 Google Chrome과 Mozilla Firefox 브라우저에서는 작동하지 않습니다.
아래 코드 샘플은 셀 B2에 대해 수직 및 수평 정렬을 설정하고, 셀 B3에 대해 텍스트 들여쓰기를 지정하는 방법을 보여줍니다.
Ask ChatGPT
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 열거형 옵션을 사용하여 설정할 수 있습니다.
아래 표는 "Center Across Selection"
수평 정렬 사용 시의 다양한 동작을 보여줍니다:
동작 | 예시 |
---|---|
정렬이 설정된 셀 범위에서 각 셀은 오른쪽으로 연속된 빈 셀을 확인한 후, 전체 셀을 기준으로 콘텐츠를 가운데에 배치합니다. | |
나중에 선택된 범위에 값이 입력되면, 선택 및 가운데 정렬 범위는 해당 셀 이후를 제외하도록 업데이트됩니다. | |
선택 범위는 항상 포맷이 지정된 셀에서 시작됩니다. 따라서 셀 왼쪽에서 선택이 확장된 경우, 해당 셀들은 포함되지 않습니다. | |
열 크기가 조정되면 가운데 정렬 위치도 함께 조정됩니다. |
다음 코드 샘플은 워크시트에서 "Center Across Selection"
수평 정렬을 구현하는 방법을 보여줍니다:
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"
로 대체됩니다.
"셀 서식(Format Cells)" 창의 "맞춤(Alignment)" 탭에서 정렬 및 들여쓰기 기능을 사용할 수 있습니다.
홈(Home) 탭 > 맞춤(Alignment) 그룹 > 오른쪽 아래 화살표 버튼을 클릭하여 "셀 서식(Format Cells)" 창을 엽니다.