[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

테두리, 대각선, 눈금선

SpreadJS는 셀, 열 또는 행 주위에 테두리를 설정할 수 있습니다. 또한 기본적으로 눈금선을 표시합니다. 셀, 열 또는 행 주위의 테두리 색이나 선 스타일을 설정할 수 있습니다. 눈금선의 색과 표시 여부를 지정할 수도 있습니다. 셀 및 셀 범위에 대각선을 설정할 수도 있습니다.

테두리 색 설정

SpreadJS에서는 셀의 각 면에 테두리 색을 설정하여 테두리를 사용자 지정할 수 있습니다.

setBorder 메서드를 사용하여 테두리를 설정합니다. borderBottom, borderTop, borderRight 및 borderLeft 메서드를 사용하여 셀 테두리를 설정할 수도 있습니다.

SpreadJS worksheet cells with customized border colors and line styles, demonstrating how developers apply LineBorder settings to cells, rows, and columns.

다음 코드 예제에서는 셀의 테두리 색을 설정합니다.

activeSheet.getRange(2, 2, 2, 2, GC.Spread.Sheets.SheetArea.viewport).setBorder(new GC.Spread.Sheets.LineBorder("#8A2BE2", GC.Spread.Sheets.LineStyle.medium), {all:true});
activeSheet.getRange(-1,5, -1, 1).borderTop(new GC.Spread.Sheets.LineBorder("#F0FFFF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderLeft(new GC.Spread.Sheets.LineBorder("#F5F5DC",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(-1, 5, -1, 1).borderRight(new GC.Spread.Sheets.LineBorder("#FF02FF", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(-1, 5, -1, 1).borderBottom(new GC.Spread.Sheets.LineBorder("#FFE4C4",GC.Spread.Sheets.LineStyle.thin));
activeSheet.getRange(5, -1, 1, -1).borderTop(new GC.Spread.Sheets.LineBorder("#A52A2A",GC.Spread.Sheets.LineStyle.mediumDashed));
activeSheet.getRange(5, -1, 1, -1).borderLeft(new GC.Spread.Sheets.LineBorder("#FF02FF",GC.Spread.Sheets.LineStyle.medium));
activeSheet.getRange(5, -1, 1, -1).borderRight(new GC.Spread.Sheets.LineBorder("#5F9EA0", GC.Spread.Sheets.LineStyle.dashDot));
activeSheet.getRange(5, -1, 1, -1).borderBottom(new GC.Spread.Sheets.LineBorder("#6495ED",GC.Spread.Sheets.LineStyle.dotted));

테두리 선 스타일 설정

SpreadJS의 대각선 테두리 기능은 아래 이미지와 같이 모든 유형의 선 스타일(dashDot, dashDotDot, dashed, dotted, double, empty, hair, medium, mediumDashDot, mediumDashDotDot, mediumDashed, SlantedDashDot, thick, thin)을 지원합니다.

SpreadJS cells displaying the supported diagonal border LineStyle values, including dashed, dotted, double, medium, thick, thin, and compound patterns.

다음 이미지는 셀의 각 면에 서로 다른 선 유형과 색을 설정한 모습을 보여 줍니다.

SpreadJS worksheet cell with different colors and line styles on each side, produced through the borderLeft, borderTop, borderRight, and borderBottom methods.

window.onload = function()
{
   var spread =
   new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
   var activeSheet = spread.getActiveSheet();
  
   // Set border lines to cell(1,1).
   var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
   cell.borderLeft(new GC.Spread.Sheets.LineBorder("Red", GC.Spread.Sheets.LineStyle.thick));
   cell.borderTop(new GC.Spread.Sheets.LineBorder("Blue", GC.Spread.Sheets.LineStyle.double));
   cell.borderRight(new GC.Spread.Sheets.LineBorder
   ("Green", GC.Spread.Sheets.LineStyle.dashDot));
   cell.borderBottom(new GC.Spread.Sheets.LineBorder
   ("Yellow", GC.Spread.Sheets.LineStyle.mediumDashed));
}

위의 선 스타일 외에도 대각선 테두리는 JSON 직렬화/역직렬화, Excel I/O 및 PDF 내보내기(인쇄용)를 지원합니다.

둥근 테두리 설정

SpreadJS는 셀, 범위, 병합 영역 및 머리글 영역에 둥근 테두리를 지원합니다. 둥근 테두리는 보고서 스타일 레이아웃, 그룹화된 비즈니스 양식, 급여 명세서 스타일 양식 및 워크시트 셀에서 직접 둥근 사각형 영역을 만들어야 하는 기타 레이아웃에 유용합니다.

borderRadius 스타일 속성 또는 셀 범위의 borderRadius 및 setBorderRadius 메서드를 사용하여 둥근 모서리를 설정할 수 있습니다.

둥근 테두리는 기존 테두리 선 스타일과 함께 동작합니다. 인접한 테두리가 서로 다른 스타일을 사용하는 경우 SpreadJS는 기존 테두리 우선순위 규칙에 따라 우선순위가 높은 테두리를 사용하여 둥근 모서리를 렌더링합니다.

테두리 반경 값

테두리 반경 값은 공백으로 구분된 1~4개의 음수가 아닌 숫자 값을 사용할 수 있는 단축 문자열입니다.

값 개수

의미

1

네 모서리에 동일한 반경을 적용합니다.

2

첫 번째 값을 왼쪽 위와 오른쪽 아래에 적용하고, 두 번째 값을 오른쪽 위와 왼쪽 아래에 적용합니다.

3

첫 번째 값을 왼쪽 위에, 두 번째 값을 오른쪽 위와 왼쪽 아래에, 세 번째 값을 오른쪽 아래에 적용합니다.

4

값을 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순서로 적용합니다.

다음 예제에서는 유효한 테두리 반경 값을 보여 줍니다.

"8"
"8 12"
"8 12 16"
"8 12 16 20"

유효하지 않거나 비어 있거나 0에 해당하는 값은 둥근 모서리를 렌더링하지 않습니다.

스타일을 사용하여 둥근 테두리 설정

Style 개체에 borderRadius를 설정하고 해당 스타일을 셀, 병합 영역 또는 범위에 적용할 수 있습니다.

var sheet = spread.getActiveSheet();
var style = new GC.Spread.Sheets.Style();
style.borderLeft = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderTop = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderRight = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderBottom = new GC.Spread.Sheets.LineBorder("#7da6ff", GC.Spread.Sheets.LineStyle.thin);
style.borderRadius = "8";
sheet.getCell(1, 1).setStyle(style);

image-20260717.6548cc.png

셀 또는 범위에 둥근 테두리 설정

borderRadius 메서드를 사용하여 대상 범위의 각 셀에 동일한 테두리 반경 값을 적용합니다.

sheet.getCell(1, 1).borderRadius("28 0");
sheet.getRange(3, 1, 2, 2).borderRadius("8 12 8 12");

image-20260717.131ca1.png

범위 영역별로 둥근 테두리 설정

범위 수준의 영역별로 둥근 모서리를 적용하려면 setBorderRadius 메서드를 사용합니다.

all 옵션은 선택한 범위의 모든 셀에 동일한 테두리 반경 값을 적용합니다.

sheet.getRange(3, 1, 2, 2).setBorderRadius("8", {
    all: true
});

image-20260717.d4ed98.png

outer 옵션은 계산된 반경 값을 선택한 범위에서 표시되는 바깥쪽 모서리에 적용합니다.

sheet.getRange(3, 1, 2, 2).setBorderRadius("8", {
    outer: true
});

image-20260717.a57ef3.png

outer를 사용하면 SpreadJS가 표시되는 바깥쪽 모서리를 계산할 때 숨겨진 행과 열 및 크기가 0인 행과 열을 건너뜁니다.

image-20260717.0a1822.png

콘텐츠 및 오버플로 동작

둥근 테두리는 셀 내부에 그려지는 콘텐츠의 표시 영역에도 영향을 줍니다.

일반적으로 셀 경계로 제한되는 콘텐츠는 둥근 영역에 맞게 잘립니다. 여기에는 셀 배경색, 이미지 리치 데이터 및 표준 셀 그리기 흐름 내에서 그려지는 기본 셀 콘텐츠가 포함됩니다.

이미 셀 경계를 벗어날 수 있도록 허용된 콘텐츠는 기존 오버플로 동작을 유지합니다. 예를 들어 오버플로 텍스트와 외부 아이콘은 둥근 모서리에 의해 잘리지 않습니다.

image-20260728.f4735a.png

제한 사항

둥근 테두리에는 다음과 같은 제한 사항이 적용됩니다.

  • 둥근 테두리 외부이지만 셀 내부에 있는 영역에는 사용자 지정 배경 스타일이 지원되지 않습니다. 해당 영역에는 기본 배경이 사용됩니다.

  • 기존 회전 테두리 기하 구조 시나리오에서 회전된 텍스트를 사용하는 셀은 자체 둥근 모서리를 렌더링하지 않습니다.

  • 기존 테두리 렌더링에서 지원되지 않는 머리글, 레이아웃 및 테두리 조합은 둥근 테두리를 적용해도 지원되지 않습니다.

  • 둥근 테두리는 추가적인 눈금선 그리기 동작을 제공하지 않습니다.

셀에 대각선 설정

셀에 대각선 테두리를 설정하여 복잡한 데이터 머리글을 구성할 수 있습니다.

셀 또는 셀 범위에 대각선을 설정하려면 diagonalUp 메서드와 diagonalDown 메서드를 사용할 수 있습니다. diagonalUp 메서드는 셀의 오른쪽 위 지점에서 왼쪽 아래 지점으로 이어지는 선을 나타냅니다(아래 다이어그램의 노란색 선 참조). diagonalDown 메서드는 셀의 왼쪽 위 지점에서 오른쪽 아래 지점으로 이어지는 선을 나타냅니다(아래 다이어그램의 녹색 선 참조).

SpreadJS cell diagram distinguishing diagonalUp and diagonalDown border directions for developers creating diagonally divided worksheet headers with the corresponding methods.

다음 코드 예제에서는 셀에 대각선을 설정하는 방법을 보여 줍니다.

var sheet = spread.getActiveSheet();
var cell = sheet.getCell(1, 1);
cell.diagonalDown(new GC.Spread.Sheets.LineBorder("blue",GC.Spread.Sheets.LineStyle.thick));
cell = sheet.getCell(1, 3);
cell.diagonalDown(new GC.Spread.Sheets.LineBorder("green" ,GC.Spread.Sheets.LineStyle.double));
cell.diagonalUp(new GC.Spread.Sheets.LineBorder("yellow",GC.Spread.Sheets.LineStyle.double));

눈금선 옵션 설정

SpreadJS는 눈금선 색을 설정하고 위젯에 가로 또는 세로 눈금선을 표시할지 지정할 수 있는 options.gridline 속성을 제공합니다. 기본적으로 시트에는 세로 및 가로 눈금선이 모두 표시됩니다. 기본 눈금선 색은 #d0d7e5입니다.

다음 코드 예제에서는 눈금선의 표시 여부를 지정하고 눈금선 색을 설정합니다.

worksheet.options.gridline = {color:"#FF2235", showVerticalGridline: true, showHorizontalGridline: false};