Angular 그리드 크기 조정

    사용자가 겪을 수 있는 다양한 시나리오를 수용하기 위해 IgxGrid의 크기를 조정하는 방법에는 여러 가지가 있습니다. 일부는 간단하지만 일부는 더 복잡할 수 있으므로 각 항목을 더 자세히 살펴보겠습니다. 예를 들어 각각에 대해 백분율을 사용할 때 약간의 차이가 있으므로 width와 height 별도로 설정해 보겠습니다.

    ​IgxGrid의 테두리 및 패딩 크기는 너비/높이 크기 계산에 사용되거나 테두리 상자 크기 조정이라고도 합니다. 모든 시나리오에 적용됩니다.

    Note

    사용자가 테두리 상자 크기를 재정의하는 경우 IgxGrid의 크기가 올바르게 지정된다고 보장할 수 없습니다.

    Width

    ​width 입력에 값이 할당되지 않은 경우 기본값은 100% 이고 IgxGrid는 사용 가능한 공간을 채우려고 시도합니다. Percentages 섹션에서 그리드가 이에 어떻게 반응하는지 확인할 수 있습니다.

    Note

    수동으로 설정 width 스타일 IgxGrid 그 자체로 예상치 못한 동작이 발생하게 됩니다.

    Null

    그리드의 width​ ​null 값을 허용할 수 있으며, 이 값을 설정하면 DOM의 모든 열이 렌더링됩니다. 그에 따라 그리드 크기가 조정되므로 열 가상화가 적용되지 않으므로 그리드 수평 스크롤 막대가 없습니다.

    • 6개의 열이 있고 그 중 너비가 정의되어 있지 않은 경우 그리드의 width는 816px 입니다. 이 시나리오에서는 기본적으로 각 열에 136px​ ​width 할당되어 있기 때문입니다. 열의 width 백분율로 표시되는 경우에도 마찬가지입니다. 수직 스크롤 막대가 렌더링되거나 추가 열을 렌더링하는 기능이 있는 경우 해당 너비도 추가됩니다.

    • 열 너비가 200px로 설정된 6개의 열이 있는 경우 창에 맞고 모두 표시됩니다.

    • 브라우저 보기에서 벗어나는 열이 더 많거나 너비가 더 큰 열이 있는 경우에도 모두 렌더링됩니다. 동일한 수의 열이 있지만 각각의 열 너비는 300px 입니다. 브라우저 보기 영역에 모두 맞지 않기 때문에 기본적으로 스크롤 막대가 생성됩니다. 다음 예에서는 정확한 시나리오를 보여줍니다.

    • 그리드에 어떤 종류의 상위 요소가 있고 오버플로가 설정되지 않은 경우에도 모든 열이 표시되도록 렌더링됩니다. 그렇지 않고 상위 요소에 오버플로 auto 또는 scroll 있는 경우 해당 상위 요소의 스크롤 막대가 기본적으로 렌더링됩니다. 다음 예에서는 더 쉽게 시각화할 수 있도록 부모의 높이가 더 큽니다.

    Note

    이러한 동작으로 인해 그리드 데이터에 너무 많은 열이 포함되어 있으면 모든 열이 가상화 없이 렌더링되므로 브라우저 성능에 심각한 영향을 미칠 수 있습니다.

    Pixels

    ​IgxGrid width 입력이 픽셀로 설정되면 전체 그리드 크기가 해당 값으로 설정되고 고정됩니다. 브라우저 크기 조정이나 DOM 변경에 반응하지 않지만 그리드 콘텐츠에는 해당되지 않습니다.

    • 그리드가 수평 스크롤바를 렌더링하기 위해 너비가 픽셀 단위로 설정된 경우 콘텐츠 너비가 지정된 그리드 width 초과해야 합니다. 예를 들어 열의 총 너비가 1200px 초과한다고 가정해 보겠습니다. 이 경우 가로 스크롤 막대가 렌더링됩니다.

    • 그리드에 상위 요소가 있는 시나리오의 경우 스크롤 막대를 렌더링할지 여부는 상위 스타일에 따라 달라집니다. 그리드 자체와 관련된 다른 모든 것은 여전히 유지됩니다. 상위 요소 너비가 그리드 너비보다 작고 오버플로 스타일이 auto 또는 scroll로 설정된 경우 기본적으로 스크롤 막대가 렌더링됩니다. 예를 들어 상위 요소의 width​ ​1000px로 설정되어 있고 IgxGrid width 여전히 1200px 인 경우 다음 그림과 유사하게 보입니다.

    Percentages

    때 width ~의 IgxGrid 백분율로 설정하면 상위 요소의 너비에 따라 그리드 크기가 조정됩니다. 상위 요소에 너비가 지정되지 않은 경우 IgxGrid 브라우저 창을 기준으로 크기가 조정됩니다.

    • 예를 들어 그리드 width 입력을 100%로 설정하고 상위 요소가 없으면 브라우저 창에서 사용 가능한 너비의 100%를 채웁니다. 크기가 조정되면 그에 따라 그리드의 크기도 조정됩니다.

    • 그리드의 너비를 100%로 설정하고 특정 너비가 1200px 인 상위 요소가 있는 경우 이는 그리드의 크기가 해당 요소를 기준으로 크기가 지정되고 최종 너비는 1200px이 됨을 의미합니다.

    • ​width가 1000px 인 상위 요소가 있고 그리드 width​ ​150%로 설정된 경우 계산된 그리드 너비는 1500px이 됩니다. 이 경우 그리드는 여전히 완전히 표시되도록 렌더링되지만 부모의 overflow: auto 설정하면 해당 부모는 자체적으로 스크롤 막대를 렌더링합니다.

    Height

    기본적으로 IgxGrid에 높이가 정의되어 있지 않으면 100%로 설정됩니다. Percentages 섹션에서 DOM 구조에 따라 그리드가 어떻게 반응하는지 확인할 수 있습니다.

    Note

    수동으로 설정 height 스타일 IgxGrid 그 자체로 예상치 못한 동작이 발생하게 됩니다.

    Null

    ​IgxGrid height 입력은 null 값을 허용할 수 있으며, 이 값을 설정하면 개수에 관계없이 스크롤 막대 없이 모든 행을 표시합니다. 이 경우 그리드는 어쨌든 모든 행을 렌더링하므로 수직 가상화가 없습니다.

    • 이 경우 14개 행이 있는 데이터가 있는 경우 그리드는 14개 행을 모두 렌더링하고 그리드 내부에 빈 공간 없이 모두 표시되도록 그리드 크기를 조정합니다.

    • 대신 24개의 행이 있는 경우 그리드는 여전히 모든 행을 렌더링하지만 행이 너무 많기 때문에 브라우저 경계를 초과합니다. 이것이 바로 브라우저 자체가 기본적으로 세로 스크롤 막대를 렌더링하여 사용자가 나머지 행까지 아래로 스크롤할 수 있게 하는 이유입니다.

    • ​height 정의된 상위 요소가 있는 경우 그리드는 여전히 모든 행을 렌더링하며 영향을 받지 않습니다. 부모의 height​ ​650px 이라고 가정해 보겠습니다. overflow​ ​auto 또는 scroll로 설정된 경우 수직 스크롤 막대가 렌더링되지만 그리드는 여전히 영향을 받지 않습니다.

    Note

    이러한 동작으로 인해 그리드 데이터에 너무 많은 행이 포함되어 있으면 모든 행이 가상화 없이 렌더링되므로 브라우저 성능에 심각한 영향을 미칠 수 있습니다.

    Pixels

    ​IgxGrid height 픽셀 단위로 설정하는 것은 width 픽셀 단위로 설정되는 방식과 유사하게 모든 경우에 그리드의 크기가 특정 크기로 조정되므로 더 간단합니다.

    • 예를 들어, 데이터에 대해 4개 행이 있는 높이 500px 설정하면 그리드는 해당 크기로 배치되고 4개 행으로는 가시 영역을 채우기에 충분하지 않기 때문에 빈 영역이 있을 것으로 예상됩니다.

    • ​height 픽셀로 설정된 경우 행 수가 그리드의 표시 영역을 초과하면 수직 스크롤 막대가 렌더링됩니다. 예를 들어 높이가 500px로 설정되고 행이 14개인 그리드는 다음과 같이 렌더링됩니다.

    • ​height 정의된 상위 요소가 있는 경우 overflow​ ​auto 또는 scroll로 설정되지 않은 한 그리드는 여전히 완전히 표시됩니다. 그렇지 않으면 스크롤바가 렌더링됩니다.

    Percentages

    ​height 입력이 백분율로 설정되면 IgxGrid는 상위 요소 높이를 기준으로 크기를 조정합니다. 상위 요소의 height 픽셀 또는 백분율로 설정된 경우 그리드의 크기는 상위 요소의 크기에 비례합니다.

    상위 요소에 높이가 정의되어 있지 않으면 브라우저는 처음에 높이를 할당하지 않고 하위 요소와 해당 크기에 따라 크기를 지정합니다. 이것이 바로 그리드가 이를 기반으로 백분율 크기 조정을 적용하기 위해 사용할 기본 높이를 알 수 있는 방법이 없는 이유입니다. 이러한 이유로 최대 10개의 행을 렌더링하고 행이 더 많은 경우 세로 스크롤 막대가 렌더링됩니다. 그렇지 않으면 그리드가 렌더링된 행 수에 맞춰집니다. 다음 예에서 이 시나리오를 더 자세히 살펴보겠습니다.

    ​width​ ​1200px로 설정하고 상위 요소에 크기가 적용되지 않도록 해보겠습니다.

    • 행이 10개 미만인 경우 그리드는 마지막 행과 표시 영역 하단 사이에 빈 공간을 두지 않고 `표시 영역의 모든 행을 맞추려고 시도합니다. 예를 들어 7개의 행으로 구성된 그리드 데이터가 있다고 가정해 보겠습니다. 그리드는 세로 스크롤 막대 없이 그리드 내부에 빈 공간 없이 7개 행을 모두 렌더링합니다.

    • 행이 10개보다 많으면 나머지 행에 대해 수직 스크롤 막대가 렌더링되며 언제든지 10개의 행만 표시될 수 있습니다. 다음 예에서는 행 번호만 14로 증가됩니다.

    • 상위 요소 높이를 800px로 설정하고 IgxGrid를​ ​100% 높이로 설정하면 그리드 크기가 800px의 100%로 조정된다는 의미입니다.

    • ​IgxGrid height​ ​100% 보다 큰 숫자로 설정되고 상위 요소에 높이가 있는 경우 상위 요소가 스크롤 막대를 렌더링하려면 overflow​ ​auto 또는 scroll로 다시 설정해야 합니다. 그렇지 않으면 그리드가 완전히 표시되고 크기는 상위 크기를 기준으로 합니다.

    • 브라우저 창에서 그리드 크기를 100%로 설정하려면 body 및 상위 그리드 요소 높이를 모두 100%로 설정해야 합니다. 이 경우 상위 요소의 크기를 조정할 수 있으며 브라우저의 크기를 조정하면 그에 따라 그리드의 크기도 조정됩니다.

    Column Sizing

    그리드 크기 자체에 따라 그 안에 있는 열의 크기도 다르게 조정될 수 있으며 이로 인해 그리드가 가로 스크롤 막대를 렌더링할지 여부가 발생할 수 있습니다. 열의 너비는 픽셀, 백분율로 설정될 수 있으며 아무것도 설정되지 않은 경우 자동 크기 조정이 가능합니다. 이 섹션에서는 이러한 시나리오에 대해 자세히 살펴보겠습니다.

    Default

    기본적으로 열에 지정된 너비가 없으면 자동 크기 조정을 시도하므로 그리드 보기 영역에 빈 공간이 있으면 채워집니다. 자동 크기 조정된 열의 최소 너비는 136px 이므로 해당 열에 사용 가능한 영역이 136px 미만인 경우 기본값은 해당 크기입니다.

    이러한 시나리오에서 표 크기를 조정하면 열 너비도 변경 사항을 반영하여 업데이트되므로 사용 가능한 새 빈 공간이 채워집니다.

    • 열에 지정된 width 없고 IgxGrid의​ ​width​ ​null로 설정된 경우 크기는 최소 136px로 조정됩니다. 즉, width null 이고 너비가 없는 6개 열이 있는 그리드의 경우 각 열의 크기는 136px로 지정됩니다.

    • 자동 크기 조정된 열이 여러 개 있는 경우 사용 가능한 공간을 서로 균등하게 나눕니다. 즉, 6개의 열이 있고 1200px의 빈 영역이 있는 경우 각 열의 크기는 200px로 지정됩니다.

    • 사용 가능한 빈 공간이 있어 자동 크기 조정된 각 열이 136px 미만이 되는 경우 모든 자동 크기 조정 열은 기본적으로 136px로 설정되고 그리드는 가로 스크롤 막대를 렌더링합니다. 다음 예에서는 12개의 자동 크기 열과 그리드 width​ ​1000px로 설정하겠습니다.

    • 열에 width 지정되지 않았지만 다른 모든 열에 width (픽셀 또는 백분율)가 있는 경우 해당 열도 사용 가능한 공간을 채우려고 시도합니다. 예를 들어, 첫 번째 열에 너비가 설정되어 있지 않고 다른 5개의 열 모두 width가 100px 인 경우 첫 번째 열이 나머지 열을 채웁니다.

    • 여러 열에 width 지정되지 않은 경우에도 동일하게 적용되며 모두 사용 가능한 공간을 서로 균등하게 나눕니다. 다음 그림에서 첫 번째 열의 width​ ​100px로 설정되어 있습니다.

    Note

    행 선택기 확인란 열 등과 같은 기능 열은 열 크기를 자동 조정할 때 고려되는 추가 공간을 채웁니다.

    Pixels

    열에 특정 width (픽셀)가 설정된 경우 수동으로 크기를 조정하지 않는 한 해당 크기가 유지됩니다. 열의 결합된 width 정적이므로 IgxGrid width 보다 작거나 초과할 수 있습니다.

    • 모든 열의 결합된 width​ ​IgxGrid width 보다 작으면 그리드 내부에 열이 채울 수 없는 빈 공간이 있게 됩니다. 이는 IgxGrid의 예상되는 동작입니다. 다음 예에서는 열 너비가 150px 입니다.

    • 모든 열의 결합된 width 실제 IgxGrid width 보다 큰 경우 가로 스크롤 막대가 렌더링됩니다. 다음 예에서 6개의 열 각각의 너비는 300px 이고 그리드의 너비는 1200px 입니다. 즉, 결합된 열의 크기가 600px 초과하여 범위를 벗어났습니다.

    Auto

    열이 auto으로 설정되면 열의 가장 긴 단어에 맞게 크기가 조정됩니다. 값이 매우 짧은 셀이 있고 값이 매우 긴 셀이 있으면 빈 영역이 가능합니다. 이 시나리오에서는 열의 모든 셀이 가장 긴 값을 가진 셀의 너비를 사용하도록 조정됩니다.

    Percentages

    ​width 백분율로 설정된 경우 열의 크기는 그리드 크기를 기준으로 계산됩니다. 이는 픽셀 단위의 너비가 작동하는 방식과 유사하지만 열에 대한 응답성을 제공합니다. 즉, 그리드의 크기가 조정되면 그에 따라 열의 크기도 조정됩니다.

    • 모든 열의 결합된 너비가 픽셀 단위와 유사하게 100% 미만인 경우 열이 덮지 않는 그리드의 빈 영역이 있을 수 있습니다.

    • 결합된 너비가 정확히 100% 인 경우 열은 그리드의 사용 가능한 모든 공간을 채웁니다.

    • 사용자가 열을 볼 수 없도록 결합된 너비가 100%를 초과하는 경우 가로 스크롤 막대가 렌더링됩니다.

    • 열이 백분율로 설정되고 그리드 width​ ​null로 설정된 경우 각 열에 136px​ ​width 적용됩니다. 그 이유는 width 자체가 없고 width​ ​null 인 경우 콘텐츠의 크기에 의존하기 때문에 열의 크기를 그리드에 상대적으로 조정할 수 없기 때문입니다. 다음 예에서는 6개 열 모두 width​ ​50%로 설정되어 있습니다.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.