다음을 통해 공유

Grid 레이아웃 패널 사용

  • 아티클

Grid 레이아웃 패널은 특정 레이아웃 기능을 관리하기 위해 디자인된 다른 레이아웃 컨테이너에 비해 가장 유연한 레이아웃 컨테이너입니다. Microsoft Expression Blend에서는 Grid 레이아웃 패널을 사용할 수 있는 다음과 같은 두 가지 레이아웃 편집 모드를 제공합니다.

  • 모눈 레이아웃 모드(기본 모드) Cc295203.c76bbf09-1922-4f45-8d92-9c8ae64ca4a4(KO-KR,Expression.30).png   런타임에 모눈의 크기를 조정하는 것과 같은 편집 환경을 제공합니다. 이 모드에서는 사용자가 만든 열 및 행 구분선 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(KO-KR,Expression.30).png을 이동하면 해당 Margin 속성을 유지하도록 해당 행과 열 내의 개체 크기가 변경됩니다.

  • 캔버스 레이아웃 모드 Cc295203.ecb419d9-1def-4c4d-9656-cab9bdb89672(KO-KR,Expression.30).png   캔버스 패널 내에서 편집하는 것과 같은 편집 환경을 제공합니다. 이 모드에서는 사용자가 만든 열 및 행 구분선 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(KO-KR,Expression.30).png을 이동하면 해당 행과 열 내의 개체가 제자리에 그대로 유지되지만 해당 Margin 속성이 업데이트됩니다.

모눈 개체를 선택할 때 왼쪽 위 모퉁이에 있는 모드 아이콘을 클릭하거나 옵션 대화 상자(도구 메뉴)의 아트보드 섹션에서 모눈 레이아웃 모드 사용 확인란을 선택하거나 선택 취소하여 두 모드 간에 전환할 수 있습니다.

모눈 패널 사용을 위한 레이아웃 모드

Cc295203.3078f933-314a-4951-966c-a66f5edbf69f(KO-KR,Expression.30).png

자산 패널 Cc295203.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png 또는 도구 패널의 레이아웃 컨테이너 단추에서 모눈 Cc295203.a87ee957-7fbf-4135-a6ab-6de7e63160aa(KO-KR,Expression.30).png를 선택한 다음 포인터를 사용하여 아트보드로 끌어 문서에 모눈을 추가할 수 있습니다.

Grid 개체 사용 방법에 대한 자세한 내용은 행 또는 열 추가/제거 및 행 또는 열의 크기 조정 옵션 변경을 참조하십시오.

모눈 레이아웃 모드로 표시된 세 개의 행과 세 개의 열로 나눠진 모눈 패널의 개체 정렬

Cc295203.0c06c18b-6bce-4d41-bf0f-0d1f8cdbf5d3(KO-KR,Expression.30).png

위치 지정, 크기 조정 및 정렬

모눈 패널의 레이아웃은 Alignment, Margin, Width 및 Height 속성을 사용하여 효과적으로 개체의 위치 및 크기를 조정하고 정렬하는 용도로 사용합니다.

  • 맞춤   부모 개체를 기준으로 개체의 상대적인 위치를 결정합니다.

  • 여백 - 자식 개체의 외부와 패널의 경계선 사이에 있는 컨트롤 주위의 빈 공간 크기를 결정합니다.

  • 너비 및 높이   픽셀 단위(약 1/96인치인 장치 독립적 단위)의 고정 값입니다. 이러한 속성을 Auto로 설정하면 자식 개체의 크기가 부모 패널의 크기에 따라 자동으로 조정됩니다.

자식 개체 정렬

모눈의 영역을 나눠 모눈 레이아웃 패널 안에서 개체를 정렬할 수 있습니다. 이 작업은 열 및 행 구분선 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(KO-KR,Expression.30).png을 사용하여 모눈 내에서 개체의 레이아웃을 지정할 수 있는 영역을 정의하는 일련의 행과 열을 만드는 방식으로 수행합니다. 모눈 레이아웃 패널이 문서의 활성 컨테이너가 되면 파란색 눈금자가 모눈의 위쪽과 왼쪽을 따라 나타납니다. 선택 도구 Cc295203.2ff91340-477e-4efa-a0f7-af20851e4daa(KO-KR,Expression.30).png를 사용하여 눈금자 위로 포인터를 이동하면 포인터가 더하기(+) 기호가 있는 화살표 Cc295203.a61a7ecb-9364-4bfe-ae2e-fac00d6858ba(KO-KR,Expression.30).png로 바뀌고 열이나 행이 추가될 위치에 주황색 줄이 표시됩니다. 위쪽 눈금자에서 원하는 위치를 클릭하여 모눈의 해당 위치에 열을 추가하고 왼쪽 눈금자를 클릭하여 행을 추가합니다.

열 모눈 구분선 추가

Cc295203.814b7368-8ef4-4771-a067-17e30a9f4bff(KO-KR,Expression.30).png

모눈 레이아웃 패널에서 자식 개체가 서로 겹치도록 그릴 수 있습니다. 겹치는 개체는 부모 개체 내에 개체를 그리거나 배치한 순서인 해당 Z 순서에 따라 표시됩니다. 개체 메뉴에서 순서 지정을 사용하거나 개체 및 타임라인 패널에서 항목을 마우스 오른쪽 단추로 클릭하고 순서 지정을 가리킨 다음 원하는 명령을 클릭하여 개체의 Z 순서를 변경할 수 있습니다. 자식 개체를 여러 열이나 행에 걸쳐 배치할 수도 있습니다.

또한 맞추기를 설정한 후 맞춤선에 맞추어 개체를 더 잘 정렬할 수 있습니다. 맞추기를 사용하면 아트보드에서 개체를 끌어 레이아웃 패널 또는 모눈 패널의 열 및 행 구분선와 같은 동일한 컨테이너 개체 내에 있는 다른 개체의 여백, 기준선(텍스트 개체인 경우) 또는 맞춤(빨간색 파선)에 맞출 수 있습니다.

자세한 내용은 맞추기 설정 또는 해제을 참조하십시오.

행 및 열 크기 조정

모눈 레이아웃 패널의 모눈 레이아웃 모드에 있으면 모눈 패널의 위쪽 및 왼쪽에 있는 눈금자 주위에 자물쇠 아이콘이 나타납니다. 이러한 자물쇠 아이콘을 사용하면 모눈의 행과 열에 사용되는 크기 조정 형식을 설정할 수 있습니다. 행의 높이 값과 열의 너비 값을 설정할 수 있습니다. 모눈의 행과 열 크기를 조정하는 옵션은 세 가지이며 이러한 옵션은 모눈의 자식 개체 정렬에도 영향을 줍니다. 크기 조정 옵션은 다음과 같습니다.

  • 고정 크기 조정 - 픽셀 값(px)을 사용하며 자물쇠 아이콘을 클릭하여 픽셀 크기 조정(잠긴 위치) Cc295203.56fdad3b-cb94-41a2-8afb-3a2bbf4b2f1a(KO-KR,Expression.30).png으로 설정하는 방식으로 설정됩니다. 고정 크기 조정은 행이나 열의 크기가 조정되지 않는다는 의미입니다.

    [!참고]

    Expression Blend 프로젝트에서 픽셀이란 화면 해상도가 96dpi로 설정된 모니터의 픽셀 크기와 동일한 장치 독립적 픽셀이나 장치 독립적 단위를 말합니다. 모니터 크기나 화면 해상도에 관계없이 각 단위는 약 1/96인치입니다.

  • 배율 크기 조정 - 배율 값(*)을 사용하며 자물쇠 아이콘을 클릭하여 배율 크기 조정(잠금 해제된 위치) Cc295203.1b4edaf6-b6a8-4498-80dc-949375fa610d(KO-KR,Expression.30).png으로 설정하는 방식으로 설정됩니다. 배율 크기 조정은 HTML의 백분율 크기 조정과 유사한 효과가 있습니다.

  • 자동 크기 조정   정의되지 않은 Width 및 Height 속성을 사용하며 자물쇠 아이콘을 클릭하여 자동 크기 조정Cc295203.aa9ec064-22f8-4b62-9eed-3f4772362d22(KO-KR,Expression.30).png으로 설정하는 방식으로 설정됩니다. 자동 크기 조정은 부모 개체의 크기가 조정되면 모눈 패널 내의 자식 개체의 크기도 조정된다는 의미입니다.

모눈 패널의 서로 다른 열에 설정된 배율 크기 조정 및 자동 크기 조정

Cc295203.98b234b2-ac3b-441f-9136-98375fee87b7(KO-KR,Expression.30).png

아트보드에서 모눈 구분선 Cc295203.e91e3024-62b1-46db-a73c-7e2ef5fd2780(KO-KR,Expression.30).png을 선택하면 속성 패널을 사용하여 크기 조정 옵션을 선택할 수 있으며 배율 크기 조정이나 고정 크기 조정을 사용할 경우 Width 속성을 조정할 수 있습니다. 속성 패널에서 열 모눈 구분선의 MaxWidth 및 MinWidth 속성을 설정할 수도 있습니다.

자식 개체 위치 지정

캔버스 레이아웃 모드에서는 아트보드에서 직접 작업하고 모눈 패널 내 원하는 지점(경계선 외부 포함)으로 개체를 끌어 시각적으로 개체의 위치를 지정하거나 속성 패널의 레이아웃에서 위치에 대한 정확한 값을 입력할 수 있습니다.

모눈 레이아웃 모드에서는 각 개체에 대해 여백을 설정하여 모눈 내 자식 개체의 위치를 설정할 수 있습니다. 여백은 모눈을 정의하는 행과 열 또는 모눈 내 셀의 가장자리부터 개체까지의 오프셋 크기를 지정합니다. 모눈의 위치로 자식 개체를 끌 때 여백을 설정하며 선택한 개체의 가장자리부터 다음 모눈선(행 또는 열)까지의 거리를 나타냅니다. 여백(매듭 모양) 표시기를 클릭하여 설정할 수도 있습니다. 여백 표시기가 Cc295203.dac083fe-54cd-4cdc-973a-bea351080175(KO-KR,Expression.30).png 또는 Cc295203.7eeec52f-8610-416e-a0f2-79c7bf117e77(KO-KR,Expression.30).png처럼 열려 있으면 여백이 설정되지 않은 것이며, 여백 표시기가 Cc295203.8523b4c7-be0f-4624-961a-6adb66120049(KO-KR,Expression.30).png 또는 Cc295203.95a79778-cb78-400c-9f4f-5f6fc5a02eb1(KO-KR,Expression.30).png처럼 닫혀 있으면 여백이 설정된 것입니다. 런타임에 모눈의 크기를 조정하면 여백이 설정되지 않은 위치에 있는 개체는 그대로 유지됩니다. 모눈의 크기를 조정하면 여백에 연결된 개체도 여백과 함께 이동합니다.

Expression Blend에서는 간단한 규칙을 사용하여 기본 맞춤을 설정합니다. 즉, 그리거나 크기를 조정하는 자식 개체가 행 또는 열의 가운데를 지나면 Width 및 Height가 Auto로 설정되고, 그렇지 않으면 고정됩니다. 모눈의 크기가 조정될 때 여백이 적용되었는지 여부를 나타내는 맞춤 옵션을 설정할 수도 있습니다. 다음 그림과 같이 맞춤은 모눈 내에서 실선(맞춤 설정) 또는 파선(맞춤이 설정되지 않음)으로 표시됩니다.

왼쪽과 오른쪽에 연결(여백 설정 - 여백 값 표시)되고 위쪽과 아래쪽에서 연결되지 않은(여백이 설정되지 않음) 모눈 패널의 단추

Cc295203.cd8d0751-ffa0-4f04-bc2f-09584ecd873d(KO-KR,Expression.30).png

  • HorizontalAlignment

    • LeftCc295203.1e3c2891-633d-4162-a3bd-d5ac53046b56(KO-KR,Expression.30).png   왼쪽에 고정되지만 크기 조정 시 오른쪽으로 확장됩니다.

    • CenterCc295203.02978741-8e12-476d-afa7-165b613ea515(KO-KR,Expression.30).png   크기 조정에 관계 없이 항상 가로 가운데에 고정됩니다.

    • RightCc295203.c0d22c24-ad68-4355-b8f2-d6a373deaf8e(KO-KR,Expression.30).png   오른쪽에 고정되지만 크기 조정 시 왼쪽으로 확장됩니다.

    • StretchCc295203.90aa9534-0480-4a7f-b992-1af23c71ea9c(KO-KR,Expression.30).png   크기 조정 시 양쪽 가로 방향으로 확장됩니다.

  • VerticalAlignment

    • BottomCc295203.7c84b219-479d-45e7-b2fc-2df1b5e35129(KO-KR,Expression.30).png   아래쪽에 고정되지만 크기 조정 시 위쪽으로 확장됩니다.

    • CenterCc295203.5d244079-53d6-4188-ac2b-3a31054a2cd7(KO-KR,Expression.30).png   크기 조정에 관계 없이 항상 세로 가운데에 고정됩니다.

    • TopCc295203.737a11a8-b9d6-4270-8432-f17bb11a1337(KO-KR,Expression.30).png - 위쪽에 고정되지만 크기 조정 시 아래쪽으로 확장됩니다.

    • StretchCc295203.fbd6b7db-d726-4f40-b8c7-b287423e6615(KO-KR,Expression.30).png   크기 조정 시 양쪽 세로 방향으로 확장됩니다.

  • Margin 설정   Top, Left, Right 및 Bottom 여백의 픽셀 단위(약 1/96인치의 장치 독립적 단위) 고정 값입니다. 이 값은 모눈의 위치로 자식 개체를 끌 때 설정되며 선택한 개체의 가장자리부터 다음 모눈선까지의 거리를 나타냅니다.

자식 개체 크기 조정

자식 개체에는 고정 크기와 자동 크기의 두 가지 기본 크기 조정 옵션을 사용할 수 있습니다. 고정 크기 개체는 레이아웃 범주에서 특정 너비 및 높이 값이 설정되어 있습니다. 자동 크기 개체의 너비 및 높이 값은 Auto로 설정되어 있으므로 부모 패널의 크기에 따라 자동으로 크기가 조정됩니다.

  • MinWidth 및 MinHeight   행 또는 열 내에서 개체의 크기 또는 비율 크기를 조정할 수 있는 가장 작은 값입니다.

  • MaxWidth 및 MaxHeight   행 또는 열 내에서 개체의 크기 또는 비율 크기를 조정할 수 있는 가장 큰 값입니다. 최대 크기를 설정하지 않으려는 경우 이 속성을 Infinity로 설정하면 됩니다.

  • Clip contents   부모 패널에서 해당 자식 개체를 잘라낼지 여부를 결정합니다.

GridSplitter

GridSplitterCc295203.d08d529f-a27e-4a8f-95aa-8a4e8b4ee7be(KO-KR,Expression.30).png는 사용자가 런타임에 일부 모눈의 크기를 수동으로 조정하기 위해 상호 작용하는 모눈 패널에서 사용되는 컨트롤입니다. GridSplitter는 자산 패널에서 사용할 수 있습니다.

모눈 패널, GridSplitter 컨트롤 또는 사용자 지정 레이아웃 패널을 만드는 방법에 대한 자세한 내용은 Windows Presentation Foundation (WPF)용 .NET Framework 클래스 라이브러리의 System.Windows.Controls Namespace(System.Windows.Controls 네임스페이스) 섹션 또는 Microsoft Silverlight용 .NET Framework 클래스 라이브러리의 System.Windows.Controls Namespace(System.Windows.Controls 네임스페이스) 섹션을 참조하십시오.

참조

작업

행 또는 열 추가/제거

행 또는 열의 크기 조정 옵션 변경