셀 정렬 및 들여쓰기

SpreadJS는 셀 내 텍스트의 정렬 및 들여쓰기에 대해 유연한 옵션을 제공합니다.

정렬과 들여쓰기는 API를 통해 프로그래밍 방식으로 설정할 수 있으며(hAlign, vAlign, textIndent와 같은 메서드 사용) 또는 디자이너에서 시각적으로 설정할 수도 있습니다.

이 기능들을 사용하면 셀 콘텐츠의 위치와 표시 방식을 완전히 제어할 수 있습니다.

hAlign 메서드를 사용하여 가로 정렬을 지정할 수 있습니다.

가로 정렬 유형	설명
일반	셀 내용 유형에 따라 텍스트를 자동으로 정렬합니다.
왼쪽	셀의 왼쪽 가장자리에 콘텐츠를 정렬합니다.
가운데	셀 내에서 콘텐츠를 가로 방향으로 가운데 정렬합니다.
오른쪽	셀의 오른쪽 가장자리에 콘텐츠를 정렬합니다.
선택 영역의 가운데로	셀 병합 없이 선택한 범위 전체에서 콘텐츠를 가운데 정렬합니다.
균등 분할	문자를 셀 너비 전체에 균등하게 분배합니다.
양쪽 맞춤	텍스트 줄이 좌우 가장자리에 맞도록 간격을 조정합니다.

vAlign 메서드를 사용하여 세로 정렬을 지정할 수 있습니다.

세로 정렬 유형	설명
위쪽	셀의 상단 가장자리에 콘텐츠를 정렬합니다.
가운데	셀 내에서 콘텐츠를 세로 방향으로 가운데 정렬합니다.
아래쪽	셀의 하단 가장자리에 콘텐츠를 정렬합니다.
양쪽 맞춤	줄 간격을 조정하여 텍스트가 셀 높이를 고르게 채우도록 합니다.

선택 영역의 가운데로

SpreadJS는 셀을 병합하지 않고도 선택한 셀 범위의 가운데에 콘텐츠를 정렬할 수 있도록 하는 "선택 영역의 가운데로" 수평 정렬 기능을 제공합니다. 이 정렬은 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의 다른 기능들과 다음과 같이 상호작용합니다:

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

가로 균등 분할

SpreadJS에서 가로 균등 분할 정렬은 셀 너비 전체에 텍스트를 고르게 분배합니다. 균등 분할 옵션은 가운데 정렬과 줄 바꿈의 조합입니다.

가로 균등 분할 정렬을 사용하면 텍스트의 각 줄마다 단어가 셀 너비 전체에 균등하게 배치되며, 들여쓰기 값이 적용되면 셀의 좌우 여백이 채워집니다.

따라서 균등 분할 옵션과 들여쓰기 값을 함께 적용하면 각 줄의 양쪽 가장자리가 모두 정렬됩니다. 이 가로 정렬 유형은 HorizontalAlign.distributed 열거형 옵션을 사용하여 설정할 수 있습니다.

다음 코드 샘플은 워크시트에서 가로 균등 분할 정렬을 구현합니다.

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의 다른 기능 간 상호작용:

줄 바꿈 - 균등 분할 정렬된 콘텐츠는 줄 바꿈이 자동 적용되므로 별도로 설정해도 차이가 없습니다.
자동 맞춤 - 균등 분할 정렬은 이 옵션을 비활성화합니다.
텍스트 들여쓰기 - 균등 분할 정렬된 콘텐츠는 셀의 좌우가 모두 들여쓰기 됩니다.
마지막 줄 맞춤 - 균등 분할 정렬은 이 옵션을 비활성화합니다.
말줄임표 표시 - 균등 분할 정렬은 이 옵션을 비활성화합니다.

양쪽 맞춤 정렬

양쪽 맞춤 정렬 기능은 텍스트를 셀 너비와 높이에 맞춰 수평 및 수직으로 고르게 분배합니다.

텍스트 줄 바꿈을 자동으로 적용하고 단어 및 줄 간격을 조정하여, 최소한의 수동 조정으로 깔끔하게 정렬된 문서를 만들 수 있습니다.

다음 그림과 표는 다양한 레이아웃 조건에서 정렬이 수평 및 수직으로 어떻게 작동하는지 보여줍니다.

텍스트 방향	동작 설명	예시 이미지
수평	각 줄의 첫 문자와 마지막 문자를 셀의 좌우 여백에 맞춰 정렬합니다(마지막 줄 제외). 마지막 줄 또는 단일 줄 텍스트는 기본적으로 왼쪽 정렬됩니다. 텍스트를 셀 너비 전체에 고르게 분배하기 위해 단어 간격과 필요시 줄 간격을 자동 조정합니다. 과도한 단어 간격을 줄이기 위해 하이픈을 지원합니다.
수직	첫 줄은 셀의 상단 여백, 마지막 줄은 하단 여백에 맞춰 정렬합니다. 단일 줄 텍스트는 상단에 정렬됩니다. 여러 줄이 있을 경우, 텍스트 줄을 셀 높이에 맞춰 균등 분배합니다.

사용 예시

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)" 창을 엽니다.

셀 정렬 및 들여쓰기

선택 영역의 가운데로

가로 균등 분할

양쪽 맞춤 정렬

SpreadJS 디자이너에서 사용하기

제품

고객 서비스

메시어스 정보

정책(Policy)