Microsoft PowerApps 데이터 양식 레이아웃에 대한 이해Understand data-form layout in Microsoft PowerApps

PowerApps에서 매력적이고 효율적으로 사용할 수 있는 양식을 쉽게 만들 수 있습니다.In PowerApps, you can easily create forms that are attractive and efficient to use. 예를 들어 판매 주문을 기록하기 위해 다음 기본 양식을 고려해 보세요.For example, consider this basic form for recording sales orders:

판매 주문 샘플

이 자습서에서는 이 양식을 만드는 방법을 단계별로 설명합니다.In this tutorial, we'll walk through the steps to create this form. 또한 사용 가능한 공간을 채우기 위해 필드의 동적 크기 조정과 같은 몇 가지 고급 항목도 살펴봅니다.We'll also look at some advanced topics, such as dynamic sizing of fields to fill available space.

시작하기 전에Before you start

PowerApps를 처음 사용하거나 앱을 자동으로만 생성한 경우에는 이 항목을 살펴보기 전에 앱을 처음부터 빌드합니다.If you're new to PowerApps (or have only generated apps automatically), you'll want to build an app from scratch before you dive into this topic. 앱을 처음부터 빌드하는 경우 이 항목에서 언급하지만 설명하지 않는 데이터 원본 및 컨트롤 추가와 같이 필요한 개념에 익숙해집니다.By building an app from scratch, you'll become familiar with required concepts, such as adding data sources and controls, that are mentioned but not explained in this topic.

  1. 태블릿 앱을 처음부터 만들기Create a tablet app from scratch.

    이 항목에서 설명하는 모든 내용은 전화 레이아웃에도 적용되지만, 전화 앱에는 세로 열 하나만 있는 경우가 많습니다.Everything discussed in this topic also applies to phone layouts, but phone apps often have only one vertical column.

  2. Common Data Service판매 주문 엔터티를 앱의 데이터 원본으로 추가합니다.Add the Sales order entity in the Common Data Service as a data source for the app.

    이 자습서 외부에서 SharePoint 목록 및 Excel 표를 포함하여 모든 데이터 원본을 사용할 수 있습니다.Outside of this tutorial, you can use any data source, including SharePoint lists and Excel tables.

  3. 세로 갤러리 컨트롤을 추가하고, Items 속성을 '판매 주문'으로 설정합니다.Add a vertical Gallery control, and set its Items property to 'Sales order'.

    (선택 사항) 이 자습서의 예제에 맞게 갤러리의 레이아웃제목 및 부제목만 표시하도록 변경합니다.(optional) To match the examples in this tutorial, change the gallery's Layout to show only Title and subtitle.

    판매 주문 목록

  4. 갤러리에서 SO004를 클릭하거나 탭합니다.In the gallery, click or tap SO004.

    판매 주문 목록

    이 레코드는 이 항목의 뒷부분에 나오는 단계에 따라 빌드하는 양식에 표시됩니다.This record will appear in the form that you build by following steps later in this topic.

제목 표시줄 추가Add a title bar

  1. 양식을 배치할 빈 화면을 추가합니다.Add a blank screen where you'll put the form.

    이 자습서 외부에서 동일한 화면에 갤러리편집 양식 컨트롤을 배치할 수 있지만, 별도의 화면에 배치하면 더 많은 작업 공간을 갖게 됩니다.Outside of this tutorial, you can put the Gallery and Edit form controls on the same screen, but you'll have more room to work with if you put them on separate screens.

  2. 새 화면의 맨 위에 레이블 컨트롤을 추가하고, Text 속성을 다음 식으로 설정합니다.At the top of the new screen, add a Label control, and set its Text property to this expression:
    "판매 주문 " & Gallery1.Selected.SalesOrderId"Sales Order " & Gallery1.Selected.SalesOrderId

    갤러리에서 선택한 레코드의 판매 주문 번호가 레이블에 표시됩니다.The label shows the sales-order number of the record that you selected in the gallery.

  3. (선택 사항) 레이블의 서식을 다음과 같이 지정합니다.(optional) Format the label as follows:

    1. Align 속성을 Center로 설정합니다.Set its Align property to Center.
    2. Size 속성을 20으로 설정합니다.Set its Size property to 20.
    3. Fill 속성을 Navy로 설정합니다.Set its Fill property to Navy.
    4. Color 속성을 White로 설정합니다.Set its Color property to White.
    5. Width 속성을 Parent.Width로 설정합니다.Set its Width property to Parent.Width.
    6. XY 속성을 0으로 설정합니다.Set its X and Y properties to 0.

      제목 표시줄

양식 추가Add a form

  1. 양식 편집 컨트롤을 추가한 다음, 이동하고, 크기를 조정하여 레이블 아래의 화면을 채웁니다.Add an Edit form control, and then move and resize it to fill the screen under the label.

    다음 단계에서는 수식 입력줄이 아닌 오른쪽 창을 사용하여 양식 컨트롤을 판매 주문 데이터 원본에 연결합니다.In the next step, you'll connect the form control to the Sales order data source by using the right-hand pane, not the formula bar. 수식 입력줄을 사용하면 기본적으로 양식에 필드가 표시되지 않습니다.If you use the formula bar, the form won't show any fields by default. 오른쪽 창에서 하나 이상의 확인란을 선택하여 언제든지 원하는 필드를 모두 표시할 수 있습니다.You can always show any fields that you want by selecting one or more check boxes in the right-hand pane.

  2. 오른쪽 창에서 데이터 원본을 선택하지 않음 옆에 있는 아래쪽 화살표를 클릭하거나 탭한 다음, 판매 주문을 클릭하거나 탭합니다.In the right-hand pane, click or tap the down arrow next to No data source selected, and then click or tap Sales order.

    판매 주문 데이터 원본의 기본 필드 집합은 간단한 3열 레이아웃으로 표시됩니다.A default set of fields from the Sales order data source will appear in a simple, three-column layout. 그러나 대부분은 비어 있으며, 최종 위치에 정착하는 데 몇 분 정도 걸릴 수 있습니다.However, many are blank, and they may take a few moments to settle into their final positions.

  3. 양식의 Item 속성을 Gallery1.Selected로 설정합니다.Set the form's Item property to Gallery1.Selected.

    양식에는 갤러리에서 선택한 레코드가 표시되지만 기본 필드 집합이 최종 제품에서 원하는 것과 일치하지 않을 수 있습니다.The form shows the record that you selected in the gallery, but the default set of fields might not match what you want in your final product.

  4. 오른쪽 창에서 해당 확인란의 선택을 취소하여 각 필드를 숨깁니다.In the right-hand pane, hide each of these fields by clearing its checkbox:

    • 판매 주문 IDSales order ID
    • 계정Account
    • 영업 사원Sales person
    • 계정 연락처Account contact
  5. 주문 상태 필드를 왼쪽으로 끈 다음 고객 구매 주문 참조 필드의 다른 쪽에 놓아서 이동합니다.Move the Order status field by dragging it to the left and then dropping it on the other side of the Customer purchase order reference field.

    화면은 다음 예제와 비슷합니다.Your screen should resemble this example:

    기본 3열 레이아웃의 판매 주문

데이터 카드 선택Select a data card

표시된 각 필드에는 양식에 해당하는 데이터 카드가 있습니다.Each field displayed has a corresponding data card on the form. 이 카드는 필드 제목, 입력란, 별표(필드가 필요한 경우 표시됨) 및 유효성 검사 오류 메시지에 대한 일단의 컨트롤로 구성됩니다.This card comprises a set of controls for the field title, an input box, a star (which appears if the field is required), and a validation error message.

또한 양식에서 카드를 직접 선택할 수도 있습니다.You can also select cards directly on the form. 카드를 선택하면 위에 검은색 캡션이 표시됩니다.When a card is selected, a black caption appears above it.

데이터 카드 선택

참고: 카드를 숨기지 않고 삭제하려면 해당 카드를 선택한 다음 [삭제]를 누릅니다.Note: To delete a card (not just hide it), select it, and then press Delete.

열에서 카드 정렬Arrange cards in columns

태블릿 앱의 양식에는 기본적으로 세 개의 열이 있고, 전화 앱의 양식에는 하나의 열이 있습니다.By default, forms in tablet apps have three columns, and those in phone apps have one. 양식에 있는 열의 수뿐만 아니라 모든 카드가 열 테두리 내에 맞춰지는지 여부도 지정할 수 있습니다.You can specify not only how many columns a form has but also whether all cards should fit within column borders.

이 그래픽에서 열에 맞춤 확인란이 선택된 양식의 열 수가 3에서 4로 변경되었습니다.In this graphic, the number of columns in the form was changed from three to four with the Snap to columns check box selected. 양식의 카드는 새 레이아웃에 맞게 자동으로 정렬되었습니다.The cards in the form were arranged automatically to fit the new layout.

기본 4열 레이아웃의 판매 주문

여러 열에 걸쳐 카드 크기 조정Resize cards across multiple columns

각 카드의 데이터에 따라 일부 카드는 단일 열에 맞추고, 다른 카드는 여러 열에 걸쳐 배치할 수 있습니다.Depending on the data in each card, you might want some cards to fit in a single column and other cards to span multiple columns. 단일 열에 표시하려는 데이터보다 더 많은 데이터가 카드에 포함되어 있으면, 카드를 선택한 다음 해당 선택 상자의 왼쪽 또는 오른쪽 테두리에 있는 잡기 핸들을 끌어 카드를 넓힐 수 있습니다.If a card contains more data than you want to show in a single column, you can widen the card by selecting it and then dragging the grab handle on the left or right border of its selection box. 핸들을 끄는 대로 카드가 열 테두리에 "맞춰집니다".As you drag the handle, the card will "snap" to column boundaries.

디자인을 더 유연하게 만들지만 일부 구조를 유지하려면 열 수를 12로 늘릴 수 있습니다.To make your design more flexible but retain some structure, you can increase the number of columns to 12. 이러한 변경을 통해 각 카드를 전체 양식, 양식의 1/2, 1/3, 1/4, 1/6 등의 크기로 쉽게 구성할 수 있습니다.With that change, you can easily configure each card to span the entire form, half of the form, one-third, one-quarter, one-sixth, and so forth. 작업에서 이를 확인해 보겠습니다.Let's see this in action.

  1. 오른쪽 창에서 양식의 열 수를 12로 설정합니다.In the right-hand pane, set the number of columns in the form to 12.

    열 수 지정

    양식이 눈에 띄게 변경되지는 않지만, 왼쪽 또는 오른쪽 잡기 핸들을 끌면 더 많은 맞춤 지점이 있습니다.The form doesn't visibly change, but you have more snap points as you drag the left or right grab handle.

  2. 오른쪽에 있는 잡기 핸들을 오른쪽으로 끌어 주문 날짜 카드의 너비를 늘립니다.Increase the width of the Order date card by dragging the grab handle on the right one snap point to the right.

    카드는 양식의 12개 열 중 3개(또는 양식의 1/4)에만 걸쳐 있는 대신 양식의 12개 열 중 4개(또는 양식 1/3)에 걸쳐 있습니다.The card spans four of the form's 12 columns (or 1/3 of the form), instead of only three of the form's 12 columns (or 1/4 of the form). 카드의 너비를 맞춤 지점 하나씩에 맞춰 늘릴 때마다 카드는 양식의 1/12만큼 추가로 넓혀집니다.Whenever you increase a card's width by one snap point, the card spans an additional 1/12 of the form.

    끌어서 놓기로 카드 크기 조정

  3. 주문 상태고객 구매 주문 참조 카드로 이전 단계를 반복합니다.Repeat the previous step with the Order status and Customer purchase order reference cards.

    첫 번째 행에 3개 카드

  4. 양식의 6개 열(또는 1/2)을 차지하도록 이름설명 카드의 크기를 조정합니다.Resize the Name and Description cards to take up six columns (or 1/2) of the form.
  5. 배달 주소의 처음 두 줄을 양식 전체에 걸쳐 늘립니다.Make the first two lines of the delivery address stretch entirely across the form:

모두 완료되었습니다.All done. 서로 다른 수의 열로 행을 혼합하여 원하는 양식을 갖췄습니다.We have our desired form, mixing rows with different numbers of columns:

크기 조정을 통한 12열 레이아웃의 판매 주문

카드의 컨트롤 조작Manipulate controls in a card

배달 주소는 사용자를 위해 시각적으로 함께 그룹화하려는 몇 가지 정보로 구성됩니다.The delivery address comprises several pieces of information that we want to visually group together for the user. 각 필드는 자체 데이터 카드에 그대로 남아 있지만, 카드 내에서 컨트롤을 조작하여 더 효율적으로 맞출 수 있습니다.Each field will remain in its own data card, but we can manipulate the controls within the card to make them fit better together.

  1. 배달 주소의 첫 번째 줄 카드를 선택하고, 해당 카드 내의 레이블을 선택한 다음, 텍스트에서 처음 세 단어를 삭제합니다.Select the First line of Delivery address card, select the label within that card, and then delete the first three words from the text.

    판매 주문 배달 주소의 첫 번째 줄 레이블 이름 바꾸기

  2. 배달 주소의 두 번째 줄 카드를 선택하고, 해당 카드 내의 레이블을 선택한 다음, 그 안에 있는 모든 텍스트를 삭제합니다.Select the Second line of Delivery address card, select the label within that card, and then delete all of the text in it.

    단순히 레이블 컨트롤을 제거하고 싶을 수도 있으며, 대부분의 경우 제대로 작동합니다.It may be tempting to simply remove the label control and, in many cases, that will work fine. 그러나 수식은 존재하는 해당 컨트롤에 따라 달라질 수 있습니다.But formulas might depend on that control being present. 더 안전한 방법은 텍스트를 제거하거나 컨트롤의 Visible 속성을 false로 설정하는 것입니다.The safer approach is to remove the text or to set the Visible property of the control to false.

    판매 주문 배달 주소의 두 번째 줄 레이블 이름 바꾸기

  3. 동일한 카드에서 텍스트 입력란을 레이블 위로 이동하여 주소의 첫 번째 줄과 두 번째 줄 사이의 공간을 줄입니다.In the same card, move the text input box over the label to reduce the space between the first and second lines of the address.

    카드의 내용이 적은 공간을 차지하면 카드의 높이가 줄어듭니다.The height of the card shrinks when its contents take up less space.

    판매 주문 배달 주소의 두 번째 줄 레이블 이름 바꾸기

이제 주소의 세 번째 줄을 살펴보겠습니다.Now let's turn our attention to the third line of the address. 방금 수행한 작업과 비슷하게, 이러한 카드에 대한 각 레이블의 텍스트를 줄이고 텍스트 입력란을 각 레이블의 오른쪽에 정렬합니다.Similar to what we just did, let's shorten the text of each label for these cards and arrange the Text input box to be to the right of each label. 상태 카드에 대한 단계는 다음과 같습니다.Here are the steps for the State card:

단계Step 설명Description 결과Result
11 상태 카드를 선택하여 주위에 잡기 핸들이 표시되도록 합니다.Select the State card so that grab handles appear around it. 카드 선택
22 이 카드 내의 레이블을 선택하여 주위에 잡기 핸들이 표시되도록 합니다.Select the label within this card so that grab handles appear around it. 카드 내의 컨트롤 선택
33 텍스트 오른쪽에 커서를 놓은 다음 필요하지 않은 부분을 삭제합니다.Place the cursor to the right of the text, and then delete the portion that we don't need. 카드에 있는 컨트롤 내의 텍스트 변경
44 측면에 있는 잡기 핸들을 사용하여 레이블 컨트롤의 크기를 새 텍스트 크기에 맞춥니다.Using the grab handles on the sides, size the label control to fit the new text size. 카드 내의 컨트롤 크기 조정
55 이 카드 내의 텍스트 입력 컨트롤을 선택합니다.Select the text input control within this card. 카드 내의 다른 컨트롤 선택
66 측면에 있는 잡기 핸들을 사용하여 텍스트 입력 컨트롤의 크기를 원하는 크기로 조정합니다.Using the grab handles on the sides, size the text input control to the size that you want. 카드 내의 컨트롤 크기 조정
77 텍스트 입력란을 레이블 컨트롤의 오른쪽 위로 끌어서 놓습니다.Drag the text input box up and to the right of the label control, and then drop the text input box. 카드 내의 컨트롤 이동
이제 상태 카드에 대한 수정이 완료되었습니다.Our modifications to the State card are now complete. 완료된 카드 수정

완료된 세 번째 주소 줄에 대한 결과는 다음과 같습니다.The result for the complete third address line:

더 간결한 세 번째 줄이 있는 판매 주문 배달 주소

대부분의 카드는 해당 속성에 대한 동적 수식으로 시작합니다.Note that many of the cards start out with dynamic formulas for their properties. 예를 들어 크기를 조정하고 위로 이동한 텍스트 입력 컨트롤에는 부모의 너비를 기준으로 하는 Width 속성이 있습니다.For example, the Text input control that we resized and moved above had a Width property based on the width of its parent. 컨트롤을 이동하거나 크기를 조정하면 이러한 동적 수식이 정적 값으로 바뀝니다.When you move or resize a control, these dynamic formulas are replaced with static values. 원하는 경우 수식 입력줄을 사용하여 동적 수식을 복원할 수 있습니다.If you want, you can restore the dynamic formulas by using the formula bar.

열에 맞춤 해제Turning off Snap to columns

제공될 수 있는 표준 12열보다 더 세밀하게 제어하려는 경우가 있습니다.Sometimes you'll want finer control than the standard 12 columns can provide. 이러한 경우를 위해 열에 맞춤을 해제한 다음 카드를 수동으로 배치할 수 있습니다.For these cases, you can turn off Snap to columns and then position cards manually. 양식은 12개 열로 계속 맞춰지지만, Alt 키를 누른 채 원하는 대로 카드의 위치와 크기를 수동으로 지정할 수 있습니다.The form will continue snapping to 12 columns, but you can also hold down the Alt key to manually position and size a card as you wish.

이 예제에서 주소의 세 번째 줄을 구성하는 네 개의 구성 요소는 모두 정확히 동일한 너비를 갖습니다.In our example, the four components that make up the third line of the address all have exactly the same width. 그러나 이는 도시 이름이 주 약어보다 길고 국가/지역에 대한 텍스트 입력란은 레이블의 길이로 인해 짧기 때문에 최상의 레이아웃이 아닐 수 있습니다.But this may not be the best layout, as city names are longer than state abbreviations, and the Text input box for countries/regions is short due to the length of its label.

이 공간을 최적화하려면 오른쪽 창에서 열에 맞춤을 해제한 다음 Alt 키를 누른 채 이러한 카드의 크기와 위치를 조정합니다.To optimize this space, turn off Snap to columns in the right-hand pane and then hold down the Alt key while sizing and positioning these cards. Alt 키를 누르고 있을 때마다 모든 컨트롤에 검은색 캡션이 표시됩니다.Whenever you hold down the Alt key, all controls show black captions. 이 동작은 의도적으로 컨트롤 이름을 표시하기 위한 것입니다.This behavior is by design to show you control names.

ALT 키를 누른 채 위치 지정 및 크기 조정

신중하게 배치한 결과 각 필드의 크기가 적절하고 필드 간의 수평 간격이 균일하게 되었습니다.After careful positioning, the result has appropriate sizes for each field and even spacing horizontally between fields:

정확히 배치된 판매 주문 배달 주소의 세 번째 줄

요약하여 열에 맞춤 설정과 해제 간의 차이점은 무엇일까요?In summary, what are the differences when Snap to columns is on versus off?

동작Behavior 열에 맞춤 설정Snap to columns On 열에 맞춤 해제Snap to columns Off
다음으로 맞춤 크기 조정Resize snaps to 선택한 열 수:Number of columns you select:
1, 2, 3, 4, 6 또는 121, 2, 3, 4, 6, or 12
12개 열12 columns
맞춤 크기 조정 재정의 가능Resize snap can be overriden 아니요No 예, Alt 키 사용Yes, with Alt key
자동으로 카드의 행 간 레이아웃 재지정(나중에 자세히 설명함)Cards automatically re-layout between rows (more on this later) Yes 아니요No

너비 및 높이 설정Set width and height

PowerApps의 모든 레이아웃과 마찬가지로 양식의 레이아웃은 카드 컨트롤의 속성으로 제어됩니다.As with everything in PowerApps, the form's layout is governed by properties on the card controls. 이미 설명한 대로 컨트롤을 다른 위치로 끌거나 잡기 핸들을 끌어서 컨트롤의 크기를 조정함으로써 이러한 속성의 값을 변경할 수 있습니다.As already described, you can change the values of these properties by dragging controls to different locations or dragging grab handles to resize controls. 그러나 특히 수식을 사용하여 양식을 동적으로 만들 때 이러한 속성을 더 정확하게 이해하고 조작하려는 상황을 알게 됩니다.But you'll discover situations in which you'll want to understand and manipulate these properties more precisely, especially when making your forms dynamic with formulas.

기본 레이아웃: X, Y 및 너비Basic Layout: X, Y, and Width

XY 속성은 카드의 위치를 제어합니다.The X and Y properties control the position of cards. 원시 캔버스의 컨트롤을 사용하는 경우 이러한 속성은 절대 위치를 제공합니다.When we work with controls on the raw canvas, these properties provide an absolute position. 양식에서 이러한 속성은 다른 의미를 갖습니다.In a form, these properties have a different meaning:

  • X: 행 내 순서X: Order within a row.
  • Y: 행 번호Y: Row number.

캔버스의 컨트롤과 마찬가지로 Width 속성은 카드의 최소 너비(모멘트당 최소 가로 세로 비율 이상)를 지정합니다.Similar to controls on the canvas, the Width property specifies the minimum width of the card (more on the minimum aspect in a moment).

양식에 있는 카드의 X, YWidth 속성을 살펴보겠습니다.Let's take a look at the X, Y, and Width properties of the cards in our form:

판매 주문 양식의 X 및 Y 좌표

행 오버플로Overflowing rows

한 행에 있는 카드가 너무 커서 해당 행에 맞지 않으면 어떻게 되나요?What happens if the cards on a row are too wide to fit on that row? 일반적으로 이 가능성에 대해 걱정할 필요가 없습니다.Normally you don't need to worry about this possibility. 열에 맞춤을 사용하면 이러한 세 가지 속성이 자동으로 조정되어 모든 항목이 오버플로 없이 행 내에서 정확히 맞춰질 수 있습니다.With Snap to columns on, these three properties will automatically be adjusted so that everything fits nicely within rows without overflowing.

그러나 열에 맞춤을 사용하지 않거나 하나 이상의 카드에서 수식 기반 너비를 사용하면 행 오버플로가 발생할 수 있습니다.But with Snap to columns turned off or a formula-based Width on one or more of your cards, overflowing a row can happen. 이 경우 카드가 자동으로 줄 바꿈되어 효과적으로 다른 행이 만들어집니다.In this case, the cards will automatically wrap so that, effectively, another row is created. 예를 들어 고객 구매 주문 참조 카드(첫 번째 행, 세 번째 항목)의 Width 속성을 500으로 수동으로 변경해 보겠습니다.For example, let's manually change the Width property of our Customer purchase order reference card (first row, third item) to 500:

카드 크기 수동 조정, 새 행으로 재배치

위쪽 행에 있는 세 개의 카드는 더 이상 수평으로 맞지 않으며 오버플로를 래핑하기 위해 다른 행이 만들어졌습니다.The three cards on the top row no longer fit horizontally, and another row has been created to wrap the overflow. 이러한 모든 카드의 Y 좌표는 여전히 0으로 동일하고, 이름설명 카드의 Y 좌표는 여전히 1입니다.The Y coordinate for all these cards is still the same at 0, and the Name and Description cards still have a Y of 1. 다른 Y 값이 있는 카드는 여러 행에서 병합되지 않습니다.Cards that have different Y values aren't merged across rows.

이 동작을 사용하여 완전한 동적 레이아웃을 만들 수 있습니다. 이 경우 카드는 Z 순서에 따라 배치되며 다음 행으로 이동하기 전에 최대한 많이 채웁니다.You can use this behavior to create a fully dynamic layout, where cards are placed based on a Z-order, filling across as much as possible before moving to the next row. 이 효과를 얻으려면 모든 카드에 동일한 Y 값을 제공하고 카드 순서에 대해 X를 사용합니다.To achieve this effect, give all the cards the same Y value, and use X for the order of the cards.

공간 채우기: WidthFitFilling spaces: WidthFit

마지막 예제의 오버플로는 첫 번째 행의 두 번째 카드인 주문 상태 카드 뒤에 공간을 만들었습니다.The overflow in the last example created a space after the Order status card, which was the second card in the first row. 이 공간을 채우기 위해 나머지 두 카드의 Width 속성을 수동으로 조정할 수 있지만 이 방법은 싫증나는 작업입니다.We could manually adjust the Width properties of the two remaining cards to fill this space, but this approach is tedious.

다른 방법으로 WidthFit 속성을 사용합니다.As an alternative, use the WidthFit property. 행에 있는 하나 이상의 카드에 대해 이 속성을 true로 설정하면 행에 남아 있는 공간이 카드 간에 균등하게 분할됩니다.If this property is set to true for one or more cards in a row, any remaining space on the row will be evenly divided between them. 이 동작은 이전에 카드의 Width 속성이 '최소'이며 실제로 표시되는 부분이 더 넓을 수 있다고 설명한 것입니다.This behavior is why we said earlier that the Width property of a card is a minimum, and what is actually seen can be wider. 이 속성은 카드를 결코 줄이지 않고 늘리기만 합니다.This property will never cause a card to shrink, only expand.

주문 상태 카드에서 WidthFittrue로 설정하면 첫 번째 카드는 변경되지 않은 채 사용 가능한 공간이 채워집니다.If we set WidthFit to true on the Order status card, it fills the available space, while the first card remains unchanged:

두 번째 카드에서 WidthFit을 true로 설정

주문 날짜 카드에서 WidthFittrue로 설정하면 두 카드 모두 사용 가능한 공간을 균등하게 분할합니다.If we also set WidthFit to true on the Order date card, both cards will evenly split the available space:

첫 번째 및 두 번째 카드에서 WidthFit을 true로 설정

이러한 카드에 대한 잡기 핸들은 Width 속성으로 제공되는 최소 너비가 아니라 WidthFit으로 제공되는 추가 너비를 고려합니다.Note that grab handles on these cards take into account the extra width provided by WidthFit, not the minimum width provided by the Width property. WidthFit이 설정되어 있는 동안 Width 속성을 조작하는 것이 혼란스러울 수 있습니다. WidthFit을 해제하고 Width를 변경한 다음 WidthFit을 다시 설정하는 것이 좋습니다.It can be confusing to manipulate the Width property while WidthFit is turned on; you may want to turn it off, make changes to Width, and then turn it back on.

WidthFit은 언제 유용할까요?When might WidthFit be useful? 특정 상황에서만 사용되는 필드가 있는 경우 Visible 속성을 false로 설정하면 행의 다른 카드가 자동으로 주위 공간을 채웁니다.If you have a field that is used only in certain situations, you can set its Visible property to false, and the other cards on the row will automatically fill the space around it. 다른 필드에 특정 값이 있는 경우에만 필드를 표시하는 수식을 사용할 수도 있습니다.You might want to use a formula that shows a field only when another field has a particular value.

여기서는 주문 상태 필드의 Visible 속성을 정적 false로 설정합니다.Here, we'll set the Visible property of the Order status field to a static false:

상태 순서가 표시되지 않는 첫 번째 카드에서 true로 설정된 WidthFit

두 번째 카드를 효과적으로 제거하면 이제 세 번째 카드가 첫 번째 카드와 같은 행으로 돌아갈 수 있습니다.With the second card effectively removed, the third card can now return to the same row as the first card. 첫 번째 카드에는 아직도 true로 설정된 WidthFit이 있으므로 사용 가능한 공간을 채우기 위해 첫 번째 카드가 자동으로 확장됩니다.The first card still has WidthFit set to true, so it alone expands to fill the available space.

주문 상태가 표시되지 않으므로 캔버스에서 쉽게 선택할 수 없습니다.Because Order status is invisible, you can't select it as easily on the canvas. 그러나 화면의 왼쪽에 있는 컨트롤의 계층적 목록에서 표시되거나 표시되지 않는 컨트롤을 선택할 수 있습니다.However, you can select any control, visible or not, in the hierarchical list of controls on the left side of the screen.

HeightHeight

Height 속성은 각 카드의 높이를 제어합니다.The Height property governs the height of each card. 카드는 Height에 대한 WidthFit에 해당하며, 항상 true로 설정됩니다.Cards have the equivalent of WidthFit for Height, and it's always set to true. HeightFit 속성이 있지만 이러한 속성이 아직 노출되지 않았으므로 제품에서 해당 속성을 찾을 필요가 없습니다.Imagine that a HeightFit property exists, but don't look for it in the product because such a property isn't yet exposed.

이 동작은 해제할 수 없으므로 카드 높이를 변경하는 것이 어려울 수 있습니다.You can't turn off this behavior, so changing the heights of cards can be challenging. 한 행에 있는 모든 카드는 가장 높은 카드와 같은 높이로 표시됩니다.All cards within a row appear to be the same height as the tallest card. 다음과 같은 행을 볼 수 있습니다.You might look at a row like this:

상태 순서가 표시되지 않는 첫 번째 카드에서 true로 설정된 WidthFit

어떤 카드가 행 높이를 크게 만드나요?Which card is making the row tall? 이전 그래픽에서 총 금액 카드가 선택되고 큰 높이로 표시되지만, Height 속성이 80(첫 번째 행의 높이와 같음)으로 설정되었습니다.In the previous graphic, the Total amount card is selected and appears tall, but its Height property is set to 80 (same as the height of the first row). 행 높이를 줄이려면 해당 행에서 가장 높은 카드의 Height를 줄여야 하며, 가장 높은 카드는 각 카드의 Height 속성을 검토하지 않고는 식별할 수 없습니다.To reduce the height of a row, you must reduce the Height of the tallest card in that row, and you can't identify the tallest card without reviewing the Height property of each card.

AutoHeightAutoHeight

카드에 true로 설정된 AutoHeight 속성이 있는 컨트롤이 포함된 경우 카드의 높이가 예상보다 클 수 있습니다.A card might also be taller than you expect if it contains a control for which the AutoHeight property is set to true. 예를 들어 많은 카드에는 필드 값으로 인해 유효성 검사 문제가 발생하는 경우 오류 메시지를 표시하는 레이블이 포함되어 있습니다.For example, many cards contain a label that displays an error message if the field's value causes a validation problem.

표시할 텍스트가 없으면(오류 없음) 레이블이 0 높이로 축소됩니다.Without any text to display (no error), the label collapses to zero height. 더 잘 알지 못했다면 거기에 있다는 것을 몰랐을 것이고 이는 당연한 것입니다.If you didn't know any better, you wouldn't know it was there, and that's as it should be:

AutoHeight가 true로 설정된 컨트롤이 포함된 카드에는 높이가 표시되지 않습니다.

화면 왼쪽의 컨트롤 목록에는 레이블 컨트롤인 ErrorMessage1가 표시됩니다.On the left side of the screen, the list of controls shows ErrorMessage1, which is our label control. 앱을 업데이트할 때 이 컨트롤을 선택하여 일부 높이를 지정하고, 컨트롤의 위치를 지정하고 크기를 조정할 수 있는 잡기 핸들을 표시할 수 있습니다.As you update an app, you can select this control to give it some height and show grab handles with which you can position and size the control. 파란색 상자의 "A"는 true로 설정된 AutoHeight가 컨트롤에 있음을 나타냅니다.The "A" in a blue box indicates that the control has AutoHeight set to true:

제작 시 AutoHeight 컨트롤은 일부 높이를 표시하여 끌어서 놓기를 더 쉽게 수행할 수 있습니다.

이 컨트롤의 Text 속성은 유효성 검사 규칙에 따라 동적 오류 정보를 얻는 데 사용되는 Parent.Error로 설정됩니다.The Text property of this control is set to Parent.Error, which is used to obtain dynamic error information based on validation rules. 이해를 돕기 위해 이 컨트롤의 Text 속성을 정적으로 설정해 보겠습니다. 그러면 텍스트의 길이를 수용할 수 있도록 컨트롤의 높이(더 나아가 카드의 높이)가 늘어납니다.For illustration purposes, let's statically set the Text property of this control, which will increase its height (and, by extension, the height of the card) to accommodate the length of the text:

오류 메시지를 사용하면 컨트롤과 카드가 자동으로 늘어납니다.

오류 메시지를 조금 더 길게 만들고, 이를 수용할 수 있도록 컨트롤과 카드를 다시 늘려 보겠습니다.Let's make the error message a little longer, and again the control and the card grow to accommodate. 행 전체의 높이가 커지고 카드 간의 세로 맞춤이 유지됩니다.Note that the row overall grows in height, retaining vertical alignment between the cards:

더 긴 오류 메시지를 사용하면 컨트롤과 카드가 더욱 커지고 같은 행의 카드도 모두 함께 커지게 됩니다.